Skip to main content
SimilarExport ZIP
100%

Activity8-Task1

✓ Published0🌍 Public
Ssirichandana017@gmail.com
Last edited Apr 9, 2024
Created on Apr 9, 2024
Forked from HTML Starter

This horizontal bar chart displays the population of ten countries in the year 2000, using a green bar for each nation with a tooltip showing the exact value. The visualization is built with React and D3 v5, employing a `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rendering for all marks. Population data is loaded from a CSV file and formatted using D3’s `format` function, converting values from millions to billions with a custom tick label. Axis components are custom React functions that generate tick marks and labels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity8-Task1.1

This horizontal bar chart shows the population of ten countries in the year 2000, sorted by country name. The visualization uses React to render SVG elements, with D3.js v5 functions like `scaleBand`, `scaleLinear`, and `format` for positioning and tick labeling. Data is loaded from a remote CSV file using D3's `csv` function. The chart includes blue axis tick lines, green bars, and tooltips that display the population value when hovering over a bar.

Sshaiksajidali
95% match
Loading thumbnail…

Activity8-Task1

This horizontal bar chart displays the population of the top 20 countries in 2010, using green bars sorted by country name. Built with React and rendered as SVG, the visualization leverages D3 v5 functions including `scaleBand` and `scaleLinear` for axes, with CSV data loaded via `d3.csv`. Tooltips formatted with `d3.format` show abbreviated population values on hover, while custom Axis components handle tick rendering.

Ssirichandana017@gmail.com
95% match
Loading thumbnail…

Activity 8 Task 1

A horizontal bar chart displays the populations of ten countries for the year 2000, sorted by country name. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, while custom `AxisBottom` and `AxisLeft` components render SVG axis ticks and labels. Population values are loaded from a remote CSV file and formatted using D3's `format` function, with tooltips provided by SVG `<title>` elements. The chart highlights the green bars and blue axis ticks against a clean background.

WWilliam Nsambu
95% match
Loading thumbnail…

activity 6_Task 1.1

A horizontal bar chart displays the population of ten countries in the year 2000, sorted by country name along the y-axis and population magnitude along the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, with SVG `<rect>` marks rendered from CSV data loaded via `d3.csv`. Green bars include tooltips, and axes are annotated with a custom formatter that converts SI units like "G" to "B" for billions.

Jjtulasi05@gmail.com
94% match
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays population data for ten countries in the year 2000. Bars are rendered as SVG rectangles using React components, with scales from d3.scaleBand and d3.scaleLinear positioning and sizing each mark. Axis components generate tick marks and labels, while a tooltip format function converts large numbers into abbreviated strings using d3.format. Data is loaded asynchronously via d3.csv from a GitHub gist.

Vvidiyalasahithi1999@gmail.com
94% 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
94% match
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
94% match
Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the population of the top 10 countries in the year 2000. The visualization uses D3.js scales and formatting functions to map country names and population values to the layout. Built with React, the example loads data from a remote CSV file and renders the chart using SVG. Interactive tooltips are provided through the `<title>` elements on each bar, while D3's `scaleBand` and `scaleLinear` position the bars and axes.

Jjahnavigummadi@my.unt.edu
94% match