Skip to main content
SimilarExport ZIP
100%

JC Task-1

✓ Published1🌍 Public
JJames Cruz
Last edited Apr 15, 2024
Created on Apr 15, 2024

This example is a horizontal bar chart that displays the 2020 populations of 30 countries, using the `d3.csv` loader to fetch the data from a GitHub-hosted CSV file and `d3.scaleBand` for the vertical country axis alongside `d3.scaleLinear` for the horizontal population axis. It renders as an SVG via React, with `d3.format` used to abbreviate tick labels (e.g., "G" for billions), and each bar includes a tooltip showing the population value. The chart is built from reusable local components—`AxisBottom`, `AxisLeft`, and `Marks`—each mapping data to SVG `rect` elements and axis lines.

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…

JC Task-7 Q1

This interactive bar chart displays the population of 30 countries as horizontal bars, sorted by country name for the year 2020. The visualization uses React with D3.js scales and SVG rendering to produce the chart, with axes formatted using D3’s `format` function to abbreviate large values. Data is loaded from a CSV file via `d3.csv` and processed in a custom `useData` hook, while tooltips show the population value on hover through native SVG `<title>` elements.

JJames Cruz
92% match
Loading thumbnail…

Fork of JC Task-7 Q1

This example displays a horizontal bar chart of population data for 20 countries in 2020. It uses React with SVG rendering, and D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions to load and transform the data, and to position the bars and axes. The bars are drawn as SVG rectangles, with a native `<title>` element providing a simple tooltip. Data comes from a CSV file hosted on GitHub.

JJames Cruz
92% match
Loading thumbnail…

JC-task-7 Q1.2

This bar chart visualizes the 2020 population for the top 20 countries, using SVG rectangles rendered via React. The x-axis displays population with a custom formatter (converting gigabytes to billions), while the y-axis lists country names. The code builds scales with `scaleBand` and `scaleLinear`, imports data from a CSV via `d3.csv`, and structures the visualization using local ES6 modules for axes and marks.

JJames Cruz
92% match
Loading thumbnail…

JC-task-7 Q1.2

This bar chart visualizes the 2020 population for the top 20 countries, using SVG rectangles rendered via React. The x-axis displays population with a custom formatter (converting gigabytes to billions), while the y-axis lists country names. The code builds scales with `scaleBand` and `scaleLinear`, imports data from a CSV via `d3.csv`, and structures the visualization using local ES6 modules for axes and marks.

JJames Cruz
92% match
Loading thumbnail…

JC-task-7 Q1.2

This bar chart visualizes the 2020 population for the top 20 countries, using SVG rectangles rendered via React. The x-axis displays population with a custom formatter (converting gigabytes to billions), while the y-axis lists country names. The code builds scales with `scaleBand` and `scaleLinear`, imports data from a CSV via `d3.csv`, and structures the visualization using local ES6 modules for axes and marks.

JJames Cruz
92% match
Loading thumbnail…

JC - Task-7 Q1

This bar chart displays the top 10 most populous countries in the year 2000, sorted in descending order, using a horizontal layout with light green bars. The visualization loads CSV population data from a GitHub repository, filters for the year 2000, and converts population values to actual counts. It uses d3.scaleBand and d3.scaleLinear for positioning, React for rendering the SVG elements, and custom AxisBottom, AxisLeft, and Marks components to draw the axes and bars. Axis tick labels are formatted with d3.format to abbreviate numbers (e.g., "B" for billions).

JJames Cruz
89% match
Loading thumbnail…

JC - Task-7 Q1

This bar chart displays the top 10 most populous countries in the year 2000, sorted in descending order, using a horizontal layout with light green bars. The visualization loads CSV population data from a GitHub repository, filters for the year 2000, and converts population values to actual counts. It uses d3.scaleBand and d3.scaleLinear for positioning, React for rendering the SVG elements, and custom AxisBottom, AxisLeft, and Marks components to draw the axes and bars. Axis tick labels are formatted with d3.format to abbreviate numbers (e.g., "B" for billions).

JJames Cruz
89% match
Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the 2020 population of 30 countries, sorted from largest to smallest on the y-axis. The visualization uses React with D3 v5 scales, where `scaleBand` positions the country bars and `scaleLinear` maps population values to bar widths. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components that format tick labels, and each bar contains a native HTML `<title>` tooltip showing the exact population value. Data is loaded from an external CSV file using D3's `csv` function.

JJhansi Balla
88% match