HTML+JS starter

HTML Starter

This example displays two animated line charts comparing "Away" and "Home" values across eight time points, with interactive hover effects that highlight lines and reveal individual data points. The visualization uses D3 v5 scales (d3.scaleLinear), axes, and line generators to render SVG paths, with circles marking each value. The code also incorporates React as the framework and includes smooth transitions and hover tooltips that display numeric values.

Rremyapk

HTML Starter

A bare HTML page with a single SVG element is the foundation of this starter example. The JavaScript uses D3's `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` functions to load population data for 22 countries from `data.csv`. The chart is intended to render horizontal bars with country names on the y-axis and population on a linear scale, though the current code only appends static 300-pixel squares. The example demonstrates a minimal D3 setup within a React environment, serving as a template for more complex visualizations.

Mmatt-godfrey

HTML Starter

This example renders a horizontal bar chart of country populations using SVG and React. The code loads population data from a CSV file with d3.csv and scales the values using d3.scaleLinear and d3.max to map population counts to pixel widths. It sets up an SVG canvas with fixed dimensions and prepares scales for the axes, though the actual chart bars and axes are not fully drawn in the shown code. The visualization uses d3.v5 within a React framework, with the HTML page linking to the D3 library via a CDN.

Mmatt-godfrey

Fork of HTML Starter

This example shows a donut chart displaying six data categories labeled District A through F, with values assigned as static data in a d3 array. The visualization uses `d3.arc` to create the donut shape with an inner radius of 40 and outer radius derived from the viewport, and `d3.pie` to compute the angles for each segment. The chart is rendered as an SVG appended to the body, with each slice filled in steelblue and white strokes, while custom text labels are positioned using `arc.centroid` and rotated based on the slice’s start and end angles. The color scale `d3.scaleOrdinal` defines a range but is not used for slice fills in the code.

Vvipin kumar paikra

HTML Starter

This example demonstrates horizontal and vertical bar charts built with D3 v5, rendering SVG elements with animated transitions. The visualization reads data from a CSV file and displays multiple series with customizable colors, selection highlights, and optional area fills. Users can toggle between bar and line representations per series, with axis ranges configurable for both left and right sides. Hovering over chart sections reveals tooltips showing weekly values via mouse events, while invisible selection rectangles enable interactive node highlighting. The code leverages d3.csv, scaleLinear, scaleBand, axisLeft, axisBottom, and axisRight for data binding and chart construction.

Mmauryaamit

Charts, Charts, Charts

This visualization displays four distinct chart types side by side: a doughnut chart, bar chart, radar chart, and pie chart. Each chart presents a different dataset, such as airline passenger numbers, player skill ratings, and EU population figures. The code uses Chart.js 2.8.0 for rendering all charts onto canvas elements, while D3.js v7 handles loading CSV data from a GitHub gist. The bar chart and pie chart use hardcoded arrays, but the doughnut chart demonstrates fetching and parsing external CSV data.

Ddevvansh1997

first iteration on site

This example presents a multi-line chart built with React and SVG, rendering data through the D3.js library (version 7.8.2). It visualizes multiple series over time, using D3's scales, axes, and line interpolation to map values. The chart supports interactive hover effects, including a tooltip and a Voronoi overlay. The code imports specific functions from D3, such as `select`, `range`, and `curveLinear`, to construct the visualization.

JJesper Martinsson

HTML Starter

This example shows a horizontal bar chart of population by country using a small CSV dataset. The code loads data with `d3.csv`, scales the population values, and renders SVG rectangles using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. It uses `axisLeft` and `axisBottom` for tick marks, with a steelblue fill for bars. D3 v6 is imported from the npm package, and the chart is built imperatively by appending elements to an SVG container.

Nnouralkhoury