ICE-7-Pie Chart

ICE - 7 Pie Chart

This example visualizes the distribution of COVID-19 deaths across U.S. states as a pie chart, with each slice colored and paired with a legend showing the state name and its corresponding percentage of total deaths. The data is loaded from a CSV file hosted on GitHub, parsed with `d3.csv`, and the chart is rendered as SVG using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions. The legend, built with appended SVG groups and rectangles, includes formatted percentage values using `d3.format`.

84% match

ICE-7 Pie Chart

A pie chart visualizes the distribution of total COVID-19 cases across the top twelve U.S. states, sorted from highest to lowest. Each slice’s size and color correspond to a state’s case count, with an interactive tooltip logging the value on mouseover. The chart uses D3’s `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` APIs to generate SVG paths and a legend. Data is loaded asynchronously from a CSV file via D3’s `csv` function, then rendered with custom SVG elements for state labels and case totals.

Ggayuvurukuti@gmail.com

84% match

ICE-7 PIE CHART

This interactive donut chart visualizes the distribution of COVID-19 deaths across several US states, with each state's value represented as a proportion of the whole. Built with React and D3 v4, it renders SVG paths using `d3.arc` and `d3.pie` to create the ring, while a hover interaction, implemented with `d3.select` and mouse events, highlights a slice and displays a tooltip with the state name and value. A separate legend built from the same data array lists each category, using `d3.scaleOrdinal` with `d3.schemeCategory10` to assign colors consistently.

ICE - 7 Pie Chart

This pie chart visualizes COVID-19 death percentages across U.S. states, with each slice colored by a categorical scale and labeled through a legend with state names and values. The chart uses d3.pie and d3.arc to generate SVG paths from a CSV dataset, while d3.scaleOrdinal assigns section colors. The legend, rendered with SVG rectangles and text, displays state names and percentage values formatted with d3.format. The code fetches data via a Gist URL using d3.csv and renders all elements synchronously in an SVG container.

ICE-7-2 PIE CHART

This pie chart visualizes COVID-19 death statistics across seven U.S. states, with each slice labeled by state name and value. The chart uses D3.js v4’s `d3.pie` and `d3.arc` to generate SVG paths, with categorical colors via `d3.scaleOrdinal`. Hovering over a slice reduces the opacity of other slices and displays a tooltip showing the state and its corresponding death count. The visualization includes an interactive legend and is rendered entirely in SVG, with styling applied through CSS classes.

HHARSHA BUDDANA

ICE 6 - Rendering Marks and Channels with React & D3

This example visualizes the total victims of mass shootings in the top 30 U.S. states using a horizontal bar chart. Built with React and D3 v5, the SVG rendering maps each state to a band scale on the y-axis and a linear scale on the x-axis, encoding victim counts as bar widths. The code loads CSV data via `d3.csv`, applies `scaleBand` and `scaleLinear`, and manually renders axes and gridlines using `d3.axisBottom` and `d3.axisLeft` alternatives. State names are labeled alongside each bar, with tick marks drawn as blue lines.

Ssenthilrajendran1

ICE 7 - Pie Chart

This pie chart displays crime rates across ten U.S. states, with each slice labeled by state name and accompanied by a legend showing the corresponding count. Built with D3.js v3, the visualization uses `d3.layout.pie` to compute arc segments, `d3.svg.arc` for rendering the donut shape, and `d3.scale.category20` for slice colors. State names appear as text labels positioned via `arc.centroid`, while a separate legend group lists each state with its count. The chart is rendered as SVG, with styling applied through HTML elements.

BBaswa Sathvika Reddy

ICE-7 PIE CHART

This example visualizes COVID death percentages across U.S. states using an interactive pie chart built with D3 v4 in a React framework. The chart displays seven state values as colored wedges, with a custom tooltip that appears on mouseover showing the state name and its corresponding percentage, while the SVG-rendered arcs respond to hover by adjusting opacity. The code implements hover and touch interactions using D3 event handlers, and includes a legend generated from the same data array.