Skip to main content
SimilarExport ZIP
100%

Fork of Acitivity6 ques 2

✓ Published0🌍 Public
BBhavana Sharma
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from Acitivity6 ques 2

This example presents a stacked horizontal bar chart showing population percentages for multiple countries from 1950 to 1955. The visualization loads data from a CSV file and uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` with a custom color palette to layer yearly values per country. SVG rendering with `d3.axisBottom` and `d3.axisLeft` displays axes, while interactive tooltips appear on mouseover to reveal exact percentage values, using `d3.select` and event handlers to update a positioned div.

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…

Acitivity6 ques 2

This example visualizes population data for several countries across the years 1950-1955 using a stacked bar chart. The chart displays population counts on the x-axis and countries on the y-axis, with each bar segment representing a different year. Built with D3 v7 and rendered as SVG, it uses `d3.stack()` to compute the stacked series, `d3.scaleOrdinal` for color encoding, and includes interactive tooltips that display the population percentage for each year segment on mouseover. The data originates from a CSV file loaded locally.

BBhavana Sharma
92% match
Loading thumbnail…

Fork of Activity6_data_vis Q1.1

A horizontal bar chart displays population figures for ten countries in the year 2000, using green bars with blue axis ticks and tooltips showing formatted values. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population scale. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values multiplied by 1000 during preprocessing. SVG rendering handles the marks and axes, with tick formatting converting values into billions using D3's `format` function.

Aaashrithas2000@gmail.com
86% match
Loading thumbnail…

Fork of Activity6_q1

This example presents a horizontal bar chart comparing the populations of ten countries in the year 2000. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values, with React rendering the SVG elements. Each bar includes a native `<title>` tooltip displaying the formatted population in billions (using `format('.2s')`). Data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted CSV file, and axes are generated by custom React components (`AxisBottom` and `AxisLeft`).

Aabjalshaik02@gmail.com
84% match
Loading thumbnail…

Fork of ACTIVITY6 QUES 1 (PART2)

A horizontal bar chart displays the populations of 20 countries for 2010, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, while D3 v5’s `scaleBand` and `scaleLinear` handle axis positioning, and `d3.csv` loads the dataset from a GitHub repository. Bars appear in light green, with blue tick lines and formatted population labels using `d3.format`.

BBhavana Sharma
84% match
Loading thumbnail…

Fork of Fork of activity 6_ Q1.2

This example displays a horizontal bar chart of population data for 20 countries, with each bar’s length proportional to the 2010 population value. The visualization uses D3’s `scaleBand` and `scaleLinear` for axis scaling, with formatted tick labels. Built with React and rendered as SVG, it loads data from a remote CSV via D3’s `csv` utility. Interactivity is basic, with tooltips showing the population value on hovering over a bar.

Kkowshiksamudrala08@gmail.com
84% match
Loading thumbnail…

Fork of Activity_6 Q1

A horizontal bar chart displays the populations of 30 countries from a CSV file, with labels on the y-axis and population values on the x-axis formatted in billions. The chart uses React with D3 v5, employing `scaleBand` and `scaleLinear` for scaling, `AxisBottom` and `AxisLeft` for axes, and `Marks` to render SVG rectangles with tooltips showing exact values. The data is loaded via `csv` from a gist URL, with population values multiplied by 1000 to represent actual figures.

Bbhavanadupati3@gmail.com
84% match
Loading thumbnail…

Fork of Actvity6_question1.2

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with country names on the y-axis and population values on the x-axis using a linear scale. It loads data from a remote CSV file via D3’s `csv` function and renders the chart as SVG in React using local components for axes and marks. The bars are colored teal, and hovering reveals formatted population values via SVG `<title>` tooltips. The code imports `scaleBand`, `scaleLinear`, and `format` from `d3` to handle scaling and tick labeling.

1188r1a0559@gmail.com
83% match
Loading thumbnail…

Fork of Activity6_q1.1

A fork of a VizHub activity example, this visualization renders a horizontal bar chart of country populations for the year 2000. The data is loaded from a GitHub-hosted CSV and displayed using React and D3 v5, with the top ten countries sorted by population. The chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG `<rect>` marks for each bar and a `<title>` element for tooltips. The code demonstrates importing D3 functions and local ES6 modules, and customizes axis styling through CSS classes.

Jjahnavigummadi@my.unt.edu
83% match