Skip to main content
100%

Time Spent Cleaning

✓ Published0🌍 Public
SStephanieReilly
Last edited Dec 6, 2017
Created on Dec 6, 2017

A donut chart visualizes the proportion of time spent cleaning different rooms, showing that time is divided equally among the Kitchen, Bathroom, and Garden, with the Bedroom and Front Room receiving less. The chart is rendered as SVG using the D3.js 3.5.5 library, which constructs the pie layout via `d3.layout.pie` and draws arcs with `d3.svg.arc`. Data is loaded from a local `data.json` file, which contains `floorratio` values for each room, and slice colors are assigned using `d3.scale.ordinal`.

AI-generated description

Stackoverflow question: http://stackoverflow.com/questions/32549683/d3js-json-pie-chart?noredirect=1#comment52995750_32549683

forked from <a href='http://bl.ocks.org/steveharoz/'>steveharoz</a>'s block: <a href='http://bl.ocks.org/steveharoz/0638d230c133da1de385'>Pie Chart</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/1bfc96b6f42ef4b42d6d8f33657f089c'>Pie Chart</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/f1d1a985e003a78fdc9060245b180827'>Pie Chart</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/4faa8044e63b96dc3b9c83f9c3e50479'>Pie Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
70% match
Loading thumbnail…

Donut-Pie Chart

This donut-pie chart combines two D3 v3 pie layouts to show hierarchical proportions of issue statuses: the outer donut ring displays the current status totals, while the inner pie wedges break down each prior status within those totals. Both layers share an ordinal color scale mapping statuses—New, Open, Reopened, Closed—and use `d3.svg.arc` for rendering SVG paths. Data is loaded from a CSV file and processed with `d3.nest` and rollup to aggregate counts by current status before sorting.

SSpaceActuary
70% match
Loading thumbnail…

Donut-Pie Chart

This donut-pie chart visualizes hierarchical data from a CSV file, showing current statuses in the outer donut ring and prior statuses in the inner pie, with color coding for New, Open, Reopened, and Closed categories. Built with d3.v3, it uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to aggregate and structure the data, rendering as SVG. The outer arc and inner wedge paths are styled with distinct radii, and labels are positioned via arc centroids.

TThanaporn-sk
69% match
Loading thumbnail…

Reusable Donut Chart in D3 v4

A reusable donut chart for D3 v4 displays the distribution of inspection outcomes across six categories, with percentage labels connected to each slice. The code uses `d3.pie` to compute slice angles, `d3.arc` for the donut geometry, and `d3.scaleOrdinal` with `schemeCategory20` for coloring. Hovering over a slice or label triggers a custom tooltip rendered as an SVG circle, while `d3.format` handles numeric and percentage formatting. The chart is built from a TSV dataset and styled with CSS drop shadows and label lines.

Aabrown004
68% match
Loading thumbnail…

Donut Chart

This donut chart displays five equal segments, each representing a donut count of 1000 from the Data.json file. The circular visualization uses a ring geometry with an inner radius of 140 and outer radius of 185, with segments colored green, blue, yellow, red, and teal. The visualization is built using D3 version 5, leveraging the `pie` API to compute arc segments and the `arc` API to generate the SVG paths. A `scaleOrdinal` color scale maps the data values to the custom color palette. The chart reads its data asynchronously from a JSON file and renders within an SVG element on an HTML page.

Xxyzcorrupt@gmail.com
68% match
Loading thumbnail…

Gist 7251163

This donut chart visualizes the distribution of CPU usage ranges, such as “< 50%” and “70-80%,” with each segment’s arc length proportional to the count in the accompanying CSV data. Built with d3.v3, the SVG graphic uses `d3.layout.pie` to compute the pie slices, `d3.svg.arc` to define the ring geometry, and `d3.scale.ordinal` to assign categorical colors. Labels are placed at each arc’s centroid, and the data is loaded asynchronously via `d3.csv`.

JJaapSuter
67% match
Loading thumbnail…

Reusable Donut Chart in D3 v4

This reusable donut chart, built with D3 v4, displays the probability distribution of bacterial species in a sample. It renders an interactive SVG donut with labeled slices and connecting lines, and shows a tooltip in the center when hovering over a slice or species name. The chart is implemented as a reusable function using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, with data loaded from a tab-separated values file. It features animated transitions and customizable parameters like corner radius and pad angle.

EEndNight95
67% match
Loading thumbnail…

Money chart

A donut chart displays the percentage breakdown of travel expenses, such as food, transport, and sleeping, with each slice’s arc labeled outside the chart. The tooltip reveals each category's percent, local currency amount, and equivalent in euros, based on a fixed exchange rate. Built with D3 v3, it uses `d3.svg.arc`, `d3.layout.pie`, and a color ordinal scale, rendering as SVG. Mouseover and mousemove events drive a custom HTML tooltip showing detailed cost data.

SServuc
67% match