Skip to main content
SimilarExport ZIP
100%

Fork of Task8-task1

✓ Published1🌍 Public
Sshraehithareddy@gmail.com
Last edited Apr 14, 2024
Created on Apr 14, 2024
Forked from Task8

This bar chart displays the population of countries in 2020, ranked by country name. The visualization renders horizontal bars using React and SVG, with D3 v5's `scaleBand` and `scaleLinear` mapping country names and population values to screen coordinates. The chart includes custom axis components (`AxisBottom`, `AxisLeft`) and bars (`Marks`) that display tooltips on hover. Data is loaded from a CSV via D3's `csv` function, and the population values are multiplied by 1000 for display. The chart is styled with Poppins typography and uses a green color for the bars.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

https://vizhub.com/drbagwell/cfc6aaba08b54a598475e867bcc8fa21

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Task8_Q1.2

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by name along the y-axis with population magnitudes extending along the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis and `scaleLinear` for the numeric domain, rendering SVG rectangles via the `Marks` component. The data loads from an external CSV using D3’s `csv` method, and axis ticks are formatted with `format('.2s')` to abbreviate large numbers, with tooltips showing exact values.

Sshraehithareddy@gmail.com
94% match
Loading thumbnail…

Fork of Task8-Q1.2

This example visualizes a bar chart of population data for the top 20 countries, using data from a GitHub-hosted CSV. The bars are rendered as SVG rectangles, with green fills and blue tick lines on the axes. It is built with React and D3 v5, using the `d3.csv` parser for data loading and custom components (`AxisBottom`, `AxisLeft`, `Marks`) for rendering. The chart includes a tooltip on each bar that shows the population value in thousands.

Sshraehithareddy@gmail.com
93% match
Loading thumbnail…

Fork of Fork of Task 8 Q1-2

This bar chart displays the population of 20 countries in 2010, rendered as an SVG using React and D3 v5. The data is loaded from a remote CSV file and visualized with horizontal bars, where country names appear on the y-axis and population values on the x-axis. The chart uses D3's `scaleBand` and `scaleLinear` for axis scaling, and `format` to abbreviate large numbers. Interactive tooltips show the exact population value on hover, while the axis ticks and labels are styled with custom CSS.

Vvchittimadha@gmail.com
93% match
Loading thumbnail…

Fork of Task8_Q1.1

This horizontal bar chart displays the top 10 countries by population in the year 2000, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data from a CSV file loaded via `d3.csv`. The SVG renders axes through custom `AxisBottom` and `AxisLeft` components, while `Marks` draws green rectangles with tooltips formatted using `d3.format`. Data comes from a GitHub-hosted CSV, with axis labels styled via CSS classes.

Sshraehithareddy@gmail.com
93% match
Loading thumbnail…

Fork of Fork of Fork of Task 8 Q1-2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name with a tooltip on each bar showing the formatted population value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate large numbers. Data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and the SVG renders axes with custom `AxisBottom` and `AxisLeft` components.

Vvchittimadha@gmail.com
92% match
Loading thumbnail…

Fork of Task 1

This chart displays the 2020 population of 30 countries as horizontal bars, scaled linearly by population and sorted by country name. The visualization uses React components with D3 scales (d3.scaleBand, d3.scaleLinear) to position and size SVG rectangles, while D3’s format function converts large numbers to billions (e.g., “B” suffix). Axes are custom React components drawing ticks and labels, with blue tick lines and light green bars. Population data is loaded as CSV from GitHub, processed in useData hook, and supports hover tooltips via SVG title elements.

AAbhinay Peeta
92% match
Loading thumbnail…

Fork of Activity 6_Task 1

This horizontal bar chart displays the 2020 populations of up to 30 countries, with bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses React and D3 v5, leveraging `scaleBand` and `scaleLinear` to map data, SVG rectangles for the marks, and axis components that render ticks and labels. Population values are formatted using D3’s `format` function, converting large numbers to compact “B” (billion) notation for tick labels and tooltips. Data is loaded from a remote CSV file via `d3.csv`.

Ppraneeth.d555@gmail.com
92% match
Loading thumbnail…

Fork of Activity8_Task1_DV

This example presents a horizontal bar chart ranking the populations of 30 countries in 2020, using green bars to encode the population values along the x-axis, with country names on the y-axis. Written in React with D3 version 5, the code defines reusable components for axes and marks, leveraging `d3.scaleBand`, `d3.scaleLinear`, and `d3.max`. Data is loaded from a CSV file via the d3 `csv` function, and the rendering uses SVG `rect` elements. The chart includes axis labels, tick marks, and a tooltip showing abbreviated population values.

Llikithabaddam@my.unt.edu
92% match