Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Jan 2, 2022

Created on Jun 16, 2021

This example displays a scatter plot comparing programming language performance on Project Euler problems, with user-selectable axes, filter options, and animated transitions. It loads CSV timing data and color mappings from GitHub repositories, then visualizes results as colored circles that animate to new positions when the dataset changes. The visualization uses a custom surrounding-layout system that automatically positions titles, subtitles, axes, and legends within an SVG canvas. Built with D3 v7, the code leverages `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, `d3.transition`, and dynamic menu-driven data selection through reusable chart components.

AI-generated description

A reusable scatter plot inspired by Curran's YouTube Series Get it Right in Black & White started in March 2021.

I have long been working on a library to allow a user to add the surrounding bits (title, subtitle, legend) to an SVG visualisation without concerning themselves with positioning the chart, as the library will do it for them.

Given that it is written in plain JavaScript, getting this library to work alongside D3 and achieve the same effects that D3 can has been a challenge, but it is starting to come together!

Why write it in plain JavaScript? There are people out there who don't use D3!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

CCrystal Lee

85% match

Loading thumbnail…

Fork of D3 Starter

A fork of D3 Starter shows a dynamic scatterplot of beige circles undulating across a dark SVG canvas. The circles’ vertical positions follow a sine wave, while their count fluctuates over time. Using D3 v7, the code employs `select`, `range`, and `join` to bind data and update circle attributes on a setInterval, with `easeLinear` imported but unused. The animation runs continuously, updating every 100 milliseconds.

WWaseem Medhat

82% match

Loading thumbnail…

Fork of D3 Starter

This interactive chart displays three time series—valueA, valueB, and valueC—as connected scatterplots over time. It includes lines, points, end labels, and a clickable legend that toggles the opacity of each series via `transition().style("opacity")`. The visualization uses D3 v6, loading CSV data from a URL, and leverages `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, `d3.axisLeft`, and `d3.schemeSet2` for scales, paths, axes, and colors. Each series is rendered as an SVG path with circles marking individual data points.

Cchriskrip

82% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates how to set up a D3 force simulation and a scatter plot using reusable modular functions. It imports `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3, along with the `d3-selection-multi` library for chainable `.attrs()` calls. The visualization appends an SVG to the body sized to the full viewport, runs `d3.forceSimulation` on a single data point, and updates circle positions on each simulation tick. A separate `scatterPlot` module builds axes and marks from data arrays using linear scales and margins.

Aatmr0

82% match

Loading thumbnail…

Fork of D3 Starter

This example shows a scatter plot of automobile data, mapping cylinders to the x-axis and horsepower to the y-axis, with each car represented as a semi-transparent circle. The visualization is built using D3 v7, loading data from a CSV file via `d3.csv` and rendering SVG elements with `scaleLinear`, `axisBottom`, and `axisLeft`. Axis labels are added with rotated text, while margins define the chart’s inner dimensions. The code demonstrates a basic D3 starter template, including data type conversion and appended circle elements.

Ssplit56

82% match

Loading thumbnail…

Fork of D3 Starter

This example shows a continuously animated field of colored circles that oscillate vertically in a sine-wave pattern while subtly shifting their fill colors. It demonstrates a simple dynamic scatterplot with real-time updates driven by a timer interval. The visualization is built with D3 version 7, using the `d3.select` API to append an SVG canvas, `d3.range` to generate up to 2,000 data points, and data joins to bind circle elements to changing values. Circle positions and RGB fill colors are recalculated from the sine of the current time step, producing a smooth, wave-like motion across the display.

AAlexanderShaw

81% match

Loading thumbnail…

Fork of D3 Starter

This fork of D3 Starter demonstrates a minimal D3 version 7 setup, rendering a static grid of colored rectangles in an SVG canvas. The visualization shows a simple categorical heatmap-like pattern with varied blue, green, and yellow hues. The code imports the `select` function from D3 and uses it to update the page body text, while the SVG layout is hand-coded in HTML. No data loading or interactive behavior is included, focusing solely on the basic wiring of a D3 project.

Dd-schwabe

81% match

Loading thumbnail…

Fork of D3 Starter

This example creates a static bar chart visualizing food-related data from an external CSV file. It uses D3 v7 scales and axes—`d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`—to map years and values, with y-axis labels formatted as dollar amounts. The chart is drawn inside an SVG with a fixed margin, and the data is loaded asynchronously via `d3.csv`. Only the axes are rendered; no bars or other marks are added.

Mmavercikalvin

81% match