H

He Jianfeng

@hjfrun·27 public vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows population trends over time for world regions, with a vertical black line marking the currently selected year. Moving the mouse across the chart updates the selected year and repositions the line. The code uses D3 v6 with SVG rendering, employing `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft` for axes. Data comes from UN population estimates CSV files, melted into tidy format for visualization. The color legend is built with a custom `colorLegend` function using `scaleOrdinal` and `schemeCategory10`.

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple line paths drawn in a single SVG chart. The lines are grouped by region name and displayed with a categorical color scale, accompanied by a legend. Data comes from UN population estimates and medium variant projections, melted into tidy format with `d3.csv`. The chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisLeft`, `d3.axisBottom`, `d3.group`, and `d3.scaleOrdinal` to render axes, lines, and legends with SVG.

Loading thumbnail…

Line Chart with Multiple Lines

This example displays a week of temperature data for multiple cities using an SVG line chart with one line per city, colored via a categorical scale. The chart includes labeled axes, a title, and a color legend positioned to the right. It uses d3.scaleTime and d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, d3.line with curveBasis for smooth paths, and d3.group to organize data by city. The data originates from the Data Canvas "Sense Your City" dataset.

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 as proportional circles positioned at country centroids on a natural Earth projection map. Country boundaries are rendered as paths using d3.geoPath, while circle radii scale with population via d3.scaleSqrt. Two legends—a size legend and a color legend—communicate the quantitative mapping, with colors assigned through d3.scaleOrdinal. The map supports zooming through d3.zoom, and data comes from United Nations population estimates loaded as CSV and TopoJSON, processed with topojson.feature.

Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus at the top of the page allow the user to select which columns of the auto-mpg dataset to plot against each other on the x- and y-axes. The scatter plot uses SVG circles with a fixed radius, and the axes, labels, and gridlines are rendered using d3.axisBottom and d3.axisLeft. When a menu selection changes, the coordinates are recomputed via d3.scaleLinear with a .nice() domain, and the circles transition to their new positions over 1.5 seconds using d3's .transition().duration(1500) with a per-point delay, creating a cascading animation effect.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification, sourced from the World Atlas dataset and displayed using the Natural Earth projection. Clicking a color swatch in the legend filters the map, dimming all countries except those matching the selected category, while a highlighted stroke marks the active group. Built with D3 v6, it uses `d3.geoPath` for map geometry, `d3.scaleOrdinal` with the spectral scheme for color mapping, and `d3.zoom` for interactive panning and zooming. Hovering a country reveals its name and value via a tooltip.

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group, using a spectral color scale with a legend showing the categorical ranges. It renders country boundaries as SVG paths via the `d3.geoPath` and `d3.geoNaturalEarth1` projections, with a zoom interaction applied through `d3.zoom`. Data comes from the `world-atlas` TopoJSON and TSV files, processed with `topojson.feature` to merge attributes. Hovering highlights a country in red and displays its name and income group in a tooltip.

Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends: a color legend for ordinal categories (apple, lemon, lime, orange) and a size legend for a square-root scale mapping values 0–10 to circle radii. Both legends use SVG groups with tick marks, rendered via D3 v6’s `scaleOrdinal` and `scaleSqrt`, and are constructed through reusable functions that append circles and labels with dynamic positioning. The color legend assigns categorical colors, while the size legend computes tick values using `sizeScale.ticks`, filters out zero, and reverses the order. Styling is applied through CSS classes for text and circle strokes.

Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, with each leaf node labeled with its full country name. The tree layout uses an indented horizontal structure, with links drawn as smooth curves and text sized inversely to depth, so deeper nodes appear smaller. Built with D3 v6, the code employs `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to compute and render the layout as SVG paths and text elements. The chart also implements `d3.zoom` for pan and zoom interaction on the viewport.

Loading thumbnail…

Blank Canvas

This example presents a minimalist, full-screen blank canvas rendered as a rounded rectangle. The visualization simply sizes an SVG element to the browser window's dimensions and fills it with a single rounded rectangle, offering no data or interaction. The code uses D3 v6's `select` function to target the SVG element and its attribute chaining to set width, height, and corner radius. The rendering approach relies on the SVG `rect` element, with dimensions derived directly from the document body's client width and height.

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive pan and zoom on a world map, with countries highlighted in red on hover and tooltips displaying country names via SVG `<title>` elements. It uses a natural Earth projection (`geoNaturalEarth1`) and renders geographic features with `d3.geoPath`. The map loads world-atlas TopoJSON data and merges it with TSV country names, while the zoom behavior is implemented through `d3.zoom` applied to an SVG group.

Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered as an SVG using D3.js with a natural Earth projection. The map displays country boundaries in light green with subtle black strokes against a blue sphere background. It loads GeoJSON data from the world-atlas TopoJSON dataset and converts it using topojson.feature. The visualization demonstrates D3’s geoPath generator to project geographic coordinates, with selectable projection types commented in the code for experimentation.

Loading thumbnail…

Bowl of Fruit - Hover to Select

A data-driven fruit bowl shows five apples as colored circles, which shrink and disappear when eaten, and one apple transforms into a lemon. Hovering over any fruit selects it, adding a black stroke, and moving the mouse away removes the selection. The visualization uses D3 v6’s data join with `selection.merge` and transitions to animate radius changes over one second, while a scaleOrdinal maps fruit types to colors and sizes.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing apples and lemons enter, update, and exit with a smooth one-second transition, using a D3 ordinal scale for color and radius. Clicking a fruit selects it, adding a black stroke. The example demonstrates a data join with `selection.data`, keyed by `id`, and uses `transition().duration(1000)` for animation. Data mutations occur via `setTimeout`, replacing an apple with a lemon and removing fruits.

Loading thumbnail…

Bowl of Fruit - Nested

Five apples render as nested SVG circles in a row, their size and color mapped by `d3.scaleOrdinal` to fruit type. The code uses the `fruitBowl` module to draw circles and labels with `.enter()`, `.merge()`, and `.exit()` transitions. Timed actions mutate the `fruits` array, removing one apple, replacing another with a lemon, and filtering out a third, demonstrating incremental updates to the DOM.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3.js, showing how a set of circles is incrementally modified in response to changing data. It begins with five apples and then over time removes an apple, changes the third fruit into a lemon, and removes another apple. The code uses the `d3.select`, `d3.range`, and `scaleOrdinal` APIs to set up color and radius scales, while `selection.transition().duration(1000)` animates the `cx` and `r` attributes for entering, updating, and exiting circles. The visualization is rendered as SVG with D3 v6.

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth from 1960 to 2015, using a filled path to show population values over time. The visualization employs D3.js v6 with SVG rendering, using `scaleTime` and `scaleLinear` for axes, the `area` generator with `curveBasis` for smoothing, and `axisBottom`/`axisLeft` for labels. Data comes from a CSV file loaded via `d3.csv`, with population values formatted in billions for the y-axis.

Loading thumbnail…

Temperature in San Franciso Area Chart

This area chart visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart displays a smooth, filled area beneath the temperature curve, using d3.area with a curveBasis interpolation. The code loads CSV data from a VizHub-hosted dataset, parses timestamps and numeric temperatures, and renders axes with gridlines using d3.axisBottom and d3.axisLeft. The plot is drawn as an SVG with scaled circles omitted, while axis labels and a title are added as text elements.

Loading thumbnail…

Temperature in San Franciso Line Chart

A line chart depicts a week of temperature readings in San Francisco, using time on the x-axis and temperature on the y-axis. Rendered as an SVG, the chart includes circular data points, a smoothed maroon line, labeled axes, and a title. The code relies on D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to construct the visualization. Data is loaded from an external CSV file containing timestamp and temperature values.

Loading thumbnail…

Temperature in San Franciso Scatter Plot

This scatter plot visualizes a week of temperature and time data in San Francisco, with orange circles marking each hourly reading. The time and temperature axes use D3’s `scaleTime` and `scaleLinear`, with gridlines drawn by `axisBottom` and `axisLeft`. The chart reads from a CSV file, parses timestamps and numeric temperatures, and renders the result as SVG circles. Axis labels and a title are appended via D3 selections, while CSS styles the text and tick marks.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for individual car models from the auto-mpg dataset. Red semi-transparent circles represent each car, with axes labeled accordingly. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the chart. The data is loaded via `csv` from the auto-mpg dataset and parsed into numeric values before being plotted.

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with each circle’s horizontal position scaled by population and vertical position by country name. Built with D3 v6, it uses `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisBottom`/`axisLeft` for ticks. The SVG circles are colored steelblue, with an axis label and title. Data comes from a CSV file, with population values multiplied by 1,000.

Loading thumbnail…

Making a Bar Chart v2

A horizontal bar chart displays the population of the top ten most populous countries, using a dataset loaded from a local CSV file. The chart uses D3 v6 with `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for tick marks. An `axis-label` and title are added as SVG text, while the x-axis tick format converts numbers to abbreviated units (e.g., "B" for billions). The rendering is entirely SVG-based with a styled stylesheet.

Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for the ten most populous countries, with horizontal bars ordered by country name. The visualization uses a D3 v6 data join to bind CSV data to SVG rectangles, scaling population values with `scaleLinear` and country names with `scaleBand`. Axes are generated using `axisLeft` and `axisBottom`, while the `csv` function loads the dataset and converts population values to absolute numbers before rendering.

Loading thumbnail…

Let's make a face with D3.js

This example draws a stylized yellow face in SVG using D3.js, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows animate upward and back down via chained `transition().duration()` calls on a group element. All shapes are positioned relative to a centered `<g>` container, using D3 selections and the `arc()` generator from the d3-shape module to construct the mouth.

Loading thumbnail…

Hello D3

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how to compose geometric primitives within nested groups, applying transforms like `scale()` and `translate()`, and using both CSS rules and presentation attributes for fill, stroke, and stroke-width. The visualization uses HTML5 `<svg>` elements directly in the markup, with JavaScript and CSS linked externally, and does not include any data or interactive behavior.

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the text “hello svg” above an empty SVG canvas. The code uses D3 v5 loaded from a CDN, along with basic CSS styling and SVG elements. It demonstrates the simplest possible setup for a data visualization with React and D3, serving as a starting point for more complex projects. The SVG element is sized at 800 by 640 pixels, providing space for future visual content.