I

ianleekq

@ianleekq·31 public vizzes

Loading thumbnail…

Customizing Axes

This visualization shows the ten most populous countries as a horizontal bar chart, using population data from the UN. The bars are sorted by population, with China and India dominating the chart. The example focuses on customizing both the x-axis and y-axis: the x-axis uses a tick format function to abbreviate large numbers (e.g., converting billions to "B"), while the y-axis labels are styled with custom tick text. The chart is rendered with SVG, using D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, with data loaded via `d3.csv`.

Loading thumbnail…

Timeline

This example presents an interactive timeline visualization of temporal data, showing the start and end times for multiple entities (such as people) as horizontal bars. Users can zoom and navigate through the time range using provided controls. The visualization is built with D3.js v5, using SVG for rendering and the `scaleTime` and `scaleOrdinal` APIs for time scaling and color assignment. A dropdown menu, created with a custom D3 component, allows users to filter data, while the timeline supports stacked rows and time axis navigation.

Loading thumbnail…

Scatter Plot with Menus

This example shows an interactive scatter plot of the auto-mpg dataset, where dropdown menus let the user select which columns to display on the x- and y-axes. As the selection changes, the plot’s axes and data points animate to their new positions with a smooth transition. The visualization is built using the D3.js library (v5), leveraging its `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs, with circles rendered as SVG elements. The dropdown menus are created dynamically via a custom component that generates HTML `<select>` elements, and the plot updates instantly upon user input.

Loading thumbnail…

Line Chart with Multiple Lines

This example displays a week of temperature data from San Francisco as a smooth, multi-line chart over time. The visualization uses D3.v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a single maroon path, while styling comes from CSS. Data is loaded from a CSV via `csv` and drawn as an SVG, with labeled axes and a title.

Loading thumbnail…

Line Chart

This line chart visualizes temperature readings in San Francisco over a week, plotting time on the x-axis and temperature on the y-axis with a smooth curved line. The data is loaded from a remote CSV file using d3.csv, and the chart is rendered as an SVG. The code uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line with the curveBasis option to generate the path. Grid lines, axis labels, and a title are styled via CSS classes.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economic data, colored by country using a spectral ordinal scale, lets viewers filter countries by clicking a color legend. The map renders with an SVG projection via `d3.geoNaturalEarth1` and `d3.geoPath`, supporting pan and zoom through `d3.zoom`. Legend clicks toggle highlighting of matching countries, dimming others. Country data merges TopoJSON geometries with TSV attributes from the world-atlas dataset, and legend interactions redraw both map and legend.

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group, using a spectral color scale with an accompanying legend. The visualization is built with D3.js, using `d3.geoPath` and `d3.geoNaturalEarth1` for map projection and rendering, and `zooming` via `d3.zoom` event handling. Country data comes from the `world-atlas` package, with income group information joined from a TSV file, and the map supports hover highlighting.

Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components rendered as SVG: a color legend using a d3 ordinal scale mapping fruit names to colors, and a size legend using a d3 square-root scale mapping numeric values to circle radii. The color legend places equally sized circles with labels, while the size legend shows varying circle sizes with tick values generated by `sizeScale.ticks()`. Both rely on D3’s data join pattern (`selectAll().data().enter()`) with explicit `spacing` and `textOffset` props for layout, and are called via the `selection.call()` method.

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map shows world countries colored in light green on a blue sphere, with countries highlighted in red on hover. It uses d3.geoPath and d3.geoNaturalEarth1 for geographic projections and d3.zoom for pan/zoom interaction, rendering in SVG. Country names appear as tooltips via appended title elements, with data sourced from the world-atlas 50m TSV and TopoJSON files. The code imports from the d3 and topojson libraries.

Loading thumbnail…

Bowl of Fruit - General Update Pattern with Bowl

This example demonstrates the general update pattern in D3, showing a bowl of fruit that changes over time as apples are eaten and replaced with lemons. The visualization renders circles and labels inside an SVG, using `d3.scaleOrdinal` for color and radius mapping based on fruit type. Data updates are handled through enter, merge, and exit selections, with circles and text appended to groups. The bowl itself is a static rounded rectangle, while the fruit transitions are driven by timed state changes.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern, showing how a data visualization reacts to incremental changes in a dataset. A bowl of fruit, initially containing five apples, updates over time as fruits are removed and an apple is transformed into a lemon. The visualization uses D3 v5 and SVG rendering, where each fruit is represented as a circle and a text label. The `selection.merge` and `selection.exit` methods handle the smooth insertion and deletion of elements, with `scaleOrdinal` mapping fruit types to colors and radii.

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples and a lemon appear as circles in a bowl, with an apple automatically removed after one second and a second apple removed later, while one apple transforms into a lemon. Hovering over any fruit highlights it with a black stroke, and the selection is cleared on mouseout. The example uses D3 v5’s selection and transition APIs with a custom `fruitBowl` component, ordinal color and radius scales, and a one-second animation duration for enter, update, and exit operations.

Loading thumbnail…

World Countries Tree

This interactive tree diagram visualizes the hierarchical structure of world countries, organized by continent and subregion. Using D3.js v5, the visualization employs a horizontal tree layout with SVG rendering. The code leverages D3's `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout and generate connecting paths. User interaction is supported through D3's `zoom` event, which applies pan and zoom transformations to the entire group. Text labels display country names, with font size decreasing by depth level, while the data source is a JSON file containing the geographical hierarchy.

Loading thumbnail…

Art Tree

A horizontal dendrogram displays hierarchical world geography, starting with continents and branching into subregions and individual countries. The visualization uses a D3 tree layout with `d3.hierarchy` and `d3.tree` to compute node positions, and `d3.linkHorizontal` to draw the curved connecting paths. Data is loaded from a local JSON file, and the SVG canvas is sized to the full browser viewport.

Loading thumbnail…

Blank Canvas

This visualization displays a blank, rounded-corner rectangle that fills the entire browser viewport, occupying the full width and height of the page’s client area. The SVG canvas is dynamically sized using `document.body.clientWidth` and `document.body.clientHeight`, with the rectangle drawn via a simple `<rect>` element appended to the SVG. The styling uses fixed positioning and hidden overflow in CSS to ensure the canvas remains edge-to-edge. Built with d3.v5, the code leverages the d3 `select` method to target the SVG element, and no data source is used, as the piece is purely a minimal geometric composition.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is constructed entirely from SVG shapes, with a yellow circular head, two dark eyes, eyebrows, and an arc-based mouth. The example demonstrates basic SVG composition and D3 selections, then animates the eyebrows by chaining `transition` calls to shift their vertical position. It uses D3 v5’s `select`, `arc`, and `attr` APIs to generate the mouth path and manage transform attributes. A centered `<g>` group positions all features, with fixed pixel constants controlling eye spacing and offsets.

Loading thumbnail…

Let's make a map with D3.js!

This visualization shows a world map rendered as light green countries against a blue sphere, using a natural Earth projection. The map is built with D3.js v5 and TopoJSON, loading country boundaries from the world-atlas dataset. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `feature` from TopoJSON to extract GeoJSON country features. Each country is drawn as an SVG path with a black stroke, while the overall sphere fill is blue.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit enter the SVG with a 1-second transition, each colored by a d3.scaleOrdinal mapping apples to red and lemons to yellow. Clicking a circle selects it, applying a black stroke via the data join and transition. The scene’s data updates are arranged with setTimeout: apples are removed from the end, the third fruit changes type to a lemon, and another apple is filtered out, demonstrating enter, update, and exit transitions.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A dynamic SVG visualization demonstrates the general update pattern in D3 v5, where fruit appears as colored circles that grow, shrink, and change color as apples are eaten and replaced with lemons. The fruitBowl module uses d3.scaleOrdinal for color and radius scales, with enter, merge, and exit selections chained to transition.attr for smooth 1000-millisecond animations. Data updates triggered by setTimeout calls modify the fruits array, showing how keyed data joins handle additions, removals, and modifications while maintaining circle identity.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates D3’s general update pattern for binding data to SVG groups. Five apples are initially rendered, then one is removed, one apple changes to a lemon, and another is removed, with each transition updating the circles and text labels. The code uses `selection.data()`, `enter()`, `merge()`, and `exit()` to manage the joins, with `scaleOrdinal` mapping fruit types to colors and radii under d3.v5.

Loading thumbnail…

World Population Area Chart

This chart displays world population over time using a filled area graph, with the y-axis representing population and the x-axis showing time. The visualization uses D3 v5’s `area` generator with a `curveBasis` smoothing, alongside `scaleTime` and `scaleLinear` for axes. Data comes from a CSV file loaded via `d3.csv`, and population values are formatted from billions to "B" using `d3.format`. The SVG rendering includes styled grid lines and axis labels.

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a smooth curved area fill in maroon, with labeled axes and a title. Built with d3 v5, it employs `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.area` with `d3.curveBasis` to generate the SVG path. The data comes from a CSV file hosted on VizHub.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays a week of temperature readings in San Francisco, plotting time on the x-axis against temperature on the y-axis with a smooth, curved line. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the data as an SVG path. Data is loaded asynchronously from a CSV via D3’s `csv` function, with timestamps parsed into `Date` objects. The chart includes labeled axes, a title, and grid lines, with maroon strokes for the data series.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays daily temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Each point represents a single measurement, revealing the daily temperature pattern. The visualization uses D3 v5 to load CSV data, map timestamps and temperatures to scales via `scaleTime` and `scaleLinear`, and render the chart with SVG elements. It includes styled axes, tick marks, and grid lines, with a title and axis labels.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red circle representing a vehicle. The D3 v5 code uses `csv` to load the data, `scaleLinear` to map values to pixel coordinates, and SVG `circle` elements for rendering. Axes are generated with `axisBottom` and `axisLeft`, while `extent` determines the domain. The chart includes labeled axes and a title, with styling applied via CSS.

Loading thumbnail…

Scatter Plot

A scatter plot shows the population of the ten most populous countries, listing each country along the y-axis and its population on the x-axis. The data originates from an unspecified UN source and is processed from a CSV file. Built with D3 v5, the visualization uses `scaleLinear` and `scalePoint` to map values, while `axisLeft` and `axisBottom` generate the grid lines and ticks. Circles are rendered as SVG elements, with a formatted tick label replacing 'G' with 'B' for billions.

Loading thumbnail…

Making a Bar Chart

This bar chart displays population figures for ten countries, sourced from United Nations data in a CSV file. It encodes country names on the y-axis using `scaleBand` and population values on the x-axis with `scaleLinear`, rendering steelblue rectangles in SVG. The code builds the visualization with d3.csv, axis generators `axisLeft` and `axisBottom`, and margin-based layout, appending a group element to position the chart within the SVG canvas.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using Cascading Style Sheets (CSS). It uses circles, rectangles, lines, and paths within an SVG `<g>` element, showing effects like scaling, translation, fill colors, stroke properties, and stroke-linejoin styling. The stylesheet (`styles.css`) applies black strokes and a specific rounded line join to path elements, while inline SVG attributes provide fill colors. The rendering occurs directly in the browser using standard SVG syntax, with no JavaScript libraries involved, relying purely on SVG and CSS techniques.

Loading thumbnail…

HTML Cars Report

This example shows a static HTML report of a car list, with three items displayed in a large monospace font and the first car highlighted in red. The page uses a plain `ul` and `li` structure in the HTML body, while a separate `styles.css` file defines the `body` typography and applies the `.highlighted` class to emphasize Car 1. No JavaScript frameworks or data-binding libraries are present; the rendering relies solely on native HTML and CSS, with the data hardcoded into the markup rather than loaded from an external source.

Loading thumbnail…

Hello VizHub

This example demonstrates how D3.js can populate an HTML container with dynamic text. Rendered on a dark, high-contrast canvas with large Ubuntu typography, the visualization uses `select('#message')` from d3.v5 to target a specific DOM element, then applies `.text()` to insert a string imported from a local module. The page styling relies on CSS from an external Google Fonts import. There are no interactive elements or complex data transformations; the core functionality depends purely on D3’s DOM selection and text assignment API.

Loading thumbnail…

Untitled

This example displays a simple greeting message, “Hello VizHub!”, centered on the page using the D3.js `select` method to update the text of a div element. The visualization is rendered in plain HTML with an external stylesheet that applies the Ubuntu font, a dark background, and large, light-colored text. The code is organized into ES6 modules, importing the message from a separate file, and relies on a bundled script for execution. The data source is a static string defined within the code.