Z-Richard

Covid-19 Choropleth Map of China

A choropleth map of China displays cumulative confirmed COVID-19 cases per city as of June 21, 2020, with a logarithmic orange color scale and gray for missing data. The map uses `d3.geoMercator` projection and `d3.geoPath` to render city boundaries from a TopoJSON basemap, while case counts come from a CSV joined to city names. Colors are assigned via `d3.scaleLog` with `interpolateOranges`, and a legend is rendered with the d3-legend library. Data is sourced from the China Data Lab COVID-19 daily cases dataset.

Jun 28, 2020

Choropleth Map w/ Interactive Filtering

This choropleth map colors world countries by economic classification using an ordinal color scale and a natural Earth projection. Users click legend entries to filter the map, dimming non-selected countries and highlighting the chosen category. The visualization uses d3.geoPath for geographic rendering, d3.zoom for panning, and a d3.scaleOrdinal with a spectral scheme. Country boundaries and metadata come from the World Atlas TopoJSON and TSV datasets, with interactive legend filters implemented in SVG.

Jun 27, 2020

China City Basemap

This example displays a basemap of China’s cities and provinces as a static SVG map, rendered using the D3.js library (v5) and its `geoMercator` projection, `geoPath`, and `select` APIs. It loads TopoJSON data from a GitHub gist, converts it to GeoJSON features via the `topojson` package’s `feature` function, and draws each region as a path with an SVG fill. The map’s projection is centered on China with a specific scale, and the country outlines are styled with a green fill and semi-transparent black stroke.

Jun 25, 2020

Let's make a map with d3.js

This example renders a world map in a natural Earth projection using the d3.js library. It displays continents in green against a blue spherical backdrop, with country boundaries outlined in black. The visualization fetches GeoJSON data from the world-atlas package, converts it using the topojson `feature` function, and projects it onto an SVG canvas with `d3.geoPath` and `d3.geoNaturalEarth1`. The map is styled via CSS classes for the sphere and individual countries.

Jun 25, 2020

Selecting a Year on a Line Chart

This example shows population trends for world regions from 1950 to 2100 as multiple colored line paths. A black vertical line marks the currently selected year, which updates as the user moves the mouse across the chart. The visualization uses d3.nest, d3.scaleTime, d3.scaleLinear, and d3.line with curveBasis to render the SVG paths, while a custom color legend sorts regions by their final population. Data comes from two UN population estimate CSV files merged in loadAndProcessData.

Jun 23, 2020

Melting Data with Multiple Lines

This visualization displays global population trends from 1950 to 2100 as multiple colored lines, one per region, using a title, axes, and a color legend. Built with d3.v5, it uses `d3.nest` to group data, `d3.line` with `curveBasis` for smooth paths, and `scaleTime`/`scaleLinear` for axes. Data comes from UN population estimates and medium-variant projections, processed by a custom `melt` function, and rendered as SVG.

Jun 22, 2020

Line Chart with Multiple Lines

This example displays a week of temperature readings for multiple cities, with each city represented by a colored line that conveys its temperature trend over time. A legend identifies the color associated with each city. The visualization uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group the CSV data by city. d3.scaleOrdinal with schemeCategory10 assigns colors, while custom legend and axis components are built using SVG.

Jun 22, 2020

Circles on a map

This visualization displays a natural Earth projection map with circles overlaid on each country, sized proportionally to its 2018 population and colored by data availability. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while d3.scaleSqrt and d3.geoCentroid position the circles. Population data is loaded from a UN CSV file, merged with TopoJSON world geometry via topojson.feature, and filtered for valid values. Zooming is enabled through d3.zoom, and a size legend with formatted tick labels explains the circle scale. Countries missing data appear in red, and hover tooltips display the region and exact population.

Jun 22, 2020

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric columns from the automotive dataset. Two dropdown menus, built with a custom `dropdownMenu` function, independently select the variables for the x and y axes, triggering a re-render of the chart. The core visualization is rendered in SVG, using D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the coordinate system and gridlines. Each data point animates from the center to its target position using `transition().duration(1000)`, creating a smooth visual update when menu selections change.

Jun 21, 2020

Choropleth Graph

A choropleth map of world countries, colored by economic classification using an ordinal color scale from `d3.scaleOrdinal` and `schemeSpectral`. Hovering highlights a country and reveals a tooltip with its name and economy type. The map uses `d3.geoNaturalEarth1` projection and `d3.geoPath` for rendering, with zoom support via `d3.zoom`. Data comes from World Atlas TopoJSON and TSV files; a custom color legend shows the ordinal categories.

Jun 19, 2020

Color and Size Legends

Two reusable D3 v5 legend components render categorical and quantitative scales side by side in SVG. A color legend uses `scaleOrdinal` to map fruit names to colored circles, while a size legend uses `scaleSqrt` with `ticks` to display varying radii for a numeric domain. Both components handle enter, update, and exit selections via `selection.data`, `merge`, and exit removal, positioning circles and labels with spacing and text offsets.

Jun 18, 2020

World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, using a tree layout in SVG. The root node is "World," with branches for each continent and further subdivisions down to individual countries. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` to compute the layout and draw curved links, with zooming enabled via `d3.zoom`. Text labels are positioned per node, with font size decreasing by depth, and the data is loaded from `data.json` using `d3.json`.

Jun 17, 2020

Blank Canvas

A blank, rounded-corner rectangle fills the viewport, rendered as an SVG element sized to match the browser window. The visualization uses D3 v5’s `select` and `arc` methods to construct a single `rect` element with no data binding or interactive behavior. The page loads D3 from a CDN, with the SVG styled via CSS to eliminate margins and prevent scrolling. This minimal example demonstrates a static canvas-like backdrop, relying solely on the `attr` method to set width, height, and corner radius of the shape.

Jun 17, 2020

Cheap tricks for interactions

This example shows an interactive world map with country boundaries, rendered using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. Users can zoom and pan the map with the mouse, as the code applies `d3.zoom` to the SVG container and updates a group’s `transform` attribute on each zoom event. Country names appear as tooltips when hovering, populated from a TSV file that maps ISO numeric codes to names, while the underlying geometry comes from a TopoJSON file loaded via `topojson.feature`. The map uses filled paths with hover color changes defined in CSS.

Jun 17, 2020

Bowl of Fruit - Hover to Select

Five fruit circles sit in a row, animating in and out as apples are removed, replaced by a lemon, and filtered from the bowl. Hovering over any fruit highlights it with a black stroke and clears the selection on mouseout. The code uses D3 v5’s data join, `transition().duration(1000)` for smooth radius and position changes, `scaleOrdinal` for color and size, and SVG circles with mouseover/mouseout event handlers.

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, starting as apples that shrink away, change to lemons, and are removed. Clicking any fruit selects it, highlighting it with a black outline. Updates use D3 v5 data joins with `enter`, `merge`, and `exit`, relying on ordinal scales for color and radius. All position and size changes animate over one second via `transition().duration(1000)`.

General Update Pattern with Group Element & Transition

A group-wrapped data join animates a fruit bowl as apples are removed, replaced by lemons, and repositioned. The code uses d3’s enter, update, and exit selections to manage SVG circles and text within each group, transitioning transforms and radii over one-second durations. A color scale assigns red to apples and yellow to lemons, while a separate radius scale differentiates fruit sizes. The update pattern demonstrates smooth merging of enter and update selections via `selection.merge` and coordinated exit transitions that shrink circles before removal.

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern with a bowl of fruit rendered as SVG circles. Apples and lemons are distinguished by color and radius using `scaleOrdinal`, while animated transitions adjust circle positions and sizes over one second. The code explicitly manages enter, update, and exit selections, shrinking removed fruit to zero radius via `transition.attr('r', 0)` and `.remove()`. Data mutations—deleting an apple, changing one to a lemon, and filtering another—occur at timed intervals, showing how the visualization responds to changing data through D3 v5's data join.

World Population Area Chart

This visualization shows global population growth over time, with an area chart depicting the change in population values across years. The chart uses a maroon filled area with a curved basis line, axis labels, and tick marks, all rendered as SVG by D3 v5. The code creates the area using the `d3.area` generator, which takes the time-scaled x-values and linear-scaled y-values, and it applies the axis functions from `d3.axisLeft` and `d3.axisBottom`. The population data is loaded from a CSV file and formatted with a shortened scale that converts gigabytes to billions, showcasing the trend clearly.

Area Chart

This area chart displays a week of temperature data for San Francisco, with time on the x-axis and temperature on the y-axis, using a smoothed, filled path to convey the trend. The visualization, built with D3 v5 and rendered as SVG, applies a basis curve to the area generator for a fluid line and fills the shape in maroon with transparency. A CSV file provides the data, loaded asynchronously, while axis tick marks extend across the plot for grid-like reference, and both axes are labeled. The title appears at the top, with styling handled via an external stylesheet.

Line Chart

This line chart displays the temperature in San Francisco over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization uses the D3 v5 library to create a smooth, curved line through the data points, which are not individually marked. It loads data from a CSV file and renders the chart as an SVG, with styled axes, gridlines, and a title. The code employs D3 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the smoothed path.

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each circle representing a vehicle. The data is loaded from a CSV file containing automotive specifications (auto-mpg dataset) and rendered as an SVG graphic using D3 v5. The code employs `d3.scaleLinear` for both axes, `d3.extent` to compute data domains, and `d3.axisBottom` and `d3.axisLeft` for axis generation with grid lines. Semi-transparent steel-blue circles highlight data density, while axis labels and a title provide context.

Now the bar chart looks nicer.

A bar chart displays population estimates for ten countries using horizontal bars, sorted from largest to smallest. Built with D3 v5, the visualization uses `d3.csv` to load the data and `scaleLinear` and `scaleBand` for positioning. The SVG renders axis ticks via `axisLeft` and `axisBottom`, with the x-axis formatted to abbreviate numbers, and removes chart gridlines and labels for a cleaner appearance.

Let's make a bar chart!

This bar chart displays the populations of ten countries, with horizontal bars ordered by country name and scaled by population count. The visualization uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file and render SVG rectangles. The chart applies margins, a band scale for categories, and a linear scale for population values, with axes labeled and bars styled in steelblue.

Jun 13, 2020