Skip to main content
Log in
S

salwdata

@salwdata·8 public vizzes

Loading thumbnail…

Untitled

A bar chart displays population values for categorical X-axis entries, with bars extending upward from a baseline. The visualization uses D3 v5's `scaleBand` for the X axis, `scaleLinear` for the Y axis, and renders SVG rectangles with a steelblue fill. Data loads from a CSV file via `d3.csv`, with population values converted to thousands. Grid lines use `d3.axisBottom` and `d3.axisLeft` with custom tick formatting that abbreviates large numbers (e.g., "B" for billions), and the chart is built within a React-compatible HTML page.

Feb 18, 2020
Loading thumbnail…

Untitled

A bar chart displays population values for categorical X-axis entries, with bars extending upward from a baseline. The visualization uses D3 v5's `scaleBand` for the X axis, `scaleLinear` for the Y axis, and renders SVG rectangles with a steelblue fill. Data loads from a CSV file via `d3.csv`, with population values converted to thousands. Grid lines use `d3.axisBottom` and `d3.axisLeft` with custom tick formatting that abbreviates large numbers (e.g., "B" for billions), and the chart is built within a React-compatible HTML page.

Feb 18, 2020
Loading thumbnail…

Bar Chart

This bar chart displays population estimates for a set of countries, with vertical bars sized proportionally to each value. The visualization loads data from a CSV file, parsing and scaling the population numbers before rendering. Built with React and D3 v5, the chart uses `d3.scaleBand` for the x-axis categories and `d3.scaleLinear` for the y-axis, while `d3.axisBottom` and `d3.axisLeft` generate gridlines. The SVG rendering includes a flipped coordinate system to draw bars upward, with steelblue fills styled via CSS.

Feb 18, 2020
Loading thumbnail…

Bar Chart

This bar chart displays population values for a set of countries, with horizontal gridlines and labeled axes. The chart renders as an SVG using D3 v5 within a React-styled HTML page. It loads data from a CSV file, scales the Y-axis using `d3.scaleLinear` and the X-axis with `d3.scaleBand`, and draws bars via `d3.axisBottom` and `d3.axisLeft` for gridlines and tick formatting.

Feb 18, 2020
Loading thumbnail…

Untitled

This example shows a horizontal bar chart ranking the ten most populous countries in 2020, based on UN population estimates. The chart uses React to manage state and render the visualization, with d3.csv loading the data from a GitHub-hosted CSV file. The bars are drawn using JSX within a Marks component, while AxisBottom and AxisLeft handle the scales and tick marks. Population values are formatted in millions by multiplying the raw 2020 figure by 1000.

Feb 18, 2020
Loading thumbnail…

Bar Chart

This bar chart visualizes population data for various countries, with each bar’s height representing a country’s population in billions. The graphic renders as an SVG using React, with D3 v5’s `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.axisBottom` and `d3.axisLeft` for labeled grid lines. Data is loaded from a CSV file and transformed by multiplying values by 1000. The chart includes a flipped y-axis transform to draw bars upward, with steelblue styling and a light background.

Feb 18, 2020
Loading thumbnail…

Bar Chart

A bar chart displays population values for five countries, with each bar’s height corresponding to its data point. The visualization uses an SVG canvas with axes that include horizontal and vertical gridlines. The code employs D3 v5’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` to render ticks. Data is loaded from a CSV file, formatted with thousands separators, and drawn as steelblue rectangles.

Feb 18, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The code customizes axes with `axisLeft` and `axisBottom`, and loads data from a CSV file via `csv`. Each bar’s width is proportional to population, with values multiplied by 1000 in the data preprocessing step.

Feb 18, 2020