Skip to main content
SimilarExport ZIP
100%

Fork of Activity6_Question1_2

✓ Published0🌍 Public
CChandra Prakash Reddy Kalwakolu
Last edited Apr 11, 2024
Created on Apr 10, 2024

This bar chart displays the top 20 countries by population in 2010, using horizontal bars ordered by country name. The React app loads CSV data remotely, processes it with `d3.csv`, and renders SVG marks via `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The chart includes axis components with tick formatting using `d3.format` to abbreviate large numbers, while native SVG `<title>` elements provide tooltips. The visualization demonstrates reusable React components for axes and marks, with styling applied through CSS classes.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 6_Question1 1.2

This bar chart displays the population of the top 20 countries in 2010, ranked and sorted by country. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data to an SVG canvas, rendering bars via custom `Marks`, `AxisBottom`, and `AxisLeft` components. The data is fetched from a CSV using `d3.csv` and formatted with `d3.format` to abbreviate large numbers. Styling includes custom tick lines, fill colors, and a Poppins font.

HHarshita Vairagade
94% match
Loading thumbnail…

Activity 6_Question2

This bar chart displays the population of the top 20 countries in 2010, ordered along the y-axis with horizontal red bars extending along the x-axis. The visualization loads CSV data from a GitHub repository, slices the first 20 entries, and renders them using React with SVG. It employs D3 v5’s `scaleBand` and `scaleLinear` for axes, and custom components (`AxisBottom`, `AxisLeft`, `Marks`) to generate ticks, labels, and rectangles. A hover tooltip shows the formatted population value via a `<title>` element.

Ccharishmakalyanapu@gmail.com
94% match
Loading thumbnail…

Fork of Activity6_Question1_2

This horizontal bar chart displays the populations of 20 countries for the year 2010, sorted by country name. The viz uses React with D3.js v5, importing `scaleBand`, `scaleLinear`, and `format` from the D3 library. The data is fetched as a CSV from a GitHub repository via D3’s `csv` function. The chart renders as an SVG, with bars colored orange, blue tick lines, and tooltips showing formatted population values (e.g., "1.23B").

CChandra Prakash Reddy Kalwakolu
94% match
Loading thumbnail…

Activity6_Question2

This bar chart displays the top 20 countries by population in 2010, using a horizontal layout with red bars scaled linearly from zero to the maximum value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG rectangles for the marks. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values converted from thousands. Axes are custom React components, and hover tooltips show the formatted population using D3’s `format` with SI prefixes.

Kkartheekgrpt@gmail.com
93% match
Loading thumbnail…

Fork of activity 6_Task 1_Question 2

This example shows a horizontal bar chart of the top 20 countries by population in 2010, sorted in descending order. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning bars. The code imports d3.csv to load data from a GitHub-hosted CSV file, and d3.format to abbreviate axis tick labels (e.g., “B” for billions). Hovering over a bar reveals a tooltip via the native SVG <title> element, and the chart includes styled axes with blue tick lines and green bars.

VVijay Sheru
93% match
Loading thumbnail…

Fork of Activity6_Question1.1

This visualization presents a horizontal bar chart showing the population of various countries in the year 2000. The chart displays the top 10 countries by population, with the data loaded from a CSV file using d3.csv. The visualization is built with React and D3 v5, using scaleBand and scaleLinear to create the layout, while SVG rectangles render the bars. Axes are constructed using custom React components, and a d3 format function converts large numbers into abbreviated labels like "B" for billions.

Mmaneeshraja47@gmail.com
93% match
Loading thumbnail…

Fork of Activity 6_Question1b

This bar chart displays the population of 20 countries in 2010, ordered along the vertical axis with horizontal bars extending to represent each country’s population. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars rendered as SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, and axis ticks are formatted with `d3.format` to abbreviate large numbers (e.g., converting billions).

Aanusha.chilkamarri26@gmail.com
93% match
Loading thumbnail…

Fork of Activity6 Q_1.2

This bar chart displays the population of up to twenty countries for 2010. The React application uses d3’s `scaleBand` and `scaleLinear` to map country names and population values to screen positions. SVG rectangles, defined in the `Marks` component, render each bar, with hovering revealing a tooltip formatted by d3’s `format` function. The chart’s axes are drawn from the custom `AxisBottom` and `AxisLeft` components, while data is loaded asynchronously from a CSV file using d3’s `csv` method.

Bbhavya.kanyadara@gmail.com
93% match