C

cpsshan

@cpsshan·33 public vizzes

Loading thumbnail…

Choropleth Map with Interactive Practice

This visualization presents a world choropleth map coloring countries by economic classification using a spectral color scale, with an interactive legend that filters highlighted countries on click. Built with D3 v5, it employs `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and `d3.zoom` for panning and zooming. Country data comes from the World Atlas TopoJSON and TSV files, while the legend uses `d3.scaleOrdinal` and `d3.schemeSpectral`. Hovering over a country turns it red, and the legend’s clickable ticks dim non-selected categories.

Loading thumbnail…

Choropleth Map with Interactive Practice

This visualization presents a world choropleth map coloring countries by economic classification using a spectral color scale, with an interactive legend that filters highlighted countries on click. Built with D3 v5, it employs `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and `d3.zoom` for panning and zooming. Country data comes from the World Atlas TopoJSON and TSV files, while the legend uses `d3.scaleOrdinal` and `d3.schemeSpectral`. Hovering over a country turns it red, and the legend’s clickable ticks dim non-selected categories.

Loading thumbnail…

Choropleth Map

This example displays a world map as a choropleth, with each country colored by its income group using an ordinal color scale and a custom SVG legend. D3’s `geoNaturalEarth1` projection and `geoPath` render geographic boundaries from a TopoJSON source, while data from a TSV file is joined by country ID. Hovering a country turns it red and shows its name and income group in a tooltip, and pan/zoom interaction is enabled via a custom zoom event.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale derived from `d3.scaleOrdinal` and `schemeSpectral`. The map renders with `d3.geoNaturalEarth1` projection and `d3.geoPath`, while country geometries and names come from TopoJSON and TSV data loaded via `Promise.all`. A semi-transparent legend built from `d3.scaleOrdinal` domains shows color categories, and `d3.zoom` enables panning and zooming over the SVG. Hovering highlights individual countries in red.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes the economic classification of countries across the globe, using color to encode each nation’s economy category. The map is rendered with D3.js v5, using `geoNaturalEarth1` projection and `geoPath` to draw country boundaries. Country data is loaded from the world-atlas TSV and TopoJSON files, with the `economy` property mapped to a spectral color scale. Hovering over a country displays its name and economy type, while a custom color legend explains the color mapping. A zoom interaction is also implemented via `d3.zoom`.

Loading thumbnail…

Color Legend Practice

This visualization demonstrates two reusable legend components: a color legend for categorical data and a size legend for quantitative data. The color legend maps fruit names to colored circles, while the size legend uses a square-root scale to represent numeric values through circle radius. Built with d3.js v5, the example shows how SVG groups can be efficiently updated using the `selectAll` and `merge` pattern for incremental rendering. Both legends are created as modular functions that accept a selection and configuration properties, highlighting a flexible approach to legend creation.

Loading thumbnail…

Choropleth Map

This choropleth map displays world countries on a natural Earth projection, colored uniformly with a light green fill on a blue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` from d3 to generate the geographic paths from TopoJSON world data. The visualization supports zooming and panning via the custom `zoom` event, while hovering over a country turns it red. Data is loaded from the world-atlas package, which provides both TSV metadata and TopoJSON geometry.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries with a green fill and a blue sphere background, using a natural Earth projection rendered to SVG. It draws country boundaries and names from the world-atlas TopoJSON dataset, with each country’s name displayed as a tooltip. The map supports pan and zoom via d3.zoom, and hovering over a country turns it red. The code leverages d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to generate the geographic paths.

Loading thumbnail…

Let's make a face with D3.js!

A fruit bowl visualization demonstrates data binding and transitions with D3.js. Rendered as SVG, it shows apples and lemons as circles with color and size scales, positioned along a bowl-shaped rectangle. The code uses `selection.data()`, `enter()`, `merge()`, and `exit()` to update elements, with `transition()` animating position changes. Over time, fruits are removed and one apple changes to a lemon, illustrating dynamic updates. The implementation relies on D3 v5 modules `scaleOrdinal`, `range`, and `select`, with state managed via `setTimeout` in the main script.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion. The tree layout renders countries as leaf nodes beneath their regional groupings, with curved horizontal links connecting parent and child nodes. The visualization uses D3 v5's `tree()` layout and `linkHorizontal()` generator, with text labels sized inversely to node depth. The SVG output is rendered dynamically from a JSON dataset, and users can navigate the hierarchy using D3's `zoom()` behavior for panning and scaling.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion. The tree layout renders countries as leaf nodes beneath their regional groupings, with curved horizontal links connecting parent and child nodes. The visualization uses D3 v5's `tree()` layout and `linkHorizontal()` generator, with text labels sized inversely to node depth. The SVG output is rendered dynamically from a JSON dataset, and users can navigate the hierarchy using D3's `zoom()` behavior for panning and scaling.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion. The tree layout renders countries as leaf nodes beneath their regional groupings, with curved horizontal links connecting parent and child nodes. The visualization uses D3 v5's `tree()` layout and `linkHorizontal()` generator, with text labels sized inversely to node depth. The SVG output is rendered dynamically from a JSON dataset, and users can navigate the hierarchy using D3's `zoom()` behavior for panning and scaling.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchy of world countries organized by continent and subregion as a tree structure. The hierarchical data, which shows the path from "World" down to individual countries like Afghanistan and India, is loaded from a JSON file. The SVG rendering uses D3 v5 to create the visualization, with the page dimensions determining the width and height of the SVG canvas. The code sets up a blank rectangle as the background but does not yet implement the tree layout or node rendering, only loading and logging the data.

Loading thumbnail…

Blank Canvas

A blank canvas fills the browser window, rendered as a single rounded rectangle. The visualization demonstrates the minimal setup for a D3 project, with no data or interaction. The code uses `d3.select` to target the SVG element and dynamically sizes it to the viewport's client dimensions. A `rect` is appended to the SVG, inheriting the full width and height with a corner radius, all rendered as vector graphics. The example relies on D3 v5’s core selection methods, not any specialized visualization API.

Loading thumbnail…

Cheap Tricks

This visualization displays a world map using a natural Earth projection, with countries filled in light green and ocean areas in blue. Hovering over a country turns it red. The map is rendered as SVG paths generated from TopoJSON world-atlas data, with country names loaded from a TSV file. The implementation uses d3.geoPath and d3.geoNaturalEarth1 for the projection, d3.zoom for panning and zooming, and the topojson library to convert geographic data into features.

Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Loading thumbnail…

Hovering

Five circles represent fruit as apples and lemons, with size and color encoding fruit type. Hovering a circle highlights it with a black outline, updating the selected fruit state. The example demonstrates data joins with enter, update, and exit selections, using `transition` for animated radius changes when fruits are added, removed, or change type. SVGs are rendered with D3 v5.

Loading thumbnail…

Hovering

A row of apples animates in size and position using d3 transitions, with one fruit highlighted on hover. The fruitBowl module binds fruit objects to SVG circles, using scaleOrdinal for color and radius mapped to fruit type. Mouse events call setSelectedFruit to toggle a black stroke on the selected circle. Over time, setTimeout triggers data changes—removing a fruit, converting one to a lemon, and filtering another—while d3’s enter/merge/exit pattern animates the updates.

Loading thumbnail…

Let's make a face with D3.js!

A dynamic SVG scene of fruit circles arranges as a face-like bowl, with apples and lemons changing position, size, and color through animated transitions. Using D3 v5’s `scaleOrdinal` for color and radius mapping, the example demonstrates data joins with `enter`, `merge`, and `exit` selections, applying `transition().duration(1000)` to animate circle attributes. Clicking a circle highlights it with a black stroke via a `selectedFruit` callback. Over time, `setTimeout` removes fruits and mutates one apple into a lemon, showcasing live updates.

Loading thumbnail…

Let's make a face with D3.js!

A face built from D3.js selections animates its eyebrows and changes expression, demonstrating how data-driven DOM updates work with SVG. The example transitions fruit-bowl shapes through enter, update, and exit cycles using `selection.data`, `selection.enter`, `selection.merge`, and `groups.exit().remove()`, with `d3.transition` handling smooth movement. It applies ordinal scales (`scaleOrdinal`) for fruit colors and radii, and dynamic transforms position elements by index. Timers (`setTimeout`) trigger data changes—removing fruits, swapping types, and filtering—to show how state changes render, all rendered as SVG circles and text.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can build an interactive smiley face by manipulating SVG elements, with animated eyebrows that move over time. The code uses `d3.select` and `selection.data` to bind fruit-shaped data to SVG circles and text, while `transition.attr` animates their positions and radii. A fruit bowl is rendered as an SVG rectangle, and ordinal scales like `scaleOrdinal` map fruit types to colors and sizes. The face updates through timed intervals that add, remove, or alter data, showcasing D3’s enter, update, and exit pattern.

Loading thumbnail…

Temperature in San Francisco

This area chart shows world population growth over time, using a filled path to represent population values across years. The visualization loads CSV data from a remote dataset and maps years to a time scale, with population counts on a linear scale. It uses d3.area with curveBasis for smoothing, d3.axisBottom and d3.axisLeft for labeled axes, and d3.format to abbreviate population numbers. The SVG rendering includes grid lines and clear axis titles, with the population area filled in steel blue.

Loading thumbnail…

Temperature in San Francisco

This area chart shows world population by year, with a curved line filling the space beneath it to emphasize change over time. The visualization uses D3 v5's `area` generator with `curveBasis` for smoothing, and employs `scaleTime` and `scaleLinear` to map the data. Axes are rendered using `axisBottom` and `axisLeft` with custom tick formatting, while the data is loaded from a CSV file via `d3.csv`.

Loading thumbnail…

Temperature in San Francisco

This area chart displays temperature over time in San Francisco, with a smooth filled path representing the data and labeled axes for time and temperature. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area` generator with `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG chart. Data is loaded from a CSV file via `csv`, with timestamp and temperature fields parsed before rendering.

Loading thumbnail…

Temperature in San Francisco

This area chart shows temperature changes in San Francisco over time, with a filled curve representing the data and labeled axes for time and temperature. The visualization uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for scaling, and d3.area with d3.curveBasis to generate the smooth filled path. Grid lines are added via d3.axisBottom and d3.axisLeft, while axis labels and a title are appended as SVG text elements.

Loading thumbnail…

Temperature in San Francisco

This example shows the temperature in San Francisco over time as a smooth line chart, with a time-scaled x-axis and linear temperature y-axis. The data is loaded from a CSV file via d3.csv and parsed into Date and numeric values. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisBottom and d3.axisLeft to render gridlines and labels. The SVG output includes a titled chart with styled tick lines and a thick steel-blue line path.

Loading thumbnail…

Cars Scatter Polt

This scatter plot visualizes the relationship between acceleration and horsepower for cars from the auto-mpg dataset. Each circle represents a car, with axis labels for both variables and a title. Built with D3 v5, it uses `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to render the axes, with gridlines and a rotated y-axis label. Data is loaded via `csv` and rendered as SVG circles.

Loading thumbnail…

Scatter Polt

This scatter plot displays the population of the top ten countries, with each circle positioned along a categorical y-axis for country names and a linear x-axis for population values. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map data, with `axisBottom` and `axisLeft` generating gridlines. Circles are appended as SVG elements, and the x-axis tick format abbreviates numbers (e.g., "1.35B") via `d3.format`. Population values from the CSV are multiplied by 1000 during preprocessing. The chart is rendered entirely with SVG within a fixed 960x500 canvas, using margins and a translated group for layout.

Loading thumbnail…

Scatter Polt

This scatter plot displays the population of the top ten countries, with each circle positioned along a categorical y-axis for country names and a linear x-axis for population values. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map data, with `axisBottom` and `axisLeft` generating gridlines. Circles are appended as SVG elements, and the x-axis tick format abbreviates numbers (e.g., "1.35B") via `d3.format`. Population values from the CSV are multiplied by 1000 during preprocessing. The chart is rendered entirely with SVG within a fixed 960x500 canvas, using margins and a translated group for layout.

Loading thumbnail…

Building a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries, ordered alphabetically, with population displayed on the x-axis. It uses d3.csv to load data.csv and d3.scaleLinear and d3.scaleBand to map population values and country names to pixel coordinates. The chart is rendered as SVG, with axes created via d3.axisLeft and d3.axisBottom, and bars drawn as `rect` elements filled with steelblue.

Loading thumbnail…

Make a Face

This visualization demonstrates the construction of a simple face using direct SVG manipulation. The code accesses the SVG element via `select` from the `d3` library, reading its width and height attributes. It renders a minimalist face graphic within an empty SVG canvas, relying on the `d3.v5` API. The example showcases basic SVG drawing and attribute handling in a D3.js context, with the face’s appearance determined solely by the HTML structure and CSS styling. The rendering is purely SVG-based without any data source.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using Cascading Style Sheets (CSS) alongside inline attributes. The visualization shows a scaled grouping of primitives, with some shapes inheriting fill and stroke properties from parent `<g>` elements, while others specify these directly. The code imports the `select` function from D3.js to update a message div, and uses SVG’s `transform` attribute for scaling and translation. CSS classes like `.line` apply stroke styling and path-specific properties, such as `stroke-linejoin`, to the rendered vector graphics.

Loading thumbnail…

Car Reports

This example demonstrates a simple text-based report of cars, filtering a hardcoded JSON dataset by price. It uses a Promise-based `getCars` function to simulate a 2-second loading delay, while the `generateReport` module filters cars under $2,000 and formats each entry with `formatCar`. The `index.js` script updates a `<pre>` element’s textContent, showing the list of affordable vehicles. The code relies on D3’s `d3.min.js` bundle for DOM manipulation, though the visualization is purely textual, not graphical.