C

cathykan

@cathykan·21 public vizzes

Loading thumbnail…

Color and Size Legends

A static SVG legend demonstrates categorical color mapping and fixed circle sizing using D3 v5 and React. The `colorLegend` function renders colored circles for fruit categories (`apple`, `lemon`, `lime`, `orange`) via `scaleOrdinal`, with text labels positioned by `textOffset`. The code uses D3 selections (`selectAll`, `enter`, `merge`, `exit`) to bind data, setting circle fills from the color scale and spacing items vertically. The legend appears at a translated SVG coordinate, with font size and anchor attributes applied to text elements.

Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continent and subregion, as a radial-style tree diagram. It renders the data as a horizontally oriented tree using SVG paths and text labels, with node positions computed by the `tree()` layout and `hierarchy()` functions from D3 v5. The visualization supports pan and zoom interactions through the `zoom()` behavior. Text labels display country names with font size decreasing by depth, and the data is loaded from a local JSON file.

Loading thumbnail…

Let's make a map!

This interactive map displays world countries as green SVG paths on a blue sphere, with hover tooltips revealing country names. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON world-atlas data, while country names are joined via TSV data using ISO numeric codes. Users can pan and zoom the map through D3’s `zoom` behavior, which applies a transform to the map group. The code loads both TopoJSON and TSV files asynchronously with `Promise.all`.

Loading thumbnail…

Let's make a map!

This example shows a world map rendered with countries filled in light green and a blue sphere representing the Earth’s surface, all within an SVG. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The code appends a sphere path and country paths, relying on the `json` function to load the TopoJSON data asynchronously.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruits render as colored circles in an SVG, with apples and lemons distinguished by size and color. Clicking a circle records its selection and triggers a re-render. The visualization demonstrates data joins and transitions using d3.selectAll, data binding, and transition methods, with fruits added, removed, and type-changed over timed intervals. The d3.scaleOrdinal maps fruit types to radii and colors, while React manages the click handler and state updates.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing how to handle data changes smoothly. A bowl of fruit is rendered as SVG circles with text labels, using a React-based structure with D3 v5. The code uses `selectAll` and data joins—through `enter()`, `merge()`, and `exit()`—to update the visualization as fruits are removed or their types change. Fruit types are mapped to colors and radii via `scaleOrdinal`, and the bowl shape is drawn as a rounded rectangle with `rx` attributes.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for animated data visualizations with SVG. It shows a row of fruits—apples and lemons—that change over time as items are added, removed, or modified, with each fruit’s size and color derived from its type. The code uses D3 v5’s `scaleOrdinal` for color and radius mappings, and employs the `selection.merge()` and `selection.exit()` APIs to handle enter, update, and exit states dynamically. The React framework orchestrates timed updates to the fruit array, triggering re-renders that morph the visualization.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for data joins, showing how fruits enter, update, and exit as the dataset changes over time. A bowl of apples and lemons is rendered as color-coded circles with differing radii, and users see animations as apples are eaten or replaced. The code uses D3 v5’s `selectAll` with key functions, `.enter()`, `.merge()`, and `.exit()` to manage transitions, along with `scaleOrdinal` for color and size. The SVG is drawn in React and animated via `.transition().duration(1000)`, updating circle positions and radii.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern to illustrate three types of changes to a dataset: removal, modification, and addition. Five apples are initially rendered as circles, then one apple is removed, and a remaining apple transforms into a lemon after a timeout. The D3.js v5 API is used with the `select` method to manage the SVG, while the `scaleOrdinal` from the `d3` module defines color and radius mappings. The React starter framework is visible, though the rendering is done directly to an SVG element.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time, showing the population values by year with a smooth, curved line and filled area beneath it. The chart uses D3 v5 to load CSV data, parse dates and numeric population values, and render SVG shapes. The x-axis uses `scaleTime` for the year values, while the y-axis uses `scaleLinear` and a custom tick formatter that converts large numbers to abbreviated labels like "B" for billions. The area generator employs `curveBasis` for a smoothed path.

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays a week of temperature data in San Francisco, using time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file hosted on VizHub. The visualization is rendered as an SVG using D3 v5, employing the `area` function with a basis curve to create a smooth filled region, with axes generated by `axisBottom` and `axisLeft`. The chart is styled with a maroon fill and stroke, and includes axis labels and a title.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature and time data in San Francisco. It displays the data as a smooth, maroon line chart created using D3.js v5. The chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes, and a `d3.line` generator with `curveBasis` to draw the path. Data is loaded via `d3.csv` from a VizHub dataset.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

A scatter plot shows a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents a temperature observation, colored steelblue. The visualization uses D3 v5 to load CSV data, create scales with `scaleTime` and `scaleLinear`, and render axes with `axisBottom` and `axisLeft`. The SVG rendering approach draws circles directly, with dimensions set from the viewport. The data comes from a CSV file hosted on VizHub, with timestamps parsed as dates and temperatures as numbers.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the auto mpg data set, with each red, semi-transparent circle representing a vehicle. The d3.v5 code uses `d3.csv` to load the data, `d3.scaleLinear` with `d3.extent` to map values, and `d3.axisBottom` and `d3.axisLeft` for the labeled axes. SVG circles are appended via a data join, with axis labels and a title rendered as text elements.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each country positioned along the y-axis and its population scaled along the x-axis. The visualization uses React with D3 v5, employing `scaleLinear` for the x-axis, `scalePoint` for the categorical y-axis, and `axisBottom` with a custom tick formatter that abbreviates numbers. Data is loaded from a CSV file using `d3.csv`, and the points are rendered as SVG circles with a steelblue fill.

Loading thumbnail…

Bar Chart Review

This example shows a horizontal bar chart ranking the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The code uses React with D3 v5, loading data from a CSV file via `d3.csv` and rendering SVG elements. It employs `d3.scaleLinear` and `d3.scaleBand` for positioning, `d3.axisLeft` and `d3.axisBottom` for axes, and custom tick formatting with `d3.format` to abbreviate large numbers (e.g., converting billions to "B"). The bars are drawn via a data join, with a title and axis label added as text elements.

Loading thumbnail…

Custmizing Axes!

This example shows a horizontal bar chart of the top 10 most populous countries, with country names on the y-axis and population on the x-axis. It customizes axes by removing domain lines and tick lines from the left axis, removing the bottom axis domain, and adding a formatted tick label that abbreviates numbers with d3.format(). The chart is rendered as SVG in a React framework using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with data loaded from a CSV file.

Loading thumbnail…

Custmizing Axes!

This example displays a horizontal bar chart ranking the populations of ten countries, with custom axes and tick formatting. Population values are shortened using a `format` function that replaces 'G' with 'B'. The chart uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the visualization, with SVG rendering defined in `styles.css`. Data is loaded from `data.csv` via `d3.csv` and multiplied by 1000 to reflect actual population numbers.

Loading thumbnail…

Making a Bar Chart!

This example shows a horizontal bar chart comparing the populations of ten countries, from China to Mexico, using data loaded from a local CSV file. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders bars as SVG `<rect>` elements. Axis generators `axisLeft` and `axisBottom` label each country and population value, while the chart’s margins are handled manually via a translated `<g>` group. All drawing occurs in an SVG container sized 960 by 500 pixels.

Loading thumbnail…

Let's make a face with D3.js!

This interactive example uses D3.js v5 to draw a cartoon face from basic SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth constructed with an arc path. The code builds the face by appending circle, rect, and path elements inside SVG groups, then animates the eyebrows through a sequence of `transition().duration(2000)` calls that shift their position horizontally and vertically. The rendering relies on D3’s `select`, `append`, and `arc` APIs, with all elements centered via a group transform. The animation cycles through multiple eyebrow movements, demonostrating how D3 transitions can orchestrate timed attribute changes.

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with a smiling mouth and two eyes forms a cartoon face, rendered as an animated SVG. The code builds the face using D3.js v5 selections, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows moving in a sequence of positions. The face is centered within a 960×500 SVG canvas, with circles, rectangles, and a path grouped together.