Skip to main content
SimilarExport ZIP
100%

Activity 6 task 1

✓ Published0🌍 Public
Rrohitpotluri@my.unt.edu
Last edited Oct 25, 2024
Created on Oct 25, 2024
Forked from Hello VizHub

This D3 v5 bar chart displays the population of ten countries in the year 2000, with a horizontal bar for each country. The visualization uses a linear scale for population and a band scale for country names, with bars colored green and tick marks in blue. Data is loaded from a CSV file using the `d3.csv` function and parsed to convert the population values. The React framework renders the SVG components, with separate modules for the bottom axis, left axis, and the marks themselves.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity-6 Task_1

This visualization presents a horizontal bar chart depicting the population of ten countries in the year 2000. The chart uses a green fill for the bars, with blue axis lines and gray tick labels. The data is loaded from a remote CSV file using d3.csv and parsed with a custom row function that multiplies the population value by 1000. The chart is rendered using React, with D3 v5 scales (`scaleLinear` and `scaleBand`) mapping the data to SVG rectangles, and the axes are drawn with `d3.axisBottom` and `d3.axisLeft` calls on a `<g>` element.

Aadityatrip9899@gmail.com
93% match
Loading thumbnail…

Activity6_q1

This D3 bar chart displays the population of ten countries for the year 2000, using horizontal bars sorted by country name. The visualization loads CSV data via `d3.csv` from a GitHub repository, then renders an SVG with React, applying a linear scale to the population axis and a band scale to the categorical country axis. Bars are styled with a light green fill, and tooltips, formatted with `d3.format` to show values in billions, appear on hover.

Jjahnavigummadi@my.unt.edu
93% match
Loading thumbnail…

Activity 6_Task 1

This bar chart displays the population of ten countries for the year 2000, with country names on the y-axis and population values on the x-axis. The visualization is built with React, D3 v5, and SVG, using `scaleBand` and `scaleLinear` for positioning. Data is loaded from a remote CSV file, and axis tick labels are formatted using D3’s `format` function to abbreviate large numbers with "B" for billions.

LLakshmiPrasannaValdas@my.unt.edu
93% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by country name. Built with React and D3 v5, it renders as an SVG and loads CSV data from a GitHub repository. The visualization uses `scaleBand` and `scaleLinear` for positioning, with axes generated by custom React components and D3’s `format` for abbreviated tick labels.

Cchinnivikramnunna@gmail.com
93% match
Loading thumbnail…

Activity 6 task 1

This visualization displays the populations of 20 countries in 2010 as a horizontal bar chart. Using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, the React-rendered SVG bars are color-coded green with a tooltip showing the formatted population value. The code loads CSV data via d3.csv, applies a custom tick format that converts gigabytes to billions, and includes axis components for labeled ticks.

Vvenkatabhaskaratetali@my.unt.edu
93% match
Loading thumbnail…

Activity 6 task 1

This example displays a horizontal bar chart ranking the populations of ten countries for the year 2000. The visualization uses React to render SVG elements, with D3 v5 APIs including `scaleBand`, `scaleLinear`, `csv`, and `format` to load data, position bars, and format tick labels. Country names align on the left axis while population values appear on the bottom axis, and each bar includes a native SVG tooltip showing the formatted population value.

BBhavana Sharma
93% match
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 10 countries in the year 2000, ordered along a vertical band scale with horizontal bars extending from a shared origin. The visualization uses React with d3-scale’s `scaleBand` and `scaleLinear` to map country names and population values, while custom React components render SVG axes and marks. Population values are loaded from a CSV file, scaled using d3-format’s `format('.2s')` to abbreviate tick labels (e.g., ’B’ for billions), and exposed via native SVG `<title>` tooltips. Styling applies blue tick lines, light green bars, and a Poppins font.

Ggsdontineni518@gmail.com
93% match
Loading thumbnail…

Activity 6 Task 1.1

This bar chart displays the population of ten countries in the year 2000, with countries listed on the vertical axis and population on the horizontal axis. The visualization uses React with D3 v5 APIs including `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` for fetching data from a GitHub repository. SVG rectangles render the marks, with axis ticks and labels styled through CSS. The chart sorts and slices the loaded dataset to show the top ten most populous countries.

BBamanGayathri
93% match