Skip to main content
SimilarExport ZIP
100%

activity7.1

✓ Published0🌍 Public
KKavyaEti
Last edited Nov 6, 2024
Created on Nov 6, 2024
Forked from Hello VizHub

This example visualizes the distribution of weather conditions from a CSV dataset as a pie chart. It counts occurrences of each condition, then renders the chart using D3 v7's `d3.pie` and `d3.arc` APIs, with slices colored via `d3.scaleOrdinal` and `d3.schemeCategory10`. Labels display each condition near its slice, and a separate legend is built using `d3.select`. The SVG output is 600 by 600 pixels, with data loaded asynchronously via `d3.csv` from a GitHub Gist.

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…

Activity7.1

A pie chart displays the share of browser usage from a CSV dataset, with each slice labeled by its percentage. The chart uses D3 v7 to load CSV data asynchronously, applies `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme, and renders via SVG. A legend on the right maps color swatches to browser names, while slice texts show the corresponding usage values. The example demonstrates handling remote CSV data, SVG path generation, and legend construction with D3's `select` and `append` methods.

SSiddhardha
85% match
Loading thumbnail…

Activity 7 Q1

This example shows a pie chart that visualizes categorical data loaded from a remote CSV file, with each slice colored using a categorical color scale and a legend pairing colors with category and subcategory labels. The chart is rendered as SVG using D3.js v6, where the `d3.pie()` generator computes slice angles and `d3.arc()` creates the path shapes. Data is fetched via `d3.csv`, and the color mapping uses `d3.scaleOrdinal` with `d3.schemeCategory10`. The code also adds axis labels (X and Y) that are not tied to the pie chart, acting as placeholders within the SVG layout.

Vvishnutejareddyambati@my.unt.edu
84% match
Loading thumbnail…

Activity_7

This pie chart visualizes fruit category proportions loaded from a GitHub Gist CSV file, with each slice labeled and colored using d3.scaleOrdinal with d3.schemeSet3. The D3 v7 code loads the data via d3.csv, converts values to numbers, and generates arcs with d3.pie and d3.arc. A custom legend, built as HTML divs, displays each category’s color and percentage. The SVG rendering includes white category labels positioned at slice centroids.

Aaschowdary.shashi@gmail.com
84% match
Loading thumbnail…

Activity7

This visualization presents a pie chart illustrating the proportional distribution of fruit categories, with each slice labeled by its category name. The chart loads a CSV dataset from a GitHub repository, parsing the numeric values to generate the pie geometry. Using D3.js v7, the code defines the chart dimensions, creates an SVG container, and applies an ordinal color scheme for slice differentiation. A custom legend is appended to the page, using HTML divs to display each fruit category with its corresponding percentage value.

Aaschowdary.shashi@gmail.com
84% match
Loading thumbnail…

Activity 6

This pie chart visualization displays the proportional breakdown of categorical data loaded from a remote CSV file. Constructed with D3.js v7, the SVG graphic uses `d3.pie` to compute arc segments and `d3.arc` for path geometry, with `d3.scaleOrdinal` and `d3.schemeCategory10` providing categorical colors. A legend, including color swatches and labels, is positioned on the left side, while the chart title appears above. The code loads data via `d3.csv` and renders all elements as SVG paths and text nodes.

AAP19110020041-Pavan Kumar
83% match
Loading thumbnail…

activity7_Q1

This pie chart displays the distribution of animal conservation statuses, using counts from a CSV dataset to show proportional slices for each category. The visualization is rendered as an SVG using D3 v6, with the `d3.pie` and `d3.arc` functions generating the pie geometry, while a `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to statuses. Labels on each slice include the status name and count, and a separate legend with colored rectangles and text appears to the right, positioned via manual SVG transforms.

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

Activity 7 Question 1

This example shows a classic pie chart built with D3.js, where each slice represents a category from a CSV dataset loaded remotely via `d3.csv`. The chart uses an ordinal color scale, and a legend lists each category alongside its subcategory. The code generates SVG paths with the `d3.arc` and `d3.pie` generators, and includes placeholder axis labels despite being a pie chart. The visualization renders entirely in SVG, with the legend placed to the right of the chart and a white stroke separating each slice.

Ccharanshiva769@gmail.com
83% match
Loading thumbnail…

activity7

A pie chart displays the distribution of flower species, with each slice labeled and a legend mapping colors to species names. The chart is titled "Flower Species Distribution" and includes axis labels for "Species" and "Count". The visualization is built with D3.js, using `d3.pie()` and `d3.arc()` to generate the slices, `d3.scaleOrdinal` for color assignment, and a CSV file loaded via `d3.csv()` as the data source, rendering an SVG.

Ssahithitoomu@gmail.com
83% match