Skip to main content
Log in
C

Calvin.

@Calmanning·11 public vizzes

Loading thumbnail…

ScatterPlot

This scatter plot displays the populations of the top ten countries, using horizontal bars where each bar’s length corresponds to population size, with country names on the vertical axis. The visualization is rendered as an SVG using React and D3 v7, reading from a CSV file. The code applies a linear scale for population values, a band scale for countries, and custom axes with formatted tick labels that abbreviate large numbers.

May 6, 2022
Loading thumbnail…

sf temp lineChert

This example visualizes weak temperatures in San Francisco as a smooth, maroon line chart over time. The chart uses a basis curve to connect data points, with axes labeled "Time" and "Temperature" and a title. It loads CSV data from a remote dataset, parses timestamps and numeric temperatures, and renders the visualization using D3’s `select`, `csv`, `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, `line`, and `curveBasis` APIs within an SVG canvas.

Mar 24, 2022
Loading thumbnail…

Fork of Fork of need some fruit - Hover to Select

A hover-to-select interaction highlights fruit in a dynamic D3.js visualization. Apples and lemons are rendered as colored SVG circles with ordinal color and radius scales, transitioning smoothly as data updates. The example demonstrates fundamental DOM manipulation through `selection.data`, `enter`, `merge`, and `exit`, with a `transition` animating circle radius and position. `mouseover` and `mouseout` events trigger a selection method that updates a stroke highlight, while timed `setTimeout` calls modify the fruit array, showing how data joins and animated updates work.

Mar 22, 2022
Loading thumbnail…

Fork of need some fruit - click interactions

Five apples and a lemon are rendered as color-coded circles in an SVG bowl, with each fruit selectable by click. The selected fruit gains a black outline. The code uses D3 v5’s `scaleOrdinal` for color and radius, and joins data to circles with `selectAll`, `enter`, and `merge`. It also demonstrates transitions on `attr` for radius and position, plus `on('click')` handlers to update a selected fruit’s ID and re-render. Data updates add, remove, and change fruit types over timed intervals.

Mar 22, 2022
Loading thumbnail…

Fork of need some fruit - General Update Patterns - Object Constacy

Five pieces of fruit sit in a bowl as apples are eaten, replaced with lemons, and filtered away in sequence. Built with D3 v5, the example demonstrates general update patterns through the enter, update, and exit selections, animating circle radii with `transition().duration()`. A color scale maps fruit types to red or gold, while the data join keys on randomized IDs to track individual elements.

Mar 17, 2022
Loading thumbnail…

need some fruit - General Update Patterns

This example demonstrates D3.js general update patterns by rendering a bowl of fruit as colored circles that change over time. The visualization shows apples and lemons entering, exiting, and updating their position, size, and color through staggered transitions. Using the `data` join with key functions and `merge`, the code animates SVG circles via `transition().duration()`, applying `scaleOrdinal` color and radius scales based on fruit type. The data source is a JavaScript array modified with `setTimeout` calls to simulate eating and replacing fruit.

Mar 17, 2022
Loading thumbnail…

World Pop-o Area Chart

The World Pop-o Area Chart visualizes global population growth over time, with the x-axis mapping years and the y-axis representing population counts. The chart uses a filled area path with a smooth curve (via d3.area and curveBasis) to emphasize the upward trend. It fetches CSV data from a VizHub dataset, parses years as dates, and renders axes with d3.axisBottom and d3.axisLeft, formatting y-axis ticks with d3.format to abbreviate billions as "B". The SVG output includes styled grid lines, axis labels, and a title, all built using d3.v7 within a React-free HTML setup.

Mar 16, 2022
Loading thumbnail…

sf temp RreraChert

This example visualizes weekly average temperatures in San Francisco using an area chart. The chart plots timestamps on the x-axis and temperature values on the y-axis, with a smooth, maroon-filled curve rendered as an SVG path. The code uses D3.js v7 functions including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to construct the axes and area. Data is loaded from a CSV file hosted on VizHub, parsed to convert timestamps to `Date` objects and temperatures to numbers, then rendered. The visualization includes axis labels and a title, with gridlines styled via CSS.

Mar 16, 2022
Loading thumbnail…

sf temp scat

A scatterplot displays hourly temperature readings in San Francisco over time, with red semi-transparent circles plotted along a time-based x-axis and a linear temperature y-axis. The visualization uses D3 v7's scaleTime, scaleLinear, extent, and axis functions within an SVG rendered in React. Data loads from a CSV file, converts timestamp strings to Date objects, and renders with labeled axes, grid lines, and a title.

Mar 16, 2022
Loading thumbnail…

scattercar

This scatterplot visualizes the relationship between car horsepower and fuel efficiency (MPG) using the auto-mpg dataset. Each semi-transparent blue circle represents a car model, positioned by its horsepower (x-axis) and MPG (y-axis) values, with axes labeled "HP" and "weight." The visualization is built with D3 v7 and React, using `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the scales and axes. The SVG rendering includes gridlines, tick labels, and a title, with data loaded via the `csv` function.

Mar 16, 2022
Loading thumbnail…

Bar Charts and D3

This bar chart displays the populations of the ten most populous countries, with circles representing each nation and a linear scale mapping population values. The chart uses D3 v7 to load CSV data, scaleLinear for the x-axis, and scalePoint for categorical country positioning on the y-axis. Axes are rendered via axisBottom and axisLeft, with grid lines drawn through tick sizing. The visualization includes a title and axis labels, while styling is handled through external CSS.

Mar 16, 2022