Lessons
Explore all newline lessons
lesson
Drawing our peripherals in ReactFullstack D3 MasterclassWe take a naive approach to creating an Axis component
lesson
Drawing our data in ReactFullstack D3 MasterclassNext, we fill out our Line component for a flexible way to draw our data.
lesson
Creating our scales in ReactFullstack D3 MasterclassNext, we need to create our scales. We also create scaled accessor functions to pass to the children of our Timeline, so they don't need to know about our scales.
lesson
Drawing our canvas in ReactFullstack D3 MasterclassWe create our wrapper and bounds within our Chart component to prevent from having to repeat ourselves for every chart we create.
lesson
Creating dimensions in ReactFullstack D3 MasterclassCreating dimensions in React can be really easy! We use a custom hook for watching the size of our wrapper and automatically calculating the dimensions of our bounds.
lesson
Week 7: ExerciseFullstack D3 MasterclassLet's consolidate what we just learned with an exercise to play with this week.
lesson
Will ChaseFullstack D3 MasterclassWill Chase talks us through how he got into data viz, the difference between work and freelance projects, and walks us through his most recent, wonderful visualization of hurricane names.
lesson
Russell GoldenbergFullstack D3 MasterclassRussell Goldenberg talks to us about what it's like working at the Pudding, his journey from Comp Sci to creative computation, and drops some great tips for working on data viz projects.
lesson
Step 6: Draw peripheralsFullstack D3 MasterclassOur sixth step: drawing peripherals. We draw our axes, learn about the text SVG element, and how to add (and rotate) labels.
lesson
Step 5: Draw dataFullstack D3 MasterclassThe fifth step: drawing our data. This is an important lesson! We talk about data joins, which are one of the trickiest parts of d3, and necessary for updating our charts & binding our visualization to data.
lesson
Step 4: Create scalesFullstack D3 MasterclassThe fourth step: creating our scales. We talk about scales in more depth, and learn about d3.extent() & .nice().
lesson
Step 3: Draw canvasFullstack D3 MasterclassThe third step: drawing our canvas. We create our wrapper & bounds, then shift them to respect our margins.