Skip to main content
SimilarExport ZIP
100%

Vis update

✓ Published2🌍 Public
Llars-ruijs
Last edited Nov 12, 2020
Created on Nov 11, 2020

This example shows a bar chart of cities by number of P+R locations, and a pie chart of the capacity distribution for the selected city. The bar chart is drawn with SVG using `d3.scaleBand` and `d3.scaleLinear`, with bars colored in `dodgerblue`. Clicking a bar triggers `updatePie`, which filters sample data and calls `drawPie`. The pie chart uses `d3.pie` and `d3.arc`, with slices colored via `d3.schemeTableau10` and labels showing capacities. The code uses D3 v6 and dummy data based on cleaned RDW data.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical data across different regions. Hovering over a bar filters the pie chart and legend to show the breakdown of sub-categories for that region. The visualization uses D3.js (v3) to render SVG elements with animated transitions, and is built within a React framework. The bar chart displays frequencies for each region, while the pie chart and legend update dynamically to reflect the selected region's distribution, using mouseover and mouseout events to trigger the updates.

Vvans01
75% match
Loading thumbnail…

Fork of Pie Chart

This example shows a pie chart displaying city names and their corresponding values, with each slice labeled by its city and numeric value. The chart uses D3 version 6 to load data from a CSV file and render the visualization in SVG. The code constructs the pie with `d3.pie()`, generates arc paths with `d3.arc()`, and applies a color scale using `d3.scaleOrdinal()` with a quantized interpolator. Labels are positioned using arc centroids, and the chart includes white stroke separators between slices.

SSam Hege
75% match
Loading thumbnail…

RDW Data cleaning

This interactive dashboard visualizes the distribution of P+R parking capacities across Dutch cities, using data from the RDW open data portal. A bar chart shows the number of P+R locations per city, and clicking any bar generates a pie chart breaking down the parking capacity of each facility within that city. The visualization uses d3.scaleBand and d3.scaleLinear for the bar chart, while the pie chart is built with d3.arc and d3.pie. All graphics are rendered as SVG, with React managing the page structure.

Llars-ruijs
75% match
Loading thumbnail…

Interactive pie and bar

This example shows an interactive dashboard combining a bar chart with a pie chart. Hovering over a bar filters the pie chart to display the frequency distribution for that state, while moving the mouse away resets it to the overall totals. The bar chart uses an ordinal scale for x-axis positioning and a linear scale for y-axis heights, with transitions animating both bar heights and colors. The pie chart is built using D3’s arc generator and updates its data on hover events. The data comes from a JSON file with per-state frequency values.

Vvans01
74% match
Loading thumbnail…

Interactive pie and bar

This example shows an interactive dashboard linking a bar chart of export totals for 2019 with a pie chart of category breakdowns by state. Hovering over a bar filters the pie chart and legend to show the proportions of Agricola, Industrial, and Pecuario exports for that state, with mouseout resetting the display to the overall totals. Built with React and D3.js v3, it uses ordinal and linear scales, SVG rectangles and paths, and animated transitions to update the bar heights, text labels, and pie segments.

IIgnacio Esquivel
74% match
Loading thumbnail…

D3 in depth

This example shows horizontal bar charts for the populations of five cities, with city names positioned to the right of each bar. A hover effect changes the bar color from steelblue to orange. The visualization is built with D3 v7, using selections, data binding, and the `join` method to create SVG `rect` and `text` elements. The data is hard-coded in an array of city objects, and bar widths are scaled by multiplying population values by a constant factor.

SSubhendu Karmakar
74% 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
74% match
Loading thumbnail…

Interactive pie and bar

This interactive dashboard synchronizes a bar chart and a pie chart to explore categorical frequency distributions across multiple states. Hovering over a bar updates the pie chart and legend to show the breakdown of the selected state’s data into low, mid, and high segments, while moving the mouse away restores the overall totals. Built with React and D3.js v3, the visualization uses SVG for rendering and animated transitions to smoothly update the bar heights, colors, and labels, as well as the pie chart slices. The bar chart uses an ordinal scale for the x-axis, and the pie chart’s updates are driven by calling its `update` function with new data.

Ssowbalas
74% match