Mastering data visualization in D3.js

Set up your d3 development environment, learn what svgs are, and write basic d3 commands to draw and bind shapes to data for a rectangle-based visualization of building heights.

Set up your development environment for D three by installing node and npm, and running a local http server with chrome, VS Code, and the D three CDN.

Learn how to use scalable vector graphics in D3 to visualize data with SVG canvas, positioning shapes, styling with fill and stroke, and creating paths for charts.

Learn to add SVG shapes with D3 by selecting elements, appending shapes, and chaining attributes on an SVG canvas, then create a circle and switch to a rectangle to practice.

Explore how D3 binds data to SVG elements with select all, enter, and append to create multiple circles whose attributes depend on data in a data-driven join.

Load external data with D3 from csv, tsv, and json files, bind data to svgs, convert strings to numbers, and handle errors with promises and catch for a simple visualization.

Set up your environment for programming in d3.js, learn what svgs are and how to render them with HTML and d3, and bind shapes to data.

Use scales in D3 to convert raw data into chart-ready values, add axes and labels, and build bars that rise from the bottom to form a bar chart for investors.

Master linear scales in D3.js to map raw building heights (meters) to pixel heights in an svg, using domain and range and invert for cursor positioning.

Compare logarithmic scales with linear scales to visualize exponential growth data, explain D3's scale log usage, bases, and domain rules, and show examples like population and GDP per capita.

Explores timescales as a type of linear scale in d3 using date objects. Maps dates to numeric ranges and notes string-to-date conversion and section six parsing and formatting.

Master the ordinal scale in D3.js for discrete categories, mapping domain to range colors and leveraging built-in color schemes to generate quick palettes.

Learn how d3 min, max, and extent automatically set scale domains and how map functions generate categorical domains for reusable bar charts.

Explore how svg groups implement the D3 margin convention to support axes. Translate the group by left and top margins to center the visualization and simplify axis placement.

Add x and y axes and labels to a D3 bar chart using left and bottom generators. Configure ticks, tick values, and tick rotation to improve readability and interpretation.

Reverse the y scale and map zero to the bottom of the svg canvas so 828 maps to the top, enabling bars to rise from the baseline.

Create your first d3.js bar chart using Paula's Star Break Coffee CSV sales data, building an investor-ready visualization from a ready-made project folder.

Learn to use scales, axes, and margins to transform shapes into a bar chart in D3, and explore data visualization design to choose appropriate visuals and critique existing charts.

Apply D3 to create new visualizations for your field, starting with sketches before coding, embracing best practices, exploring different data types, and using the bootstrap grid system for responsive pages.

Design for clarity applies Tufts's principles to create easy-to-read, credible visualizations that focus on data and avoid chartjunk, while using lie factor and data-ink ratio to guide choices.

Balance Tufte's chartjunk critique with aesthetics and storytelling to create memorable, interactive D3 visualizations that hook readers.

Apply design choices across visual channels including position, size, gray value, texture, color, orientation, and shape to convey data for qualitative, ordinal, and categorical types.

Learn to brainstorm and communicate data visualizations quickly through large, disposable sketches that explore choropleth maps, sunburst plots, and treemaps for displaying population and GDP per capita.

Explore how the Bootstrap grid system structures web pages using a 12-column layout, with container, row, and col classes, to create responsive visualizations across xs, sm, md, and lg screens.

Apply basic rules of thumb to design and build better visualizations, and explore the D3 update pattern to create dynamic visuals, building on the bar chart for Paula's coffee chain.

Learn to dynamicize a static bar chart using the D3 update pattern, add transitions, and convert between datasets, including a scatter plot and a Gapminder-style bubble chart.

Use the D3.js interval to refresh a chart by switching between two data sources, update the visualization state, and log updates to the console every second.

Transform a static D3 visualization into a dynamic one by adding an update function called in an interval to refresh scales, axes, the y-axis label, and rectangles.

Explore the d3 update pattern, performing a data join with select all, handling enter, update, and exit to add, modify, or remove rectangles as the data array changes.

Toggle between revenue and profit data in a dynamic D3 chart using a flag and the ternary operator to update the visualization and y-axis label.

Apply D3 transitions to animate charts with durations, enter/update merges, and key-based data joins to smoothly morph bars and axes, preparing your visualization for a scatter plot.

Learn to convert a bar chart into a scatter plot in D3 by swapping rectangles for circles, using cx, cy, and radius, and adjusting scales for population-based areas.

Build a Gapminder clone in D3.js, using update patterns and year-by-year data, with a log GDP per capita scale, life expectancy and population mapping, and continents color.

Master D3.js data visualization using the update pattern, transitions, and intervals to create loops, and preview upcoming interactive features like pause, a time slider, and continent filtering.

Explore interactive data visualization with d3.js by adding event handlers and listeners to svg elements, building an interactive line chart of cryptocurrency historical prices.

Add a reusable legend in D3 by grouping the legend and each row, drawing colored squares with an ordinal scale and left-aligned continent labels at the bottom-right.

Explore D3's format function and time format and time parse to format numbers with specifiers, symbols, commas, decimals, and currencies, and convert between Date objects and readable strings.

Add tooltips to the bubble chart with the D3 tip library, initialize and attach the tooltip, and show country name, continent, life expectancy, GDP per capita, and population on hover.

Explore adding play/pause and reset controls, a continent filter, and event-driven updates in d3 using setInterval and jQuery to control the year 1800.

Enable real-time year selection with a jQuery UI slider for a D3 bubble chart, using min, max, step, and range options to update the visualization.

Learn how to create line graphs in D3 using the line generator to draw paths, and adapt existing code with SVG, scales, axes, and a tooltip.

design and implement an interactive line chart that visualizes cryptocurrency prices, 24-hour trading volume, or market cap for the five biggest coins, with a date range slider and responsive updates.

Master data visualization with D3.js by building a production-quality line graph, wiring interactive elements, and managing multiple visualizations with robust event handlers.

Learn to read, understand, and adapt someone else's D3 code to get a quick overview of visualizations. Discover where to search for visualizations and how to handle different D3 versions.

Explore the D3 community by using bl.ocks.org and blockbuilder.org to find and fork boilerplate visualizations, then adapt code with the D3 update pattern and event handling.

Learn how to migrate D3.js code to version 5 by switching data loading from callbacks to promises and updating color schemes, with a practical bar chart example.

Explore D3 layouts and layout functions to transform data into visual coordinates for pie charts, treemaps, and word clouds, with v3 to v4 syntax differences and practical examples.

Learn how area charts in D3 extend line charts by filling area between two lines. The lecture walks through example code, data loading via d3.tsv, and area path generator.

Learn to build stacked area charts in D3.js using the stack layout. See market share and oil consumption examples and learn data transformation, domain scaling, and axis rendering.

Explore when to use arrays or objects in D3 data handling, and leverage the D3 nest function to group data by year and variety, improving performance and updates.

Learn to build pie and donut charts with D3 using the pie layout and arc generator, and implement smooth transitions with arc tween across version four.

Build word clouds with d3, updating a community cloud plugin for version four. Load csv data, group by state, and render words in a word cloud layout.

Learn five new D3 visualization types and how layouts attach attributes to data. Fork and adapt existing visuals to your data as you see how a D3 file comes together.

Learn to draw maps in D3 using projection algorithms and the D3 geo path generator, manage map files, load datasets with the queue module, and build force layout node-link diagrams.

Learn to draw maps with d3 by converting topojson to geojson and rendering land borders and graticule lines with the geo path generator, using mercator and other projections.

Learn how to load multiple data sources in D3 using promises and Promise.all, compare to older queue approaches, and load maps and unemployment data in parallel for faster visualizations.

Master choropleth maps with D3 by visualizing unemployment and population density across states and counties using Topojson, color scales, and legends, while stitching map data with external datasets.

Explore the D3 force layout to create interactive, physics-driven visualizations with nodes and links and forces like center, charge, collide, and force X and Y.

Explore node-link diagrams using the D3 force layout to visualize network connections, with nodes and links encoded by size, color, and link thickness, plus drag and tooltip interactions.

Learn to build maps and networks with D3.js and format multi-file data for layouts, while preparing for the final crash course on hierarchical data with four new visualizations.

Explore hierarchical data visualizations in D3.js, from tree diagrams and tree maps to circle packs and sunburst plots, and learn to format data for layouts.

Discover how to use d3.js hierarchy and stratify layouts to structure data as a hierarchy, including root, child, parent, leaf concepts, depth, height, value fields, and optional accessors.

Explore tree diagrams to visualize hierarchical structures with d3's tree and stratify layouts, including data preparation, layout calculations, and node-link rendering.

Explore treemaps in D3.js using the hierarchy and treemap layouts to visualize hierarchical data, compare categories by area and color, and switch metrics with an interactive control.

Explore circle packing in d3.js, using the pack and stratify layouts to visualize population by country and region, with color by depth and interactive hover revealing ancestors.

Build a sunburst plot in D3 by using the partition layout and arc generator, format data with D3 hierarchy layout, and explore nodes via click-driven transitions.

Explore a range of hierarchical visualizations, understand, adapt, and improve them; rewrite visuals as reusable objects and connect multiple charts with common event handlers for a data dashboard.

Structure your D3.js visualizations with modular, object-oriented code to support multiple visualizations on a single page, enabling reusable components for a production-quality sales dashboard.

Modularize the code into separate files (main.js and line chart.js), manage scope and global variables, load scripts via index, and prepare for multiple visualizations using an object oriented style.

Explore object oriented programming concepts by building visualizations as objects with properties and methods, using ES6 classes to create reusable bar chart objects that initialize, wrangle data, and update viz.

Learn to coordinate multiple d3 visualizations with a central main.js controller, updating two donut charts and a line chart when a coin is selected or an arc is clicked.

Master d3 brushes to create a focus and context effect, linking a timeline area context graph with a focus graph and updating together through brush events on the x axis.

Design and implement a final D3.js data dashboard for Freedom Corp's 2017 sales data, building a stacked area chart with brushable context, regional comparisons, and synchronized summary metrics.

Advance your D3.js skills to handle multiple visualizations on a single page by writing visualizations as objects within the familiar project structure, creating dashboards that resemble real company sites.