Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published1🌍 Public

Last edited Jan 18, 2021

Created on Jan 18, 2021

This example shows a horizontal bar chart of the number of cases across several countries, with the data loaded from a CSV file. The bars display values in a compact format using D3's `format` with the `~s` specifier. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` and `d3.axisBottom` for the axes, all rendered as SVG. The code also applies margins, a title, and axis labels, with styling defined in a separate CSS file.

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

86% match

Loading thumbnail…

Fork of D3 Starter

A horizontal bar chart displays population figures for nine countries, sourced from an embedded CSV file. The bars render as SVG rectangles, with each country's population scaled linearly along the x-axis and country names positioned using a band scale on the y-axis. The code uses d3.csv to load the data, d3.scaleLinear for the width mapping, d3.scaleBand for categorical spacing, and d3.select to append the rectangles.

Mminaadel6600

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

84% match

Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter demonstrates a minimal bar chart that displays population data for several countries, sourced from a local CSV file. The visualization maps each country to a rectangle, with the height and width fixed while the data is read and logged. Built with d3.v7, the example uses `csv`, `scaleLinear`, `max`, and `select` APIs to parse data and prepare scales, though the rendered rectangles do not yet reflect the data values. The chart is drawn as SVG within a 960x500 canvas, with the data population values multiplied by 1000 during preprocessing.

SSudipta-15

84% match

Loading thumbnail…

Fork of D3 Starter

This bar chart displays country values using D3 v7, with each country represented as a vertical bar on an SVG canvas. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick rendering. Data comes from a static JavaScript array in `constants.js`. The chart includes rotated x-axis labels and an additional scrollbar implemented via a `foreignObject` element, though the scrollbar’s interaction is limited within the fixed-width SVG.

RRishav Nandi

83% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to build a basic bar chart using D3 version 7, showing monthly revenue data from a CSV file. The visualization maps months to a band scale on the x-axis and revenue amounts in millions to a linear scale on the y-axis, with grey bars and rotated x-axis labels. The code uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for scaling, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The chart is rendered as SVG within a fixed-width margin layout.

AAdan Rodriguez

83% match

Loading thumbnail…

Fork of D3 Starter

This example presents a bar chart of website engagement metrics from a CSV file, showing the number of views for each page path. The chart uses D3 version 7 to create a linear x-axis scale for view counts and a banded y-axis for page names. Users can toggle individual bars on and off using checkboxes rendered alongside a list of the data points. The visualization renders with SVG and derives its data dimensions from the imported `csv` and `scaleBand` functions.

Iindira-antgrvty

82% match

Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of country populations, reading from a CSV file with `d3.csv` and rendering rectangles with `d3.selectAll` and `data.join`. It uses D3 v7 within a plain HTML page, with data loaded asynchronously and converted to numbers. The visualization demonstrates basic data binding and SVG shape creation, though the rendered bars are all fixed at 300 by 300 pixels, so the chart does not reflect population values visually.

Vvoid-LSTM

82% match