Zhengyan Yu

Scatter Plot w/ menus

This example shows a scatter plot of car horsepower versus weight, with a dropdown menu that lets users select among options A, B, and C, though the menu does not yet filter the data. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and gridlines, with SVG circles for data points colored red and semi-transparent. Data comes from a CSV of auto-mpg records loaded via `d3.csv`, and the menu is built with a custom `dropdownMenu` module that appends a select element.

Cheap Tricks for Interaction

This interactive globe displays world countries colored red, with a zoom and pan interface that transforms the map projection. The visualization merges country boundaries from the world-atlas TopoJSON dataset with demographic attributes joined from tabular TSV data, matching records by ISO country codes. Using d3.geoPath with the Natural Earth projection, the code renders SVG paths and enables hover tooltips showing country names via SVG `<title>` elements. The zoom interaction relies on d3.zoom's event system, updating the group's transform attribute. The globe's sphere is filled blue, while countries use a red fill with a distinct hover state.

Color and size legend

This example demonstrates a custom color legend for ordinal data, showing categories as colored circles with matching labels. The legend displays two fruit categories, apple and lemon, each assigned a distinct color via `d3.scaleOrdinal`. The visualization uses D3 v5 with an SVG rendering approach, where the `colorLegend` function appends circle and text elements to the SVG canvas. Labels are positioned below the circles, and all elements are centered vertically using the SVG height attribute. The code also includes transition handling for updating the legend dynamically.

Building a tree

A hierarchical tree visualization displays world geography from the global root down to individual countries through intermediate regional groupings. The layout uses d3.tree and d3.hierarchy to compute node positions from JSON data, while d3.linkHorizontal generates curved paths between parent and child nodes. Node labels are rendered as SVG text with font sizes scaled inverse to node depth. The visualization incorporates d3.zoom for pan-and-zoom interactions within an SVG container.

Let's make a map with D3.js!

This example creates an interactive map of the world using a Natural Earth projection and SVG rendering. It loads geographic data from the world-atlas TopoJSON and TSV datasets, then uses d3.geoPath and d3.geoNaturalEarth1 to draw country boundaries and fill them with white. Hovering over a country highlights it in light grey, and each country displays its name as a tooltip via a title element. The code also applies a light blue background to the page.

Temperature in San Francisco

This visualization displays a time series of temperature measurements in San Francisco, with an area chart showing temperature fluctuation over time. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` smoothing to create the filled path. The data comes from a CSV file which is loaded using D3's `csv` function and converted to proper date and numeric types. The chart includes labeled time and temperature axes with grid lines, plus a title.

Scatter plot

This scatter plot visualizes the relationship between engine cylinders and miles per gallon (mpg) for various automobile models, sourced from an auto-mpg CSV dataset. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, with circles rendered via SVG. The chart includes custom axis tick formatting (e.g., abbreviating large numbers) and styling through CSS, demonstrating how to adapt D3’s default axes for a polished presentation.

Customizing axes

This example displays a horizontal bar chart of the ten most populous countries, with population values scaled linearly and countries ordered by rank on a band scale. The visualization customizes both axes by removing their default domain lines and ticking, while formatting population ticks to abbreviate billions as “B” via d3.format. It also applies a tick size that extends grid lines across the chart. The code uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, d3.axisLeft, and d3.csv to load the population data, rendering SVG rectangles with steelblue fill.

Making a bar chart

A horizontal bar chart displays population figures for ten countries, with a steelblue bar for each nation. The example demonstrates a basic D3 data join, using `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with `axisLeft` and `axisBottom` to render the scales. Data loads from a CSV file via `d3.csv`, and the code converts population values to numeric form before rendering the SVG. The chart is built with D3 v5, using a simple selection to append rectangles.

Gist dcb164cb9576c8b20d291001b718c6f9

coordinated view

Force-Directed Graph

Force-Directed Graph

test

Force-Directed Graph

badge

Drawing a Scatterplot

Drawing a Scatterplot

Enter, Exit, Update

Normal distribution

Math.random()

sin circle