Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Task8_Tutorial1_Question1.2HKK

✓ Published0🌍 Public
Hhemanthkakani1999@gmail.com
Last edited Apr 14, 2024
Created on Apr 14, 2024

This example shows a horizontal bar chart comparing the 2010 population of 20 countries, with D3's scaleBand and scaleLinear mapping country names and population values to the SVG canvas. The React app loads CSV data via d3.csv, renders axes through custom AxisBottom and AxisLeft components, and displays values using si-format tick labels that convert gigabytes to billions. Blue rectangles represent each country's population, with tooltips showing formatted values on hover.

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 Task8_Tutorial1_Question1.1HKK

This bar chart displays the 2010 population of the top 20 countries from a CSV file loaded via `d3.csv`, with bars colored blue. It uses React to render SVG elements, with `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.format` to abbreviate tick labels, and custom `AxisBottom` and `AxisLeft` components. Ticks are styled with red lines, and hovering reveals tooltips via SVG `<title>` elements.

Hhemanthkakani1999@gmail.com
94% match
Loading thumbnail…

Fork of Task_8_Question2

This example shows a horizontal bar chart comparing the 2010 population of 20 countries, with each bar labeled by country name and a numeric axis formatted in billions. Built with React and D3 v5, it uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.csv to load data from a remote GitHub dataset. SVG rectangles render the bars, while custom AxisBottom and AxisLeft components generate the axes and tick labels, and a native SVG `<title>` element provides tooltips on hover.

Mmythripopuri2001@gmail.com
93% match
Loading thumbnail…

Fork of Task8_Tutorial(1.2)

This example shows a horizontal bar chart of the 20 most populous countries in 2010, with country names on the y-axis and population counts on the x-axis. The visualization uses React to render SVG elements, with D3 v5 scaleBand and scaleLinear for axes and bars. Data is loaded from a CSV via d3.csv, and the code implements custom AxisBottom, AxisLeft, and Marks components to display the chart with blue tick lines and green bars.

Jjyothirmai318@gmail.com
92% match
Loading thumbnail…

Fork of Activity_6_Task_1_Question_1_1

This example shows a horizontal bar chart comparing the population of ten countries in the year 2000, sorted by country name. The chart uses React components to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling the layout, while `AxisBottom` and `AxisLeft` generate the axes. Data is loaded using `d3.csv` from a remote GitHub CSV file, and each bar displays a native tooltip with its formatted population value.

LLarry Johnson
91% match
Loading thumbnail…

Fork of Activity 6_Task 1.2

This example shows a horizontal bar chart comparing the population of 20 countries in 2010, with a green bar for each country and a blue axis. The React app loads data from a CSV file via D3’s `csv` function, then uses `scaleBand` and `scaleLinear` to map the country names and population values to SVG rectangles. Axis labels are formatted with D3’s `format` function to abbreviate numbers like “1.2B”. The visualization renders entirely as SVG elements, with axis ticks and marks defined in separate ES6 modules.

Vvarunreddy.gudigopuram@gmail.com
91% match
Loading thumbnail…

Fork of Task_8_Q1_2

This example presents a horizontal bar chart comparing the 2010 populations of 20 countries. The bars are rendered as green SVG rectangles. The chart is built using React, with D3.js v5 providing the `scaleBand` and `scaleLinear` functions for axis scaling, and the `csv` function to load data from a GitHub-hosted CSV file. Custom ES6 module components handle the axes and marks, with the x-axis formatting using D3's `format` API to abbreviate large numbers to billions. Population values are preprocessed by multiplying the raw data by 1000.

YYeshwanth963@gmail.com
91% match
Loading thumbnail…

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, with each bar’s length proportional to its population value. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and scaling, and D3’s `csv` loader to fetch data from a GitHub-hosted CSV file. Bar rectangles are generated via a custom `Marks` component, while `AxisBottom` and `AxisLeft` use D3’s tick generation to draw axes. Population values are formatted with D3’s `format` function, converting numbers to abbreviated strings like “B” for billions.

HHema Tummapala
91% match
Loading thumbnail…

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, with each bar’s length proportional to its population value. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and scaling, and D3’s `csv` loader to fetch data from a GitHub-hosted CSV file. Bar rectangles are generated via a custom `Marks` component, while `AxisBottom` and `AxisLeft` use D3’s tick generation to draw axes. Population values are formatted with D3’s `format` function, converting numbers to abbreviated strings like “B” for billions.

HHema Tummapala
91% match