Skip to main content
SimilarExport ZIP
100%

Marcus' bar chart exercise

✓ Published1🌍 Public
Mms-aus
Last edited Aug 19, 2019
Created on Aug 19, 2019

This example shows the population of the 10 most populous cities as a horizontal bar chart, with city names on the y-axis and population counts on the x-axis. The visualization is rendered as an SVG using D3 v5, and the code imports specific modules (`select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`) from the D3 library. Population data is loaded from a local CSV file and converted from strings to numbers. The chart uses a band scale for the categorical axis and a linear scale for the quantitative axis, with axes generated via `axisLeft` and `axisBottom`. A pink background and steelblue bars style the output.

AI-generated description

Population of 10 most populous cities

MIT Licensed

Similar vizzes

Loading thumbnail…

Marcus' bar chart with axis formatting

This example shows a horizontal bar chart ranking the world’s 10 most populous cities by metro population, with formatted axis labels and gridlines. Data is loaded from a CSV file via `d3.csv`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map values, `d3.axisBottom` with a custom `.tickFormat` to abbreviate numbers (e.g., converting G to B), and `d3.axisLeft`. Bars are rendered as SVG `rect` elements with a pink background and steelblue fill.

Mms-aus
90% match
Loading thumbnail…

Marcus' bar chart with axis formatting

This example shows a horizontal bar chart ranking the world’s 10 most populous cities by metro population, with formatted axis labels and gridlines. Data is loaded from a CSV file via `d3.csv`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map values, `d3.axisBottom` with a custom `.tickFormat` to abbreviate numbers (e.g., converting G to B), and `d3.axisLeft`. Bars are rendered as SVG `rect` elements with a pink background and steelblue fill.

Mms-aus
90% match
Loading thumbnail…

Marcus' scatter plot #1

This visualization displays the populations of the world’s 10 most populous cities as a horizontal bar chart, with metro population on the x-axis and city names on the y-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes, with tick formatting via d3.format. Bars are drawn as SVG rectangles within a grouped element, and the chart includes custom labels for the title and axes, rendered with a pink background.

Mms-aus
89% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the ten most populous countries, with each bar’s length proportional to population and countries ordered along the y-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes, while `csv()` loads the data and `selectAll` appends SVG rectangles. Population values are multiplied by 1000, and the chart is rendered in an SVG canvas with steelblue bars.

Mmatthewfresh
80% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the ten most populous countries, with bars colored by country and labeled along a bottom axis. The chart uses D3.js scales (`scaleLinear`, `scaleBand`, `scaleOrdinal`) to map population values and country names, while `d3.axisLeft` and `d3.axisBottom` render the axes. Population data is loaded from a CSV file via `d3.csv`, multiplied by 1000 in the code, and rendered as SVG rectangles. The visualization highlights D3’s core data-binding and SVG generation workflow.

AAaron Guillen
80% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the ten most populous countries, using horizontal bars where length encodes the population value and the y-axis lists country names. The visualization is rendered as an SVG using D3 v7, with linear and band scales (`d3.scaleLinear`, `d3.scaleBand`) mapping the data. Axes are generated via `d3.axisLeft` and `d3.axisBottom`. Population data is loaded from a CSV file using `d3.csv`, with string values converted to numbers for scaling.

NNicoA
79% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the populations of the ten most populous countries, ordered from largest to smallest. It uses D3 v5 to load data from a CSV file and render the visualization as SVG. The code explicitly calls `scaleLinear` and `scaleBand` to create the x and y scales, `axisLeft` and `axisBottom` to generate the axes, and uses `select` to target the SVG element. The bars are colored steel blue via CSS, and the population values are transformed by multiplying by 1000 before rendering.

Mmp7090
79% match
Loading thumbnail…

Making a bar chart

This bar chart displays the population of the ten most populous countries, with countries on the vertical axis and population values on the horizontal axis. The visualization uses d3.csv to load data from a CSV file, d3.scaleLinear for the population scale, and d3.scaleBand for the categorical country axis. Rectangles are rendered in SVG, with axes generated via d3.axisLeft and d3.axisBottom. The chart applies a margin convention and transforms a group element to position the plot area, with bars styled using CSS fill.

RRobindj2000
79% match