fresh block

100%

✓ Published0🌍 Public

Last edited Jun 12, 2018

Created on Jun 12, 2018

A donut chart displays the value and percentage for eight iPad models, with each wedge colored by a categorical scale and connected to a labeled callout line. The visualization uses D3 v3’s `d3.layout.pie` and `d3.svg.arc` to generate the arcs, while a custom `relax` function iteratively adjusts overlapping text labels, shifting their `y` positions and updating the corresponding line endpoints to reduce clutter. The code mixes D3 v3 and v4 scripts, rendering to SVG.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example presents a donut chart displaying the age distribution of a population, with each slice colored and labeled by age group. The chart is created using D3 v4, employing the `d3.pie` function to compute arc segments and the `d3.arc` API for rendering both the chart's path and label positioning. Data is loaded from a CSV file with columns for age and population, and the ordinal color scale assigns distinct colors to each category. The visualization renders as an SVG element, with white text labels placed at the centroid of each arc for clarity.

JJennKempCodes

80% match

Loading thumbnail…

fresh block

This example shows a simple pie chart visualizing three data values (10, 20, 100) as proportional slices. The chart uses an SVG rendering with D3 v4, creating arcs with a white stroke separation. Colors are assigned via a categorical ordinal scale with a muted three-color palette. The pie layout uses `d3.pie` with null sorting, while `d3.arc` defines the slice geometry, keeping the label text commented out. The visualization is static, with the data hardcoded in the script.

KKacieW

80% match

Loading thumbnail…

fresh block

Two donut charts display randomly generated sales data for five product tiers, each slice filled with a radial gradient that darkens toward the edge for a subtle 3D effect. A "Change Data" button triggers animated transitions using `gradPie.transition`, which relies on D3 v3’s `transition.attrTween` and an interpolated arc path (`d3.svg.arc`). The custom `gradientPie.js` library builds gradients via SVG `radialGradient` elements and updates both charts simultaneously in 750 milliseconds, demonstrating reusable pie-chart logic with smooth data updates.

PPragyagarg

79% match

Loading thumbnail…

fresh block

A simple bar chart displays the relative values of four fruit categories (Apple, Banana, Orange, Kiwi) with randomly generated heights, encoded as steelblue rectangles. The visualization uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the numeric y-axis, with axes rendered via d3.axisBottom and d3.axisLeft. Data is embedded directly in the script as a static array, and the chart is drawn with SVG elements. The y-axis tick label for the sixth tick is manually replaced with the text “Word,” while all other ticks remain default numeric values.

AAlexDaGr8

77% match

Loading thumbnail…

fresh block

A line chart displays monthly values for twelve categories labeled A through L, with circles marking each data point and dashed vertical guides from the baseline. Hovering a circle highlights it in red, fades in the corresponding value label and guide line, then restores them on mouseout. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear to position marks, with transitions on opacity for interactive feedback. Data comes from a local JSON file, and rendering occurs in SVG with a monospace font for numeric labels.

KKylaste

77% match

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

77% match

Loading thumbnail…

fresh block

This visualization displays five data points as circles positioned along a chart area. The circles are colored either purple or green depending on whether their value exceeds 100, with each point’s x and y coordinates equal to its data value. Built using d3.v4, the code appends an SVG canvas to the page and populates it with circles via the `.data().enter().append()` pattern. The fill color is determined by a conditional function, and the circle radius and positions are set using SVG attributes. The data is a hardcoded array in the script.

LLisaPicado

76% match

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

76% match