Skip to main content
SimilarExport ZIP
100%

Making a pie chart!

✓ Published1🌍 Public
MMelina
Last edited Jun 13, 2020
Created on Jun 13, 2020

This example demonstrates how to create a bar chart using D3.js, rendering population data for ten countries as an SVG. The chart shows each country's population as a horizontal bar, with the x-axis scaled linearly and the y-axis using a band scale for categorical labels. The code utilizes `d3.csv` to load data from a local file, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisLeft` and `d3.axisBottom` for axes. The rendering process involves appending rectangle elements to the SVG, with widths proportional to population values.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a simple, horizontal bar chart using D3 v5 and SVG. It displays population data for ten countries, with bars sized proportionally to each nation’s population in thousands. The code uses `d3.csv` to load the data, then applies `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position and size the rectangles. The chart is rendered entirely with SVG `<rect>` elements, with the population values converted to numbers before scaling.

Jjerz-0788
87% match
Loading thumbnail…

Making a Bar Chart

This example produces a bar chart using D3.js, displaying the population of ten countries. D3’s `scaleLinear` maps population values to horizontal bar widths, while `scaleBand` positions each bar vertically by country name, with `bandwidth()` setting bar height. The visualization is rendered as SVG, generated by appending rectangles within an `svg` element. Data is loaded from a local CSV file, with population values converted to numbers before the chart is drawn.

YYang Shun Yu
87% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population counts for ten countries, with bars rendered as SVG rectangles and a categorical y-axis labeling each nation. The visualization relies on D3 v5 utilities including `csv` for parsing the `data.csv` file, `scaleLinear` and `scaleBand` for mapping population values and country names to pixel positions, and `axisLeft` for generating the country labels. Data values are converted from thousands to full numbers before rendering, and bars are styled with a steelblue fill.

Ccelesteleclezio
87% match
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population data for ten countries, with each bar’s length proportional to the population value. The chart uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for tick marks. Data is loaded from a CSV file via `d3.csv`, with population values converted from thousands. Bars are rendered as SVG `rect` elements, styled with steelblue fill, within an SVG canvas.

BbeauMarko
86% match
Loading thumbnail…

Let's make a bar chart

This example displays a horizontal bar chart of population data for ten countries, using bar length to represent each value. The chart renders as SVG and is built with D3.js v5, employing `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and generate axes. Rectangles are appended via data joins, with a pink fill defined in CSS. The population values are read from a CSV file and scaled by one thousand before rendering.

Yyukozome
86% match
Loading thumbnail…

Making a Bar Chart

This example shows the population of ten countries as horizontal bars, with bar length representing population and each bar labeled by country name. It uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, loading data from an external CSV file with d3.csv. The SVG rectangles are appended and sized directly through D3’s data join, with population values converted from thousands to raw counts before rendering.

BBrad Johnson
86% match
Loading thumbnail…

Making a bar chart!

This horizontal bar chart displays population figures for ten countries, using the D3 v7 library to render an SVG graphic. The code imports specific functions including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 module. It loads data from a local CSV file, multiplies the population values by 1000, and plots ranked bars with steelblue rectangles. Axis labels and tick marks are generated through D3’s SVG-based axis APIs, with margins surrounding the plot area.

Mmikeferri
86% match
Loading thumbnail…

Making a Bar Chart with D3

This example shows a horizontal bar chart of population figures for ten countries, ordered from largest to smallest. The visualization is built with D3 v5, using `d3.csv` to load the data, `scaleLinear` and `scaleBand` for the axes, and `axisLeft` and `axisBottom` to render tick marks. Population values are read as strings from the CSV and converted to numbers, then multiplied by 1000 before being mapped to bar widths. The SVG is styled with a steelblue fill for rectangles.

WWhatTheFork85
86% match