ICE-7 Pie Chart

100%

ICE-7 Pie Chart

✓ Published1🌍 Public

Last edited Mar 29, 2022

Created on Mar 29, 2022

Forked from ICE-7 Reusable D3 Scatter Plot

This example shows the distribution of three iris species in the classic Iris Dataset as a pie chart. It imports data from a CSV file, counts occurrences of each species, and renders the result using the reusable `PieChart` function. The chart uses D3’s `pie` layout and `arc` generator for SVG paths, with an ordinal color scale mapping species to red, green, and blue. A custom legend is appended with `svg.append`, and the page uses the Share Tech font.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Piechart ICE - 7 Rohith Arabati

This pie chart visualizes the distribution of different Iris species from a dataset loaded via d3.csv. The code uses d3.pie and d3.arc to generate the chart, with d3.scaleOrdinal assigning distinct colors to each species. Each slice is labeled with a formatted value, and a legend displays the species names alongside their corresponding colors. The visualization is rendered as an SVG using D3 v5, providing a clear comparison of species proportions in the Iris dataset.

Bbhanuteja1807@gmail.com

84% match

Loading thumbnail…

ICE-7-1

A D3.js scatter plot visualizes the Iris dataset, plotting petal width against sepal length. Three species of iris are distinguished using different SVG symbols via a d3.scaleOrdinal and d3.symbol generator. The chart uses d3.axisLeft and d3.axisBottom for axes, with data loaded from a CSV URL and parsed into numeric values. The visualization fills the browser window and is rendered with SVG.

HHARSHA BUDDANA

82% match

Loading thumbnail…

ICE 7- Iris Data

This scatter plot visualizes the Iris dataset, showing petal length and width for three species of iris flowers, each colored distinctly. The visualization uses D3 v6 within a plain HTML page, employing `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and SVG circles for data points. Data is loaded asynchronously from a CSV via `d3.csv` and parsed into numeric values. The plot encodes species identity through color, with a simple switch statement mapping each species to a specific hue.

YYbg99

82% match

Loading thumbnail…

ICE-7 D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing how different species cluster across selected measurements. A reusable chart module built with D3 v6 renders SVG symbols whose shapes and colors encode species, while an animation cycles through the four numeric columns every two seconds to reveal changing distributions. The code uses D3 scales, axes, and symbol generators within a custom `scatterPlot` function, and loads data via `d3.csv`.

Aabdhaseeeb

82% match

Loading thumbnail…

ICE-7 reusable scatter plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis while encoding species through symbol shapes and colors (grey, coral, and aqua). The chart uses reusable D3.js components, including scaleLinear, scaleOrdinal, axisLeft, axisBottom, and the symbol generator, to render SVG marks. Data is loaded via d3.csv and parsed into numeric values before being passed to the customizable scatterPlot function.

CChathurya

81% match

Loading thumbnail…

ICE-6 Iris Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal length as a scatter plot of circles. The code uses D3 v7 to load the CSV data, parse numeric fields, and create linear scales for the axes. SVG is used for rendering, with axes and labels generated via `axisLeft` and `axisBottom`. The viewport dimensions determine the chart size, and margin-based spacing positions the axis labels and plot area, creating a clean, full-screen scatter plot.

DDan Waters

81% match

Loading thumbnail…

ICE-7 Reusable D3 Scatter Plot

A reusable scatter plot visualizes the Iris Dataset, with each point colored by species. The chart cycles through four different x-axis variables every two seconds, animating the axis transitions. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The implementation follows a reusable chart pattern, allowing the `scatterPlot` function to accept configurable accessors for data, dimensions, margins, and fill, with CSS styling for typography.

DDan Waters

81% match

Loading thumbnail…

ICE 7

This reusable D3.js scatter plot animates through different axis configurations of the Iris dataset, cycling petal and sepal measurements every two seconds. Implemented with the D3 API, it uses `scaleLinear`, `axisLeft`, `axisBottom`, `symbols`, and `scaleOrdinal` to map species to distinct colors and shapes. The SVG rendering includes a dynamic legend and title, with the plot’s margins and radius configurable, demonstrating a chart pattern for interactive data exploration.

RRebecca Moore

81% match