Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Jan 12, 2023

Created on Jan 12, 2023

This example shows a bar chart ranking Nobel Prize counts by country, using a static dataset of ten nations with the United States leading at 336 prizes. The visualization is rendered as SVG via D3 v7, with `d3.scaleBand` positioning bars along the x-axis and `d3.scaleLinear` mapping values to heights on the y-axis. Axis generation relies on `d3.axisBottom` and `d3.axisLeft`. The code demonstrates a data join with `.join()` to create rectangles, and includes a filter for zero values, though no interactive behavior beyond the initial rendering is implemented.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

80% match

Loading thumbnail…

D3 barchart example with the join() method

This D3 bar chart example displays Nobel Prize winner counts by country, filtering out zero values and initially showing all nations before updating to display only the first three. The visualization uses D3 version 7.8.5 with SVG rendering, applying the `join()` method on a selection to handle the incremental update of bar elements. The code demonstrates scaleBand and scaleLinear for axes, custom axis styling, and programmatic data filtering that triggers a second chart update.

AAxVa 🐍 💪

79% match

Loading thumbnail…

Fork of D3 circle barchart

A circular barcode chart displays Nobel Prize winners from 1901 to 1905, grouped by year on the x-axis and ranked by category on the y-axis. Each winner appears as a colored circle, with colors mapping to five prize categories via the D3 `schemeCategory10` scale. The SVG visualization uses `d3.group` to nest winners by year and `d3.scaleBand` for positioning, with an interactive axis and legend built through D3’s data join methods. The code relies on D3 v7 and renders the dataset embedded in the script.

NNita

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

78% match

Loading thumbnail…

Fork of D3 Starter

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.

Mmarcob896

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

76% match

Loading thumbnail…

Fork of D3 Starter

This bar chart visualizes the popularity scores of 120 athletes, sorted in descending order, with truncated tick labels and a sampled axis to manage the dense categorical axis. Built with D3 v7, it loads CSV data via `d3.csv` and `d3.autoType`, then uses `d3.scaleBand` and `d3.scaleLinear` to map names and scores. The SVG output is rendered using `d3.select`, `join`, and axis generators like `d3.axisBottom` and `d3.axisLeft`. Tooltips are added via SVG `<title>` elements, and the chart includes clear axis titles and a main heading.

Ssarasaketh3@gmail.com

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

75% match