Skip to main content
SimilarExport ZIP
100%

Fork of Act6_Q1.2

✓ Published0🌍 Public
Nnumitha
Last edited Apr 5, 2024
Created on Apr 5, 2024
Forked from Act6_Q1.1

This example shows the populations of the top 20 countries in 2010 as a horizontal bar chart. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with SVG rectangles rendered via React. Data is loaded from a CSV using D3’s `csv` parser and formatted with `format('.2s')`. The chart includes styled axes and tooltips that display each bar’s value.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ACT 6 Q1.1

This interactive bar chart displays the population figures for 20 countries in 2010, using a horizontal layout with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization loads data from a remote CSV file using `d3.csv` and renders SVG rectangles. The code leverages `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis, with formatted tick labels using `d3.format`.

Ppavithranamburi24@gmail.com
91% match
Loading thumbnail…

Fork of Activity6_q1

This example presents a horizontal bar chart comparing the populations of ten countries in the year 2000. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, with React rendering the SVG elements. Each bar includes a native `<title>` tooltip displaying the formatted population in billions (using `format('.2s')`). Data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted CSV file, and axes are generated by custom React components (`AxisBottom` and `AxisLeft`).

Aabjalshaik02@gmail.com
91% match
Loading thumbnail…

Fork of Fork of activity 6 q1.2

This visualization displays a horizontal bar chart of population data for the top 20 countries in 2010, sorted in descending order. The chart uses D3.js (v5) with React to render SVG rectangles, where bar length encodes population values and the y-axis lists country names. The code employs `scaleBand` and `scaleLinear` from D3 for axes, with data loaded from a CSV via `d3.csv`. Axis ticks are styled with yellow lines, and tooltips show formatted population values when hovering over bars.

RRakesh Yadav
91% match
Loading thumbnail…

Act6_Q1.2

A horizontal bar chart displays the populations of 20 countries for the year 2010, sorted vertically by country name. The visualization uses React with D3 v5, loading CSV data from a GitHub repository via d3.csv and rendering SVG bars. The chart employs scaleBand for the categorical y-axis and scaleLinear for the numeric x-axis, with population values formatted using d3.format and native SVG <title> elements providing tooltips.

Ggalijawaharnath@gmail.com
90% match
Loading thumbnail…

Fork of Activity6-1 Q1.2

A horizontal bar chart displays the 2010 population of 20 countries, with bars extending from a shared left axis. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` mapping country names and population values. Data loads asynchronously from a CSV file via D3’s `csv` function, and the x-axis labels are formatted with a SI prefix that converts gigabytes to billions.

Aaadesh.pranesh@gmail.com
90% match
Loading thumbnail…

Fork of act_6__2000

This bar chart displays the population of ten countries in the year 2000, ordered alphabetically by country name. It uses React with D3 v5 to render SVG bars, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and each bar includes a native SVG `<title>` element showing the population in billions as a tooltip.

Hhlmn4936@gmail.com
90% match
Loading thumbnail…

Fork of Fork of Activity 6

This example shows a horizontal bar chart of populations for twenty countries in 2010, using a bar’s length to encode the population value for each country. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG ticks and rectangles, with a tooltip showing the formatted population value on hover. Data is loaded as CSV with `d3.csv` from a GitHub repository and formatted using `d3.format`.

KKritin Kesav
90% match
Loading thumbnail…

Fork of Fork of Activty_6 T1

This bar chart visualizes the top 20 countries by population in 2010, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, rendering SVG rectangles with tooltips. The code imports data via `d3.csv` and applies custom tick formatting to abbreviate large numbers.

Pperamranji
90% match