Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published0🌍 Public
MMinaTvkl
Last edited Oct 5, 2019
Created on Oct 5, 2019
Forked from Making a Bar Chart

This example displays a horizontal bar chart ranking star systems by their distance from Earth in light-years, using data from a local CSV file. The visualization is built with D3 v5, employing `scaleLinear` and `scaleBand` to map distances and star names to SVG rectangles. Axes are generated using `axisLeft` and `axisBottom`, while the bar widths are scaled proportionally to each distance value. The chart is rendered entirely as SVG elements within a 960 by 500 canvas.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making Bar chart with D3

A bar chart displays monthly values from a CSV file, using horizontal bars where length encodes value and vertical position encodes date. The visualization is built with D3 v5, using `scaleLinear` for the value axis, `scaleBand` for the categorical date axis, and `axisLeft`/`axisBottom` for tick marks. SVG rectangles are rendered from the loaded data, with axes simplified by removing domain and tick lines.

JJuan David Bolaños Rojas
80% match
Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a horizontal bar chart from CSV data using D3 v5 with SVG rendering. It shows population values for various countries, with each bar’s length scaled linearly and categorical labels positioned along the y-axis via `d3.scaleBand`. The code loads `data.csv`, formats population numbers, and renders axes using `d3.axisLeft` and `d3.axisBottom`, alongside rectangles styled with CSS. The visualization highlights the core workflow of data loading, scaling, and SVG element creation in D3.

DDaniel Weston
79% match
Loading thumbnail…

Making a Bar Chart

This example shows a bar chart built with D3.js version 5, where the vertical axis maps data values using a linear scale with rounded output coordinates. The chart’s height and width are read directly from the SVG element, and an array of ten generated data points is created using the d3.range function. The visualization is rendered as an SVG, with the y-axis scale defined through d3.scaleLinear and a d3.line object configured to position points based on the data values, though the actual bar drawing is not visible in the provided code.

NNita
79% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart that visualizes the population of various countries, sorted by data order. The chart uses an SVG canvas with a linear scale for population and a band scale for country names, mapping data from a CSV file. The code demonstrates a step-by-step approach to building the visualization, using D3 v5 APIs such as `select`, `scaleLinear`, `scaleBand`, and `csv`. Rectangles are appended to the SVG via the `.enter()` method, with their width and y-position based on the specified scales, and the visualization includes margins that are logged but not fully utilized in the layout.

AAsperge-Atomique
78% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart that visualizes the population of various countries, sorted by data order. The chart uses an SVG canvas with a linear scale for population and a band scale for country names, mapping data from a CSV file. The code demonstrates a step-by-step approach to building the visualization, using D3 v5 APIs such as `select`, `scaleLinear`, `scaleBand`, and `csv`. Rectangles are appended to the SVG via the `.enter()` method, with their width and y-position based on the specified scales, and the visualization includes margins that are logged but not fully utilized in the layout.

AAsperge-Atomique
78% match
Loading thumbnail…

Making a bar chart

This example demonstrates a horizontal bar chart comparing the area of major cities, using data loaded from a CSV file. The visualization positions each city along the y-axis and scales the bar lengths according to the area values. It relies on D3.js v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. The SVG rendering uses a purple fill for bars, which changes to a lighter shade on hover, with the chart area defined by explicit margins.

Vvladvaculin
78% match
Loading thumbnail…

Making a bar chart

This example demonstrates how to build a simple bar chart from a CSV file using D3 v5. The chart displays population data for several countries, with horizontal bars whose widths are proportional to each country’s population. The code uses `d3.csv`, `scaleLinear`, and `scaleBand` to map the data to SVG rectangles, while the rendering is done entirely with SVG elements in an HTML page. The data is loaded from `data.csv` and scaled by a factor of 1000 before being visualized.

EE.D.M.
78% match
Loading thumbnail…

Making a Bar Chart

This example shows a bar chart ranking the populations of 18 countries, with the data sourced from a DataHub CSV file. The chart uses D3 v5's `scaleBand` for the categorical country axis and `scaleLinear` for the continuous population axis, rendering purple rectangles in an SVG. The code includes data parsing with `csv` and population values converted to thousands for display. A simple "Hello World" text label is appended to the chart, while axes and labels are generated using the `axisBottom` and `axisLeft` functions.

Yyktan89
78% match