X

X. N. Chu

@xnchu·19 public vizzes

Loading thumbnail…

World Countries Tree

This example displays the hierarchical structure of world countries organized by continent and subregion, with all leaf nodes representing individual nations. The visualization uses a tree layout to position nodes and renders connecting links as horizontal paths, with the entire hierarchy branching from a central root labeled “World.” The code loads data from a JSON file using `d3.json`, applies the `d3.tree` layout to compute positions, and draws SVG path elements with `d3.linkHorizontal` for the edges. The resulting diagram, rendered through D3 v5, fills the browser viewport.

Loading thumbnail…

Blank Canvas

A blank rectangular canvas fills the browser viewport, rendered as a single rounded rectangle. The visualization demonstrates the foundational step of setting up an SVG drawing surface with D3 v5. The code uses `d3.select` to access the SVG element and sets its width and height attributes based on the document body’s dimensions. A `rect` element is appended and styled with `rx` for rounded corners, creating an empty, minimal display with no additional data or interactive elements.

Loading thumbnail…

Let's make a map and interact with Hover!

This example shows a world map with countries rendered as light green shapes on a blue sphere, with hover interactions highlighting each country in red. Using D3 v5 and topojson, the map projects geographic data with a `geoEqualEarth` projection and `geoPath` to draw the sphere and country boundaries. Country names come from a TSV file matched to the GeoJSON features. The code also enables pan and zoom through D3's `zoom` and `event.transform` APIs.

Loading thumbnail…

Let's make a map!

This example demonstrates a world map using an equal-earth projection, with countries rendered as light green regions and the spherical globe shown in blue. It fetches geographic data from the world-atlas package and visualizes it by applying the `geoPath` and `geoEqualEarth` functions from d3. The code uses topojson’s `feature` API to convert the TopoJSON data into GeoJSON features. Each country is drawn as an SVG path, with stroke opacity set to 0.1 for country boundaries. The entire map updates dynamically once the data is fetched and processed, displaying the complete set of countries in a single view.

Loading thumbnail…

Bowl of Fruit-Hover to Select

A bowl of fruit made of SVG circles animates in and out, changing color and size. Hovering selects a fruit, outlining it in black. The example demonstrates DOM manipulation with D3.js v5, using `scaleOrdinal` for color and radius, `selection.selectAll`, and `.transition().duration()` for animated enter, update, and exit states. Fruits are generated from a range, removed, and mutated over time.

Loading thumbnail…

Bowl of Fruit-Click to Select

A bowl of fruit demonstrates interactive selection and animated updates in D3.js v5. Clicking a circle highlights it with a black stroke and updates a selectedFruit variable, triggering a re-render. The fruitBowl function uses data joins with enter, merge, and exit selections, applying transitions on circle radii and positions. Ordinal scales map fruit types to colors and sizes, while setTimeout calls animate changes like removing apples, replacing one with a lemon, and filtering the data.

Loading thumbnail…

Bowl of Fruit-Click to Select

A bowl of fruit rendered as SVG circles uses D3 v5 to encode fruit type through color and size: apples appear red and large, lemons yellow and small. The scatterplot-like display animates through timed state changes, removing an apple, converting another to a lemon, and filtering a third. The example demonstrates incremental updates with `selection.enter`, `merge`, and `exit` methods, while ordinal color and radius scales map categorical data to visual channels.

Loading thumbnail…

Bowl of Fruit-General Update Pattern

This example demonstrates the general update pattern in D3.js using a bowl of fruit. The visualization initially shows five apples as colored circles inside a bowl shape, which then change over time as fruit is removed or replaced with lemons. The code uses `selection.enter()`, `selection.merge()`, and `selection.exit()` to handle data joins, along with `scaleOrdinal` for color and radius mappings. The SVG rendering includes circles and text elements, with updates triggered by setTimeout events that modify the underlying data array.

Loading thumbnail…

Bowl of Fruit-General Update Pattern

This example demonstrates the general update pattern for data joins in D3.js: a bowl of fruit rendered as circles where apples are red and large, lemons are yellow and small. Using `selection.data()` with a key function, entering circles start at radius zero while exiting circles shrink away, and merging circles update their fill and position. The visualization uses `d3.scaleOrdinal` for color and radius mappings, with `transition().duration()` for smooth animations as the fruit array is manipulated through timed `setTimeout` events.

Loading thumbnail…

World Population Area Chart

This area chart displays global population growth over time, with the x-axis representing years and the y-axis representing population counts. The visualization uses an SVG rendering with the D3 library, employing `scaleTime` for the temporal axis and `scaleLinear` for the population values. The area beneath the line is filled in maroon, while grid lines and axis labels are styled via CSS. Data is loaded from a CSV file containing world population figures by year, and the chart includes a title and labeled axes.

Loading thumbnail…

Temperature in San Francisco Line Plot

This visualization presents temperature readings over time in San Francisco as a filled area chart. The plot uses a time-scaled x-axis for chronological data and a linear y-axis for temperature values, with a smooth curve generated via D3’s `d3.area()` and `curveBasis`. The SVG rendering applies axis labels and a title, while the dataset is loaded as CSV from a remote repository. The code relies on D3 v5 modules including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`.

Loading thumbnail…

Temperature in San Francisco Line Plot

This line plot visualizes temperature in San Francisco over time, using a black path to show raw data and a red curve to show a smoothed version via `d3.line` with `curveBasis`. The visualization loads CSV data from a VizHub URL, parses timestamps and numeric temperatures, and renders axes with `d3.axisBottom` and `d3.axisLeft`, using `d3.scaleTime` and `d3.scaleLinear` for scaling, with SVG output.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over time, with each circle representing a temperature observation at a specific timestamp. The chart uses D3 v5’s scaleTime and scaleLinear functions to map the data, with axisBottom and axisLeft generating the labeled axes. Data is loaded from a CSV file using d3.csv and rendered as SVG circles with a fixed radius, while the styling applies a semi-transparent steelblue fill. The visualization includes axis labels and a title, with grid lines drawn via tickSize.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes the relationship between car acceleration and weight, with each circle representing a vehicle from the auto-mpg dataset. The visualization uses D3 v5’s `scaleLinear` for both axes, `axisLeft` and `axisBottom` for gridlines and tick labels, and SVG circles with a fixed radius for data points. The code loads the CSV data from an external URL, parses numeric fields, and renders the chart within an SVG element, featuring axis labels and a title.

Loading thumbnail…

Car Acceleration versus Weight Scatter Plot.

This scatter plot visualizes the relationship between car weight and acceleration, with each circle representing a vehicle from the auto-mpg dataset. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to map the data points onto an SVG canvas. The plot includes labeled axes and a title, with circles rendered at a fixed radius using the `selectAll` and `enter` pattern. The data is loaded asynchronously via the `csv` function and parsed into numeric values for weight and acceleration.

Loading thumbnail…

Scatter plot

This scatter plot displays the population of the ten most populous countries, with each circle’s horizontal position and vertical alignment corresponding to population size and country name. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map data, with `axisBottom` and `axisLeft` for axes. Population values are preprocessed by multiplying the CSV data by 1,000 before rendering in SVG. The chart includes a formatted x-axis and labeled title.

Loading thumbnail…

Blank Canvas

A blank SVG canvas displays only a single purple rectangle with rounded corners. The example uses D3 v5's `select` and `append` methods to draw the shape, reading the SVG's width and height attributes as numeric values. The page's background is set to a solid magenta color via CSS, with the body fixed to prevent scrolling. The code logs the browser's client dimensions to the console, which are not otherwise used in the visualization.

Loading thumbnail…

Making a bar chart. Customizing the axis.

This example shows a horizontal bar chart ranking the ten most populous countries, with each bar’s length representing population in thousands and a customized bottom axis displaying abbreviated tick labels (e.g., “1B” for billions). The chart uses d3.csv to load the data, then applies scaleLinear and scaleBand for positioning, while axisBottom and axisLeft generate the axes. Grid lines are drawn via tickSize(-innerheight), and the axis labels and title are manually added as SVG text elements. The y-axis ticks are stripped of their default lines and domain for a cleaner look.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a simple D3.js visualization that creates a face shape using basic SVG circle elements. The code imports the `select` function from D3 v5 and appends a circle to an existing SVG, setting its radius and positioning it based on the SVG’s width and height attributes. The rendering relies on SVG within a React framework, with the circle’s center calculated relative to the fixed 960×500 viewport. No interactive or animated behavior is included beyond the static circle placement.