Skip to main content
SimilarExport ZIP
100%

Data Visualization with D3

✓ Published0🌍 Public
Ssvensonneveld
Last edited Feb 26, 2020
Created on Feb 26, 2020
Forked from HTML Starter

This example displays a bar chart of categorical data from a CSV file, comparing numeric values across named categories. The visualization uses an SVG canvas with axes, mapping the data's numeric values to horizontal bar lengths and category names to vertical positions. The implementation relies on D3 v5 utilities for data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis generation with `axisLeft` and `axisBottom`, while the chart is rendered as SVG rectangles within a React-based HTML page.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart

This bar chart displays categorical data from a CSV file, mapping values to vertical bars within an SVG container. The example uses D3 v6’s `select` and `csv` methods to load and parse the external dataset, while the SVG’s width and height attributes are read to define the chart’s dimensions. Currently, the code logs the parsed data to the browser’s developer console but does not render any bars, serving as a minimal starting point for a React-based visualization.

SShirish Kandra
85% match
Loading thumbnail…

let's make a bar chart.js

This example displays a horizontal bar chart mapping categorical country labels to numeric values from a CSV file. The visualization uses D3.js v5 APIs including `scaleLinear` for the value axis and `scaleBand` for the country axis, with SVG rectangles rendered inside a 960×500 canvas. The data is loaded asynchronously via `csv`, and the chart is generated entirely from the provided data.csv dataset, showing one bar per country with widths proportional to the parsed value field.

HHaifan Li
85% match
Loading thumbnail…

D3.js Bar Chart Example

This D3.js example shows a straightforward bar chart of categorical data with axes and labels, visualizing values for five categories (A through E). The visualization renders as an SVG, using D3 v6's modular imports including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to map the dataset to bar positions and heights. The chart reads its data from a CSV file via `d3.csv`, converting the population column to numeric values, while the styling uses steelblue fills for the bars.

BBhavanaGIrni
85% match
Loading thumbnail…

csv using d3

This example displays a bar chart of categorical data from a CSV file, mapping names to numbers. It loads D3 v6 via UNPKG and an external CSV, parsing the data with `d3.csv` and `+` conversion. The chart uses `d3.scaleBand` for the y-axis and `d3.scaleLinear` with `d3.max` for the x-axis, rendered entirely as SVG elements. `d3.axisLeft` and `d3.axisBottom` generate the axes, while D3 selection API appends the rectangles.

RRITUZZ
83% match
Loading thumbnail…

Bar Chart

A bar chart displays categorical data as vertical bars, with height encoding numeric values. The visualization is built with React and rendered as SVG, using D3 v7's `select` and `attr` methods to configure the chart's width and height directly from the SVG element. The data is loaded from an external CSV file, and the chart uses a fixed 960x500 pixel viewport for consistent presentation.

BBenjamin Gorman
82% match
Loading thumbnail…

DATA WEAVING

A horizontal bar chart encodes five names from a CSV as categories and their numeric values as bar lengths, rendered on a pink SVG canvas. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, and `axisLeft` to position the bars, with equivalent `axisBottom` for the numeric scale. Bars are drawn as rectangles filled in steelblue, and each bar’s width is proportional to the parsed numeric field from the data file. The chart is generated through D3’s selection and data-binding methods, attaching SVG elements based on the loaded CSV.

Ssarahdays
82% match
Loading thumbnail…

Untitled

This example shows a basic bar chart comparing categorical names against numeric amounts. The chart uses SVG rendering with steel-blue bars and displays both x and y axes. The code loads data from a CSV file called "amounts.csv", converts the amount values to numbers, and uses D3 v6 scales including `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The bars are appended as SVG `rect` elements, with axes generated using `d3.axisBottom` and `d3.axisLeft`. The visualization is built within a React framework context, though the rendering logic itself is plain D3.

HHieuVu179
82% match
Loading thumbnail…

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

JJack Elsey
82% match