Skip to main content
SimilarExport ZIP
100%

My bar chart

✓ Published0🌍 Public
PPiotrekW2
Last edited Feb 28, 2019
Created on Feb 28, 2019

This example shows a horizontal bar chart of national populations with bars proportional to each country’s population value. The chart renders as SVG rectangles positioned within a fixed 960-by-500 viewport using D3 v5’s `select`, `append`, and `scaleLinear` APIs. Population data loads from a CSV via `d3.csv`, with values multiplied by 1,000 before mapping through a linear scale. The underlying framework emphasizes fundamental DOM manipulation techniques demonstrated in the accompanying video.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart Example

This example displays a bar chart of country populations, with each bar’s width fixed at 300 and height at 400 pixels. The chart is rendered as SVG elements using D3 v6, drawing rectangles via `svg.selectAll('rect').data(data).enter().append('rect')`. Population values are loaded from a CSV file using `d3.csv` and converted to numbers by multiplying by 1000. The current code only appends the rectangles without encoding data into visual attributes, leaving the bars uniform rather than proportional to population.

Qquiqdome
90% match
Loading thumbnail…

Making a bar chart

This example shows a bar chart of country populations, with each bar’s width mapped to population size using a d3.scaleLinear domain from zero to the maximum value. The chart renders as SVG rectangles appended to a 960×500 pixel container, though bar dimensions are fixed at 300×300 pixels regardless of data. The code loads data from a CSV file via d3.csv, parses the population column by multiplying it by 1000, and uses d3.select, d3.max, and d3.scaleLinear from D3 v5.

NNirav L. Lekinwala
90% match
Loading thumbnail…

Bar Chart Practice

This example displays a horizontal bar chart of national populations using data from a CSV file, rendered as SVG rectangles. The code leverages D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to row positions. Population numbers are multiplied by 1000 to reflect actual figures. The chart is styled with steelblue bars and a left margin that accommodates country labels.

Ttgrex6
90% match
Loading thumbnail…

Making a Bar Chart

This example demonstrates a basic bar chart of country populations using D3.js v5 with SVG rendering. The visualization maps each country from a CSV data file to a rectangular bar, though the bars are uniformly sized rather than scaled to population values. The code imports `select`, `csv`, and `scaleLinear` from D3, loads the data asynchronously, converts population strings to numbers, and appends rectangles to an SVG container. The `scaleLinear` function is instantiated but not fully configured, and the bars are fixed at 300 by 300 pixels each.

JJSR2000
89% match
Loading thumbnail…

Making a bar chart

This example demonstrates a basic bar chart of country populations, with each country represented by a fixed-size rectangle positioned sequentially from the top-left of the SVG canvas. The code loads population data from a CSV file using `d3.csv`, converts the population values to numbers by multiplying them by 1000, and renders the rectangles with `d3.select` and `selection.append`. While the bars are currently all the same width and height, the example illustrates the core pattern of binding data to SVG elements in D3 v5.

Mmengqing
89% match
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population by country, using SVG rectangles to encode values. The chart arranges countries along a band scale (d3.scaleBand) and maps populations to a linear scale (d3.scaleLinear), with axes generated via d3.axisLeft and d3.axisBottom. Data is loaded from a CSV using d3.csv, and the code explicitly sets dimensions and margins. The visualization demonstrates reusable D3 v5 API patterns such as select, max, and scaleBand’s padding, with styling applied through CSS.

Kkatrinrodkina
89% match
Loading thumbnail…

Making a Bar Chart

This example displays a static bar chart of country populations, with each bar’s height corresponding to the population value from a CSV file. The chart uses D3 v5’s `select` and `csv` methods to load the data and bind it to SVG `rect` elements. The population values are converted from thousands to raw numbers using unary plus operators before rendering. The SVG container is sized at 960 by 500 pixels, and the page includes minimal CSS to remove margins.

Sshallowater
89% match
Loading thumbnail…

making bar chart

This example shows a horizontal bar chart of country populations using D3.js v5. Rectangles are appended to an SVG canvas, with each bar’s width mapped from population values (converted from strings to numbers and scaled by 1000) via `d3.scaleLinear` and a domain from 0 to the maximum population. The chart loads CSV data with `d3.csv` and uses `d3.max` to determine the scale domain. Bars are fixed at a height of 400 pixels, causing overlap, as the y-scale code is commented out.

Ttayyabanisar
89% match