Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Hello VizHub

✓ Published0🌍 Public
Ssravya.mundluru@gmail.com
Last edited Mar 27, 2025
Created on Mar 27, 2025

This example combines a pie chart and an area chart to visualize species distribution and temporal trends. The pie chart uses d3.pie and d3.arc to show the count of iris species from a CSV file loaded with d3.text, while the area chart uses d3.area with d3.scaleTime and d3.scaleLinear to display a simple time series. Both charts include legends and axes rendered via d3.axisBottom and d3.axisLeft.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This pie chart displays the distribution of three Iris species in the classic dataset, with each slice labeled by species and a color-coded legend below. The visualization uses D3 v7’s `d3.pie` and `d3.arc` generators to compute slice paths, while `d3.rollup` aggregates row counts from a CSV loaded via `d3.csv`. SVG paths and text elements are rendered inside a centered group, with a separate HTML legend built from `d3.scaleOrdinal` color mapping.

Ssohith kampalli
87% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example displays two D3.js v7 visualizations in a single SVG: a pie chart categorizing stock closing prices into three ranges and an area chart showing closing prices over time. The pie chart uses `d3.pie` and `d3.arc` with ordinal color scaling, while the area chart employs `d3.area` and `d3.scaleTime`/`d3.scaleLinear` axes. Both render from the same CSV dataset fetched via `d3.csv`, showing the date and closing price values.

Ssohith kampalli
86% match
Loading thumbnail…

Fork of Fork of Hello VizHub Q2 vk

This example displays a pie chart from the Iris dataset, showing the distribution of petal lengths by species. Built with D3.js (version 6.7.0), it loads data from a GitHub Gist via the `d3.csv` function, transforms it, and renders an SVG. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.stack` and `d3.area` to create the chart, and `d3.axisBottom` and `d3.axisLeft` for tick marks. A title labeled "Petal Length Distribution" is added above the plot.

Vvikramkotlo9@gmail.com
85% match
Loading thumbnail…

Fork of Hello VizHub

This area chart visualizes a dataset loaded from a CSV file hosted on GitHub. The chart displays values over time, with dates parsed via `d3.timeParse` and a linear scale for the y-axis. The area path is generated using `d3.area` and rendered as a steelblue SVG path. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and the chart is built with D3 v7.

SSeema Shrestha
85% match
Loading thumbnail…

Fork of Hello VizHub

This example presents an age distribution pie chart built with D3 v7. It fetches CSV data from an online source, counts entries into four age brackets, and visualizes the proportions as pie slices with labels. The chart uses `d3.csvParse`, `d3.pie`, `d3.arc`, and a `d3.schemeCategory10` color scale, rendering arcs and a legend inside an SVG.

Aanusha.chilkamarri26@gmail.com
84% match
Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays an area chart of iris sepal lengths against sample ID. The D3.js code uses `d3.csv` with `d3.autoType` to load and parse the data from a gistfile, filters it, and then applies `d3.scaleLinear` for both axes. It renders the visualization as an SVG, using the `d3.area` generator to create the filled path and `d3.axisBottom` and `d3.axisLeft` for the axes with labels.

Ssohith kampalli
84% match
Loading thumbnail…

Fork of Hello VizHub

This example shows the distribution of sepal lengths across Iris species using an interactive SVG pie chart. The chart displays the percentage of each species in tooltips and includes a legend. It loads the Iris dataset from a CSV URL using D3's `csv` function, then renders the visualization with `pie` and `arc` generators from the D3 6.7.0 library. The code also demonstrates importing D3 via UNPKG and using the `select` and `append` DOM methods to build the SVG.

Vvikramkotlo9@gmail.com
84% match
Loading thumbnail…

Fork of Hello VizHub

This example displays a D3.js pie chart that visualizes the distribution of insurance records by region, rendered as SVG with an accompanying legend and interactive tooltips. The code loads CSV data from a GitHub-hosted dataset using `d3.csv`, aggregates region counts with `d3.rollup`, and constructs the pie with `d3.pie` and `d3.arc`. Hovering over a slice highlights it, triggers a tooltip showing the category and value, and applies categorical colors from `d3.scaleOrdinal` and `d3.schemeCategory10`.

Kkotha.shiva@btech.christuniversity.in
83% match