Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Nov 28, 2021

Created on Nov 28, 2021

This example demonstrates a small multiples chart using D3.js merge() to create a grid of line-area charts. Each panel displays time-series data for a character (star, boo, toad) with a colored line and semi-transparent area. The code uses d3.create, d3.scaleBand, d3.scaleLinear, d3.line, d3.area, and d3.set. Data groups are entered, merged, and positioned with panels per row, while images and titles label each chart.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

79% match

Loading thumbnail…

Fork of D3 Starter

A dynamic bar chart animates ten rectangles across the screen using D3 v7. The bars scale in height and width based on their index, with positions computed from the data values. The code selects the body, appends an SVG sized to the window, and uses `d3.range` to generate the dataset. Each rectangle’s position and size are set with attribute functions, creating a diagonal, staggered layout with light-blue fills.

Fferneyhoughedward@gmail.com

78% match

Loading thumbnail…

Fork of D3 Starter

This example displays a simple bar chart constructed from a fixed JavaScript array of 25 numeric values. It demonstrates a minimal setup for D3 version 7 by using the d3.select and d3.append functions to create an SVG canvas, then the selectAll and data methods to generate rectangles for each data point. The bars are positioned horizontally with a fixed spacing and height proportional to each value, showing basic data binding and SVG rendering without any interaction or animation.

KKoundinya

78% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a treemap visualization that recursively partitions a rectangular canvas into nested rectangles, with each leaf node sized proportionally to its value. The code builds the layout manually using D3’s `scaleLinear` for area allocation and `scaleOrdinal` with the `schemeCategory10` color palette. It also computes text dimensions with a custom `visualWidth` helper and uses CSS-based font-family detection for cross-system compatibility. The data is loaded from a local JSON file and rendered as SVG rectangles and text labels.

HhelloHailey-sketch

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

77% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 v7 bar chart, displaying a static dataset of five values as vertical rectangles. The visualization shows how to bind data to SVG elements and map data values to visual properties. The chart is rendered in an SVG container using D3's selection, data-join, and attribute methods, including `selectAll`, `data`, `enter`, `append`, and `attr`. The code also sets the page text to "Hello D3 version 7" via the `select` function, while the chart dimensions and padding are defined as constants.

RRidaHwn

77% match

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

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

77% match