Di Zhen

Tricks for interaction

This example demonstrates a world map with interactive hover effects, where each country changes color to red and displays its properties in the console. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders countries as SVG paths using `d3.geoPath`. Geographic data comes from the world-atlas TopoJSON file, processed with `topojson.feature`. The CSS `:hover` pseudo-class triggers the color change, while D3's `append('title')` logs country data to the console. The map includes a styled sphere background with a blue fill.

Jun 23, 2019

Bowl of Fruit - hover to select

Five SVG circles enter the scene as red apples, then sequence through timed updates: an apple disappears, another turns into a yellow lemon, and a third is removed. Hovering over any fruit selects it with a black outline, using mouseover and mouseout events to toggle the selection state. Fruit positions and radii come from ordinal scales mapping fruit type to color and size, while entering and exiting circles animate through chained transitions that adjust radius over one second. The visualization uses D3 v5 with data joins keyed by unique id.

Jun 22, 2019

Bowl of Fruit - click to select

Five circles render a bowl of fruit where apples and lemons appear as red and yellow circles of different sizes. Clicking a fruit selects it and highlights it with a black stroke. The visualization animates circle radius, position, and color transitions over one second using D3's transition system. Data updates through timed scripted events that remove fruits or change an apple into a lemon in real time.

Jun 22, 2019

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for handling special cases in data visualization. It shows a bowl of fruit where apples are added, removed, and replaced with lemons over time, using transitions that respond to changes in the underlying data array. The visualization uses D3 version 5 with SVG rendering, employing `scaleOrdinal` for both color and radius scales, and the `selectAll`/`enter`/`merge`/`exit` pattern to manage group elements. The code uses `setTimeout` to trigger sequential data modifications, then re-renders the scene to reflect each change.

Jun 22, 2019

Just replace an apple with a lemon (apply 'merge')

Five apples render as pink circles, then one apple is removed and a different apple changes to a yellow lemon. Built with D3 v5, the `fruitBowl` component uses `selection.selectAll` and the `.merge()` method to apply shared `fill` and `r` attributes from ordinal color and radius scales to both new and existing circles.

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, showing how temperatures fluctuate over time. The visualization uses D3 v5 to render an SVG with a time-scaled x-axis and linear y-axis, with a smooth curve produced by `curveBasis`. The data is loaded via `csv()` from a Data Canvas dataset, and features axis labels, tick marks, and a title. The chart's maroon line path and styled text elements are defined in a separate CSS file.

Just replace an apple with a lemon (apply 'merge')

Five apples in a row are displayed as pink circles on an SVG canvas. One second later the last apple disappears, and after another second the third apple turns yellow, demonstrating a data merge. The example uses the d3 v5 `select` and `range` functions to manage the fruit array and the `merge` method to smoothly apply the color and radius changes to existing circles.

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, measured in degrees Celsius, with time on the horizontal axis and temperature on the vertical axis. The visualization uses D3 v5, specifically employing `scaleTime` and `scaleLinear` for axes, a spline-smoothed `line` generator with `curveBasis`, and SVG rendering for the plot. Data is loaded from a CSV file hosted online, and the chart includes customized axis ticks, labels, and a maroon styled line path.

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings over time in San Francisco, with each orange circle representing a data point plotted along chronological and temperature axes. The visualization uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft to render labeled axes. The SVG rendering includes grid lines, axis labels, and a title, with circles styled with partial opacity to reveal overlapping points.

Scatter plot of cars

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for 398 car models from the UCI Auto MPG dataset. Each semi-transparent blue circle represents a car, allowing overlapping points to reveal density patterns. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks with gridlines, and `extent` to compute domains. Axis labels and a title are added as SVG text elements.

adding axis labels and making tick grid lines

This example displays a horizontal bar chart of the top 10 most populous countries, using data from a local CSV file. It shows population values for each nation, with clear axis labels and grid lines enhancing readability. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom to generate axes. Custom tick formatting converts large numbers to abbreviated units, while grid lines are created by setting a negative tick size on the x-axis. SVG rectangles render the bars.

Auto MPG Summary

This example loads the Auto MPG dataset from UCI Machine Learning Repository and displays a summary of its contents in the terminal-styled interface. It shows the total row count, column count, approximate file size in kilobytes, and the first 10 rows as formatted JSON. The code uses d3.csv to fetch the data and d3.csvFormat to compute its size, then renders text via d3.select and DOM element appends. The black background with green monospace text evokes a classic console aesthetic.

Let's make a face with D3.js!

This visualization uses D3.js v5 to draw a simple cartoon face directly onto an SVG canvas. It constructs the face from basic geometric shapes: a large yellow circle for the head, two smaller circles for the eyes, and a mouth created with a D3 arc generator. The code reads the SVG’s width and height attributes to center the face, and it uses chained methods to set each shape’s position, fill, and stroke properties.

Load D3.js and some basic use

This example demonstrates how to load D3.js v5 into a webpage and perform basic DOM selection and styling. The page includes an empty SVG element and uses d3.select to target it, then applies a red background color via the style method. The code also logs the d3 object to the browser console. The rendering is SVG-based, with data sourced from the unpkg CDN. The example focuses solely on library setup and minimal manipulation rather than data-driven visualization.

Hello VizHub

This example demonstrates a minimal single-page visualization that displays the make of the first car from a hard-coded dataset. The code imports car records stored as a JSON string in `cars.js`, parses them with `JSON.parse`, and accesses a specific property to render text. It uses plain DOM manipulation via `document.getElementById` to update the content of a `<pre>` element in the `index.html` file. The visualization shows how static data from an external module can be directly injected into a webpage without any rendering libraries.

Cars Report

This example shows a text-based report of used cars, filtering the dataset to display only vehicles priced under $2,000. The cars are loaded from a static JSON array and formatted into readable lines using the `formatCar` function. The report generation relies on the `generateReport` function, which uses `Array.filter` and `Array.map` to process the data, then joins the results with `Array.join`. The final text is injected into the DOM via `document.getElementById` and rendered in a `<pre>` element.