Skip to main content
SimilarExport ZIP
100%

Fork of Bar Chart with Highlighting

✓ Published0🌍 Public
XXiaoyu Su
Last edited Feb 10, 2021
Created on Feb 10, 2021

This fork of a bar chart visualizes the populations of the world’s most populous countries from 2018 data. It uses D3 v6 to render horizontal bars colored by population size, with a tooltip that appears on mouseover. The chart is built with `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and uses `selectAll` to draw the rectangles. Data is loaded from a CSV file and processed to convert population values, which are then displayed alongside axes and a title.

AI-generated description

This is my code after following a video tutorial by Curran Kelleher.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar Chart with Highlighting

This bar chart displays the most populous countries in 2018, using a horizontal layout with color-coded bars to distinguish population magnitude. Built with D3 v6, it employs `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisLeft` and `d3.axisBottom` for axes, and CSV data loaded via `d3.csv`. Interactive highlighting occurs through mouseover events that adjust bar opacity and show a tooltip text element.

KK V VINITHA
90% match
Loading thumbnail…

Fork of Bar Chart with Highlighting Ware

This bar chart displays the populations of the ten most populous countries, using color to highlight ranges like those exceeding one billion. Built with D3 v6, it loads data from a CSV file and renders bars with an SVG canvas, including axes and hover tooltips that reveal exact values. The code uses d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom for chart decorations.

BBolarinwa Omoware
89% match
Loading thumbnail…

Fork of Lets make a bar chart

This horizontal bar chart displays the populations of the world's most populous countries, using D3 v7 to render the visualization as an SVG. It reads data from a CSV file and scales the population values by a factor of 1000. The chart employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis country categories, and uses the `axisLeft` and `axisBottom` functions to draw the axes, with steelblue rectangles for bars.

EElMITHOS
88% match
Loading thumbnail…

Fork of Making a Bar Chart

This fork of a D3 bar chart displays the population of the ten most populous countries, based on 2018 estimates from the United Nations’ World Population Prospects 2017. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles, with axes generated by `axisLeft` and `axisBottom`. Data is loaded from a CSV file via `d3.csv`, and each population value is multiplied by 1000 to reflect actual figures. The chart renders purely as SVG, with steelblue bars.

AAustin Krauss
87% match
Loading thumbnail…

Fork of Making a Bar Chart

A fork of "Making a Bar Chart" visualizes the 2018 population estimates for the top ten most populous countries, using a horizontal bar chart with a linear x-axis and a banded y-axis. The D3 v5 code loads data from a CSV file and applies custom axis formatting, converting large numbers to abbreviated labels. It uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with the rendering output as SVG.

Jjuanmy400
87% match
Loading thumbnail…

Fork of barGraph

This bar chart displays the 2022 population for countries worldwide, with bar height mapped to population values and blue circles marking each data point. Users can re-sort the countries in ascending or descending order via two buttons. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, `transition()` for animated updates, and `mouseover` events to show population details in a tooltip. Data comes from a CSV file containing population figures across multiple decades. The SVG rendering includes rotated country labels for readability.

Ppatricknicholas27@gmail.com
87% match
Loading thumbnail…

Fork of Fork of HTML Starter

This bar chart displays country populations with a mouseover effect that highlights the bar in red with a blue stroke and displays a text label showing the country name and formatted population (e.g., "China has Population of 1.42B"). The visualization uses D3 v6 APIs including `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and `select` for interactivity. Data loads from a CSV via `d3.csv`, with populations multiplied by 1000, and renders as SVG rectangles sized from the scales.

HHaowenWeiJohn
87% match
Loading thumbnail…

Fork of Fork of Making a Bar Chart

This bar chart displays the populations of the world’s ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization encodes each country’s population as the length of a horizontal bar, sorted by value, with a linear scale on the x-axis and a band scale on the y-axis. Built with D3 v5, the code loads data from a CSV file via `d3.csv`, then renders SVG rectangles using `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. The data is explicitly parsed into numeric population values before rendering.

Jjerry691
87% match