Chip

Cheap Tricks for Interaction

This example shows a world map rendered with D3.js, using green countries that turn red on hover. The visualization demonstrates fundamental DOM manipulation and event handling through D3’s `select`, `data`, and `enter` methods, while `d3.geoPath` and `d3.geoNaturalEarth1` project the TopoJSON data from the world-atlas dataset. The SVG paths respond directly to CSS `:hover` styling, illustrating how inexpensive interactivity can be achieved with minimal JavaScript.

Feb 26, 2020

Let's make a map with D3.js!

This example creates a world map rendered as SVG using D3 v5 and TopoJSON. It loads world country boundaries from the World Atlas TopoJSON dataset, projects them with the `geoNaturalEarth1` projection, and draws each country as a filled path using `d3.geoPath`. A blue sphere background is added first, with countries shown in light green and outlined with subtle black strokes. The map displays the entire globe with country shapes accurately projected.

Choropleth Map

This choropleth map displays world countries colored in light green against a blue sphere, with hover highlighting in red. It uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1` to render country boundaries from TopoJSON data sourced from the world-atlas package, paired with a TSV file for country names. Pan and zoom interactions are enabled through `d3.zoom`, while tooltips show country names via SVG `title` elements.

Choropleth Map

A choropleth map colors countries by their economic classification using an ordinal color scale with the `schemeSpectral` palette. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to render world geography, with data loaded from the World Atlas TopoJSON and TSV files via `d3.json` and `d3.tsv`. A custom color legend displays the scale, and zooming is enabled through `d3.zoom`. Hovering highlights a country by turning it red.

Temperature in San Francisco Scatter Plot

This scatter plot shows temperature readings over time in San Francisco, with a red semi-transparent circle for each data point and an orange line connecting them in chronological sequence. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and `line` to generate the path. Data is loaded as CSV from a remote source, with timestamps parsed as dates and temperatures converted to numbers before rendering.

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.line with d3.curveBasis to draw the smoothed line path. The SVG rendering includes a maroon line, gray gridlines, and labeled axes, with the title "A Week in San Francisco" at the top.

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models from the auto-mpg dataset. The D3.js code uses `scaleLinear` for both axes, with `axisBottom` and `axisLeft` for tick marks and gridlines. Data is loaded via `csv()` from a remote URL, and each vehicle is rendered as a circle with a fixed radius. Axis labels and a title are added as SVG text elements, with styling defined in CSS for the tick marks and label fonts.

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, sorted alphabetically along the vertical axis with bar lengths proportional to population values. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` to render the axes. Data is loaded from a CSV file via `d3.csv`, with population values converted from thousands to absolute numbers. The SVG rendering is structured with margins, and bars are drawn as `rect` elements filled with steelblue.

Making A Bar Chart

This example demonstrates the initial step of building a bar chart with D3 v5, showing empty SVG rectangles that are added to the page but not yet sized or positioned based on the data. The code loads population figures for ten countries from a CSV file using `d3.csv`, converts the population strings to numbers, and then appends `rect` elements to the SVG using data binding via `selectAll().data().enter()`. Each rectangle is currently assigned a fixed width and height of 500, and the chart is created with the SVG rendering approach and the `d3.select` API.