Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a bar graph

✓ Published0🌍 Public
MMatiasmedrano66
Last edited Dec 27, 2020
Created on Dec 27, 2020

This example displays a horizontal bar chart of country populations using SVG rectangles. It loads data from a local CSV file and renders each bar with D3 v5’s `scaleLinear` for widths and `scaleBand` for vertical positioning. The code imports `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` from the D3 module, fetches the CSV asynchronously, and appends `rect` elements to an SVG. The data values are multiplied by 1,000 to convert population figures.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let´s make a bar chart!

This example displays a horizontal bar chart ranking countries by population, using data from a local CSV file. The visualization encodes population values with bar widths and country names along the y-axis. Built with D3 v5, it uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to generate SVG elements. The bars are styled with steelblue fills, and axes are rendered with default tick formatting.

MMatiasmedrano66
91% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart displays country populations from a CSV file, sorted vertically from highest to lowest using D3.js v7. It renders SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`, with axes generated by `d3.axisLeft` and `d3.axisBottom`. The visualization imports specific D3 modules like `select`, `csv`, and `max` to load and process data.

Ssaivinay143
91% match
Loading thumbnail…

Fork of Let´s make a bar chart!

This fork of “Let’s make a bar chart!” displays a horizontal bar chart of country populations, with bars ordered alphabetically along the y-axis and population values on the x-axis. The visualization uses d3.csv to load the data, then builds scales with d3.scaleLinear and d3.scaleBand, rendering bars as SVG rectangles and adding axes via d3.axisLeft and d3.axisBottom. The chart applies a fixed margin layout and steelblue fill for the bars.

MMatiasmedrano66
90% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This example shows a horizontal bar graph of population by country using data from a CSV file. The bars are rendered as SVG rectangles in steel blue, with countries on the y-axis and population values on the x-axis. The code uses `d3.csv` to load the data, `d3.scaleLinear` for the x-scale, `d3.scaleBand` for the y-scale, and `d3.axisLeft` and `d3.axisBottom` to draw the axes. Population values are multiplied by 1000 before rendering.

AAishwarya Manjunath
90% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart of the world’s ten most populous countries, using population values from a CSV file. It renders SVG bars with a linear scale for population and a band scale for country names, adding axis labels via `axisLeft` and `axisBottom`. The code imports `select`, `csv`, `scaleLinear`, `scaleBand`, `max`, and the axis functions from D3 v7, and transforms the raw population numbers by multiplying by 1000 before drawing.

Vvegurusaiprathyusha
90% match
Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart displays population data for ten countries, with horizontal bars extending along a linear population scale and country names listed along the categorical axis. The visualization uses D3.js v7 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes. Population values from the CSV are multiplied by 1000, and bars are styled with a solid steelblue fill.

EEyeonly
89% match
Loading thumbnail…

Fork of Making a Bar Chart

This horizontal bar chart displays population figures for ten countries, with each bar’s length proportional to the population value from a CSV file. The visualization uses D3 v6’s `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis positioning, and SVG `rect` elements for bars. Data is loaded asynchronously via `d3.csv` and multiplied by 1000 before rendering. Axes are generated using `axisLeft` and `axisBottom`, with margins applied through a translated group element.

MMajaha21
89% match
Loading thumbnail…

Fork of Making a Bar Chart

This horizontal bar chart displays population figures for ten countries, with each bar’s length proportional to the population value from a CSV file. The visualization uses D3 v6’s `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis positioning, and SVG `rect` elements for bars. Data is loaded asynchronously via `d3.csv` and multiplied by 1000 before rendering. Axes are generated using `axisLeft` and `axisBottom`, with margins applied through a translated group element.

MMajaha21
89% match