Skip to main content
SimilarExport ZIP
100%

Activity 7

✓ Published0🌍 Public
UUmarani Vemula
Last edited Jul 8, 2023
Created on Jul 3, 2023
Forked from Hello VizHub

This bar chart displays land use for food across ten food types, with horizontal bars showing values for the year 2010. The visualization uses React to render SVG elements, with scales and formatting from D3 v5. The chart reads data from a CSV file, employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, and includes axis components from local ES6 modules. Hovering reveals exact values via native SVG `<title>` tooltips.

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 7 new

This bar chart displays the land use in square meters for ten food types in 2017, from beef and mutton down to pulses. The visualization uses React components with D3 v5 scales and axes, rendering SVG rectangles whose widths are proportional to the land use values. Data is loaded via `csv` from a gist, with values parsed and formatted using `scaleLinear`, `scaleBand`, and `format`. Hovering shows the exact value via a native SVG `<title>` tooltip.

UUmarani Vemula
91% match
Loading thumbnail…

Activity 7

This bar chart displays the population of ten countries in the year 2000, using horizontal bars ordered along a categorical y-axis and a linear x-axis. The visualization is rendered with React and SVG, leveraging D3’s `scaleBand`, `scaleLinear`, and `format` APIs to compute positions and abbreviate tick labels. Data is loaded asynchronously from a remote CSV file via `d3.csv`, with hover tooltips revealing exact population values through native SVG `<title>` elements.

Vvarun.mahankali39@gmail.com
83% match
Loading thumbnail…

Activity 6

This example presents a horizontal bar chart of population data from the year 2000 for ten countries, using an SVG rendering within a React component. The visualization loads a CSV from GitHub and processes the data with d3.csv, then uses d3.scaleBand and d3.scaleLinear to map categorical and quantitative values to positions. The chart includes custom axes built with map functions, displaying population values in billions with formatted tick labels, alongside interactive tooltips generated through SVG `<title>` elements. The code leverages React’s useState and useEffect hooks for asynchronous data loading, and imports D3 functions like `max`, `format`, and `scaleBand` directly.

Mmanishmanda@my.unt.edu
83% match
Loading thumbnail…

Activity 7

This example displays a horizontal bar chart of the 2010 population for ten countries, sourced from a CSV file via a URL. Built with React and D3 v5, it uses a linear x-scale for population values, formatted with SI prefixes (e.g., "B" for billions), and a band scale for country names. The SVG rendering includes custom axes and tooltips that show the formatted population value on hover.

Aaniteshterala2000
83% match
Loading thumbnail…

Activity 7

A horizontal bar chart displays the population estimates for ten countries in 2010, with bars extending from a shared baseline. The visualization uses React with D3.js utility functions, including `d3.csv` for data loading, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. SVG rendering constructs axes via custom `AxisBottom` and `AxisLeft` components, while hover tooltips are implemented through SVG `<title>` elements. The chart labels the x-axis and formats tick marks using `d3.format`.

Ppardha1411
82% match
Loading thumbnail…

Activity 7

A horizontal bar chart displays the populations of twenty countries in 2020, using D3.js scaleBand and scaleLinear to map country names and population values to SVG rectangles. The React-based visualization reads CSV data from a GitHub repository, formats axis tick labels using D3's format function to abbreviate large numbers, and includes interactive tooltips via SVG `<title>` elements. Axes are rendered with custom React components, with blue tick lines and green bars styled through CSS.

Hharsha
82% match
Loading thumbnail…

Activity 7

This example shows a horizontal bar chart of population data for 20 countries in 2020, sourced from a CSV file. The chart uses React with D3 v5, employing `scaleBand` and `scaleLinear` for scales and rendering bars as SVG rectangles. The code loads data via `useData`, formats tick labels with `format('.2s')`, and includes axis components with blue tick lines and green bars, with a title tooltip on each rectangle.

Vvineelaramulapalli32
82% match
Loading thumbnail…

Activity 7

This interactive bar chart displays the populations of 20 countries from 2010, presented as horizontal bars ordered by country name. Built with React and D3 v5, the visualization uses SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The chart loads data from a remote CSV file and formats tick labels using D3's `format` function, converting values like "1.2G" to "1.2B" for readability.

Ssairamisetti3829@gmail.com
82% match