Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Aug 25, 2022

Created on Aug 25, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Fork of D3 Starter

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.

GGavin Sykes

85% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal line chart created with D3.js, plotting a small time-series dataset of monthly amounts from January to April 2014 as circles on a date-scaled x-axis. The code builds an SVG visualization using D3 v4 and v7, defining chart dimensions, margins, and a time scale via `d3.scaleTime()`. It constructs axes with `d3.axisBottom` and `d3.axisLeft`, binds the data to circle elements using `.data()`, and applies basic styling. The visualization serves as a starter template, showcasing core D3 workflows for scale creation, axis rendering, and data binding.

Aabdeldev504

85% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic bar chart using D3 version 7, with data loaded from a CSV file containing yearly values. The visualization renders an SVG with a band scale for the x-axis and a linear scale for the y-axis, displaying bars for each year. The code uses `d3.csv` to asynchronously load the dataset, then applies `d3.axisBottom` and `d3.axisLeft` to generate labeled axes. The y-axis ticks are formatted with a dollar sign prefix, and bars are drawn as `rect` elements sized by the scales.

BBastien Golomer

83% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3 starter chart that uses a small static dataset of three samples to create a bubble chart. The visualization displays each sample as a circle, with its vertical position determined by its value and the circle size set by a predefined radius. The chart includes an x-axis with categorical labels and a y-axis with a linear scale. The code loads data from a CSV file using `d3.csv`, but the actual chart is built from the hardcoded `dataset` array, rendering SVG elements with `d3.scaleBand` and `d3.scaleLinear`.

Rrjthompson22

83% 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

83% 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 demonstrates a basic D3 starter template with hardcoded date data displayed as two animated SVG rectangles representing time intervals. The visualization uses D3 v7 scales and axes to map time values, with bars animating from zero width to full width over one second using transitions. It also includes time parsing utilities like `utcParse` and `timeParse` to handle date formats, while `axisBottom` and `axisLeft` generate the time-labeled axes. Though the code sets up scales and data, the actual visual output is limited to two green bars without a complete data-binding workflow.

DDaniel Russell-Brain

82% match