Skip to main content
SimilarExport ZIP
100%

Task9_Question1

✓ Published0🌍 Public
Aaashishvinayvasala@gmail.com
Last edited Apr 28, 2024
Created on Apr 28, 2024
Forked from HTML Starter

This interactive pie chart shows the percentage distribution of various factors by continent, with a dropdown menu to select a continent and update the visualization. Built with React and D3 v7, it loads CSV data from GitHub, computes mean values for each attribute via `d3.mean`, and renders SVG arcs using the `d3.pie` and `d3.arc` generators. A legend with color swatches and numeric labels updates alongside the chart.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Task9-Question1

This interactive pie chart displays the percentage distribution of various factors for a selected country, allowing users to compare categorical breakdowns through a dropdown menu. The visualization loads CSV data from a GitHub repository and dynamically updates both the chart and its legend when a new country is chosen. Built with D3 v7, it uses `d3.pie()` to compute arc angles, `d3.arc()` to generate SVG paths, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping, with text labels showing each factor's percentage.

LLayaMyadam@my.unt.edu
87% match
Loading thumbnail…

TASK9_QUESTION_1

This interactive pie chart visualizes land area percentages across seven continents, with each slice colored distinctly and labeled in a side legend. Hovering over a slice reveals its exact percentage via a tooltip. The visualization uses D3.js v4 with the `d3.arc()` and `d3.pie()` APIs, and applies an SVG filter for a soft blur effect. Data is hardcoded in the script as an array of objects, while the chart resizes responsively to fit its container.

Ssairam.amaraneni22@gmail.com
85% match
Loading thumbnail…

Question 1

This interactive pie chart displays the average value of multiple factors for a selected continent, sourced from a CSV dataset. A dropdown menu filters the data by continent, and the chart updates arcs, value labels, and a color-coded legend. Built with D3 v7, it uses `d3.csv`, `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.mean` to compute and render the visualization as SVG.

Sswapnadabburi@my.unt.edu
85% match
Loading thumbnail…

Task9-Q1

A pie chart displays the percentage of land area per continent, with a color-coded legend and a hover tooltip that reveals each value. Built with D3.js v4, it uses `d3.pie` and `d3.arc` to generate the SVG paths, `d3.scaleOrdinal` for color mapping, and a custom tooltip that follows the mouse. The chart is resizable and re-renders on window resize. Static data is hardcoded in JavaScript, while the SVG includes a Gaussian blur filter for a subtle shadow effect.

Mmythripopuri2001@gmail.com
84% match
Loading thumbnail…

q1 task9

This pie chart visualizes the percentage of land area per continent, with each slice colored and labeled in a static legend. The chart is rendered using SVG via D3.js (v4), where the `d3.pie()` generator and `d3.arc()` function compute the slice paths. Hovering over a slice triggers a tooltip showing the exact percentage, implemented with D3 mouse events. Data is hardcoded in the script, and the visualization includes a responsive resize handler that redraws the chart.

Mmanisahiths54321@gmail.com
82% match
Loading thumbnail…

Fork of Task 10 question 1

This example shows a pie chart of population data for the top ten countries, displaying each slice with a percentage label and a legend identifying the country. The chart is built with React and D3 version 5, using the `pie` and `arc` generators to compute the layout and path data, while `d3.schemeCategory10` assigns colors. It loads a CSV from a GitHub repository via `d3.csv`, transforms the population values, and renders the SVG dynamically through a React effect. The example also includes an inner radius and axis labels for styling and context.

SSreeKohaliPatel@my.unt.edu
81% match
Loading thumbnail…

Question1_Task9

This D3.js v5 visualization presents a pie chart of the Air Quality Index by country, using SVG rendering. The chart encodes each country's Air_Index value as a pie slice, with colors assigned via the d3.scaleOrdinal and schemeCategory10 color scale, and includes a legend showing country names and their formatted index values. The code loads CSV data from a GitHub gist, converts the Air_Index field to numbers, sorts countries by index, and uses d3.pie and d3.arc to generate the slices. The chart is titled "Air Quality Index by Country."

Vvidiyalasahithi1999@gmail.com
80% match
Loading thumbnail…

activity7_question1

This example shows a pie chart comparing the population of the top ten countries, with each slice labeled by its percentage of the total and accompanied by a color-coded legend. The chart is built using React and SVG, with D3 v5 handling the pie geometry and layout. The code uses `d3.arc` to generate the pie slices, `d3.schemeCategory10` for colors, and `d3.format` for percentage labels. Data is loaded from a remote CSV file via `d3.csv` and processed in the `useData` hook.

JJayanth Reddy Sripathi
80% match