D3 — VizHub

100%

D3

✓ Published1🌍 Public

Last edited Dec 5, 2021

Created on Dec 3, 2021

This example demonstrates an animated pie and bar chart using the D3.js v3 library. The pie chart visualizes an array of six numeric values with arc segments, while the bar chart displays a separate dataset with an elastic growth animation. The charts are rendered as SVG elements, with the bar chart featuring interactive hover effects that change bar colors and display tooltips. The code utilizes D3 APIs including `d3.layout.pie`, `d3.svg.arc`, `d3.scale.ordinal`, and `d3.scale.linear` for data binding, scaling, and animation transitions.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

barChart and pieChart V3

This example shows how interactive bar charts and pie charts can be built with React and D3 v5, allowing users to switch between chart types and select different categorical columns from a dropdown menu. The visualization displays absolute frequencies of student grades and degree programs, with hover tooltips showing values or percentages, and animated transitions when switching data. It uses D3’s scaleBand, scaleLinear, scaleOrdinal, nest, pie, arc, and axis components, rendered as SVG with transitions and animation delays, plus custom tooltip handling via mouse events.

SSchmittYannic

84% match

Loading thumbnail…

D3 Piechart

This example shows a simple pie chart built from a static array of six numeric values, rendered as filled orange arcs with white strokes on an SVG canvas. The chart is generated using the d3 pie generator to compute arc segments, while the d3 arc generator defines the inner and outer radii for the donut-style shape. The visualization uses d3’s select and join methods to bind the computed arc data to SVG path elements, with styling applied through CSS and inline attributes.

SSubhendu Karmakar

82% match

Loading thumbnail…

Interactive pie and bar

This example links a pie chart and a bar chart to explore export data by category and state. Hovering over a bar filters the pie chart and legend to show the composition for that state; leaving resets the view. The visualization uses D3 v3 with SVG and animated transitions, employing ordinal and linear scales alongside user-defined update functions to synchronize the charts.

Aarths-glitch

82% match

Loading thumbnail…

D3 piecharts

This example visualizes data as a set of pie charts rendered with SVG, with each chart’s arcs sized relative to its slice values. Built using D3 v4 within a React starter setup, the code creates a single pink-background SVG, centers a `<g>` container via an explicit transform, and appends pie chart elements directly to it. The visualization relies on D3’s selection and SVG primitives, with layout logic implied through D3’s pie and arc generators.

Oonika123

82% match

Loading thumbnail…

Animated bar chart

This example demonstrates how to build an animated bar chart using D3 version 4. The visualization first draws a static cartoon-like figure composed of SVG shapes (rectangles, circles, and lines) to serve as a backdrop, then relies on a separate JavaScript file (index.js) to generate the chart’s dynamic elements. The code explicitly uses D3’s selection and arc APIs, including `d3.select` and `d3.arc()`, to construct the scene, with the bar chart itself styled via CSS classes such as `.bar` and `.highlight`.

ZZain1675

82% match

Loading thumbnail…

D3 Charts

This example presents several D3 chart types—an animated bar chart, a grouped bar chart with a legend, and a stacked bar chart—with controls for interacting with the data. The animated bar chart uses a D3 module pattern with a reusable `barGraph` function, including scale bands, grid lines, transitions, and sorting capabilities. The grouped and stacked bar charts use D3’s `.stack()` and `.scaleBand()` to display categorical data from a CSV file, with each subgroup assigned a distinct color. The visuals are rendered in SVG and canvas, and the graph modules are composed in a single HTML document with a menu for switching between chart views.

SSubhamChhetri

82% match

Loading thumbnail…

Lets draw a bar chart

This example demonstrates an interactive chart that can switch between bar, plot, line, area, map, and pie visualizations using a dropdown menu. The pie chart mode includes drill-down functionality, where hovering over a slice expands it and displays related gender breakdown data alongside a table. Using D3.js (v5) and d3-geo-projection, it processes CSV data such as salary information and dessert preferences, rendering with SVG and animated transitions. The tooltips, gradients, and drop-shadow filters enhance the visual feedback for user interactions.

MManousan

81% match

Loading thumbnail…

D3 Layouts - Pie charts

This example shows a donut-shaped pie chart that visualizes a small dataset of six numeric values. The chart is rendered as an SVG, with each value displayed as a white label at the centroid of its corresponding arc. The code uses D3’s `pie` layout generator to compute the arc segments, `d3.arc` to define the ring’s inner and outer radii, and `d3.scaleOrdinal` with `d3.schemeCategory10` to assign categorical colors. The chart is drawn using D3’s select/append API on a blank HTML page.

KKaustav Sen

81% match