Skip to main content
SimilarExport ZIP
100%

Activity-7.1

✓ Published0🌍 Public
VVasanth Krishna
Last edited Nov 5, 2024
Created on Nov 5, 2024
Forked from Hello VizHub

This example displays a pie chart showing the distribution of university tuition fees by country, with the title "University Tuition Distribution by Country". It loads data from a CSV file using `d3.csv`, then uses `d3.rollup` to compute the mean tuition fee per country. The chart is rendered as an SVG using D3’s `pie`, `arc`, and `scaleOrdinal` APIs, while a legend lists each country with its corresponding color and average fee. The code also demonstrates ES6 module import with `myMessage.js`.

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
77% match
Loading thumbnail…

Activity 7 PieChart

This D3.js pie chart displays global internet usage by country, with each slice representing a country and its corresponding number of users. The visualization loads data from a remote CSV file and uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. Labels are positioned using a custom `labelArc`, and an HTML legend is built dynamically. The SVG chart is rendered with D3's selection and data-binding methods, while styling is applied through external CSS.

Gguttavenkata745@gmail.com
76% match
Loading thumbnail…

Making an Interactive Pie Chart

This interactive pie chart visualizes university funding amounts, with each slice labeled and color-coded by institution. Built with D3.js v5, the chart uses `d3.pie` and `d3.arc` to generate the donut geometry and `d3.scaleOrdinal` with `d3-scale-chromatic` for slice colors. Hovering over a slice triggers a tooltip showing the percentage of total funding, calculated via `d3.sum` and `d3.event`. The data comes from a CSV file loaded asynchronously, and the visualization renders as SVG with hover opacity effects and rounded slice corners.

PPriyaEnuganti
76% match
Loading thumbnail…

activity7.1_question1

This D3 pie chart visualizes country-wise counts from a remote CSV file, displaying data as color-coded slices with white outlines. Each slice is labeled with its corresponding country name, positioned via the arc centroid. A legend on the right shows each country’s color, name, and numeric value. The chart uses `d3.pie()` and `d3.arc()` for geometry, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders as SVG with an HTML overlay for styling.

Ssravani1969@gmail.com
76% match
Loading thumbnail…

activity7.1_question1

This D3 pie chart visualizes country-wise counts from a remote CSV file, displaying data as color-coded slices with white outlines. Each slice is labeled with its corresponding country name, positioned via the arc centroid. A legend on the right shows each country’s color, name, and numeric value. The chart uses `d3.pie()` and `d3.arc()` for geometry, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders as SVG with an HTML overlay for styling.

Ssravani1969@gmail.com
76% match
Loading thumbnail…

Pie Chart

This pie chart visualizes the basic cost of each country, with slices colored by country and a legend displaying names and dollar amounts. The D3.js v5 code loads CSV data from a GitHub gist and uses `d3.pie` and `d3.arc` to generate the SVG paths, with `d3.scaleOrdinal` and `schemeCategory10` for colors. A hover event logs the country and cost to the console, while the legend is built from the same pie data.

CChaitanya Ratan Sree
76% match
Loading thumbnail…

Activity_7.1

This pie chart visualizes the distribution of loan types from a CSV dataset loaded via `d3.csv`. Each slice is generated using `d3.pie()` and rendered as an SVG path with `d3.arc()`, colored by `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart includes a legend with colored rectangles and text labels, while slice labels are placed using the arc’s `centroid` method. The code uses D3 v6, an SVG container, and explicit width, height, and margin settings.

Ssanjanaadapa7@gmail.com
75% match
Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of students across university majors, highlighting each segment’s count both inside the slice and in an accompanying legend. The visualization is built with D3 v5, using `d3.arc()` to generate the pie segments and `d3.scaleOrdinal` for categorical colors. Data is loaded asynchronously from a CSV via `d3.csv()`, and SVG elements are created and positioned with `select` and `attr`. The chart uses a red title and custom styling for ticks and text, presenting a clear, colorful overview of enrollment data.

SSwapna1915
75% match