Skip to main content
Log in
T

Timothy sit

@Timothysit·17 public vizzes

Loading thumbnail…

Let's make a map!

This example demonstrates the initial step of building a geographic map by loading world land data from the world-atlas TopoJSON dataset. The code fetches the `land-110m.json` file and logs it to the console, while an empty SVG group is positioned at the center of the frame. Using d3.json for asynchronous loading and d3.select for SVG manipulation, it sets up the foundation for future projection and path rendering, though no map geometry is drawn yet.

Dec 30, 2020
Loading thumbnail…

Fork of Bowl of fruit - hover to select

A bowl of five apples rendered as SVG circles animates through data updates, with hover interactions selecting a fruit by adding a black stroke. The visualization demonstrates D3 v5’s join pattern using `selection.data`, `enter`, `merge`, and `exit` transitions, with `scaleOrdinal` mapping fruit types to colors and radii. Hovering triggers a callback to update the selected fruit, while timed actions sequentially remove fruits and replace one apple with a lemon, causing smooth radius and position transitions over one-second durations.

Dec 30, 2020
Loading thumbnail…

Bowl of fruit - click to select

A bowl of fruit demonstrates a join-based update pattern in D3 v5. Circles represent apples and lemons, scaled by fruit type via `scaleOrdinal`, with the selected fruit highlighted by a black stroke. Clicking a circle triggers a callback that updates the selection and re-renders the visualization. Transitions animate new circles growing from radius zero, exiting circles shrinking away, and position changes over one second. The example uses `selection.data`, `.enter()`, `.merge()`, and `.exit()` to manage enter, update, and exit states, with SVG rendering and an animation showing data changes over time.

Dec 30, 2020
Loading thumbnail…

Nested elements with transitions

A dynamic fruit bowl updates through sequential data changes, showing apples and lemons as colored circles with labels inside a brown rectangular container. Using D3 v5 with SVG rendering, the example demonstrates nested elements where each fruit group contains a circle and text element. The visualization uses a scaleOrdinal for color and radius mapping, while data joins with enter/merge/exit patterns handle transitions when fruits are removed or change type.

Dec 30, 2020
Loading thumbnail…

Fruit Bowl nested elements

This example demonstrates the D3 lifecycle for creating, updating, and removing nested SVG elements by managing a fruit bowl of apples and lemons. It shows how a single selection can synchronize groups, circles, and text labels as the underlying data array changes over time through timed mutations. Using D3 v5’s `select`, `range`, and `scaleOrdinal`, the code dynamically repositions and recolors each fruit’s circle and label, removing or modifying elements when fruits are eaten or replaced. The rendering relies on SVG groups and merge operations for efficient updates.

Dec 29, 2020
Loading thumbnail…

Temperature in San Francisco linechart

A line chart visualizes temperature readings in San Francisco over a single week, with time on the x-axis and temperature on the y-axis. The chart displays a smooth curve through the data points using a basis spline, and includes labeled axes, grid lines, and a title. The visualization is built with D3 v6, using `scaleTime`, `scaleLinear`, `line`, and `curveBasis`, and renders as an SVG. Data is loaded from a CSV file hosted on VizHub, parsed with `csv()`, and transformed into JavaScript Date and numeric values.

Dec 28, 2020
Loading thumbnail…

World population area chart

This area chart visualizes global population trends over time using a smooth, filled curve. The chart loads data from a CSV file containing annual world population estimates, which is parsed and mapped onto time and linear population scales. D3's `area` and `curveBasis` APIs generate the smoothed area path, while `axisBottom` and `axisLeft` construct the axes with custom tick formatting. The visualization also includes axis labels and a title, rendered as SVG elements within a 960x500 canvas.

Dec 28, 2020
Loading thumbnail…

Temperature in San Francisco areachart

This area chart displays a week of temperature readings in San Francisco over time, using a filled, smoothed line to visualize the trend. Built with D3 v6, the visualization renders as SVG and loads data from a remote CSV file. It employs `d3.area` with a basis curve for the filled path, `scaleTime` and `scaleLinear` for the axes, and `axisBottom` and `axisLeft` for gridlines and tick labels. The chart includes labeled axes and a title, with styling defined in an external CSS file.

Dec 28, 2020
Loading thumbnail…

Temperature in San Francisco

A scatterplot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, using a circle for each observation. The chart includes labeled axes, a title, and subtle gridlines derived from the axis ticks. Built with D3 v6, it uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to position elements within an SVG, loading data from a CSV file. Circles are semi-transparent steelblue, and the layout employs fixed margins with rotated y-axis text.

Dec 28, 2020
Loading thumbnail…

Cars scatter plots

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle. The data is loaded from a CSV file and rendered as an SVG using D3 v6. The code employs `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and `d3.extent` to compute domains. Axis labels and a title are added as SVG text elements, while circles use a fixed radius with steelblue fill and partial opacity.

Dec 28, 2020
Loading thumbnail…

Scatter plots

This scatter plot displays population figures for five countries, with each circle positioned along a y-axis of country names and an x-axis of population values. The visualization uses d3.csv to load the data, converts population strings to numbers, and renders SVG circles scaled with d3.scaleLinear and d3.scalePoint. Axis creation relies on d3.axisLeft and d3.axisBottom, with tick formatting that replaces "G" with "B" for billion. The chart includes gridlines, axis labels, and a title, with styling applied via external CSS.

Dec 28, 2020
Loading thumbnail…

Customizing axes

This example demonstrates a horizontal bar chart displaying population data for five countries, with custom-formatted axes. The x-axis uses `d3.format('.3s')` to abbreviate large numbers and replaces 'G' with 'B' to show billions, while both axes remove their domain lines and grid lines are extended via `tickSize`. The chart is rendered as SVG using D3 v6, with scales built via `d3.scaleLinear` and `d3.scaleBand`, and axes created through `d3.axisLeft` and `d3.axisBottom`. Data loads from a CSV file using `d3.csv`.

Dec 28, 2020
Loading thumbnail…

Making a barchart

This bar chart displays population totals for five countries, with rectangles sized according to each nation’s population value. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file, map values to positions, and render axes. The SVG chart applies a steelblue fill to bars, with margins and a padded band scale for categorical spacing. Data is parsed from strings to numbers before rendering.

Dec 27, 2020
Loading thumbnail…

Make a face with D3.JS

A face drawn with D3.js v6 animates its eyebrows up and down. The SVG face shows a yellow circular head, two eyes, rectangular eyebrows, and a curved mouth created with the `d3.arc` generator. The view is centered using an SVG group translation based on the width and height attributes. Eyebrow movement uses chained `transition` calls to shift the group's transform over 2000 milliseconds each way.

Dec 26, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—rendered inside an HTML page. CSS classes control stroke and fill styles, including a green stroke for paths and a black stroke for other line elements. The visualization uses raw SVG elements defined directly in markup, with JavaScript providing only a console log message. It is built with React and rendered via SVG, serving as a minimal starter for exploring vector graphics styling.

Dec 26, 2020
Loading thumbnail…

HTML Cars report

This example presents a simple HTML cars report listing three used vehicles with their model years and prices. The page uses plain HTML structure with a heading and unordered list, styled through CSS with a large monospace font and a highlighted red class on the first item. It demonstrates basic document markup and stylesheet linking, with no JavaScript functionality beyond the static content. The data is hardcoded directly in the markup rather than loaded from an external source. The example serves as a minimal foundation for adding interactive visualizations later.

Dec 25, 2020
Loading thumbnail…

Cars report

This example demonstrates how to generate a text-based car report using modular JavaScript with D3 v6. It shows a loading message while asynchronously fetching car data via a custom Promise, then filters cars under a specified price and formats each match into a readable string using helper functions. The code uses `d3.v6.min.js`, `getCars()`, `generateReport()`, and `formatCar()` to parse inline JSON data and update the DOM element with the final report.

Dec 25, 2020