V — VizHub

100%

V

✓ Published0🌍 Public

Last edited Nov 28, 2020

Created on Nov 28, 2020

Two interactive charts built with Vue and D3 v6 let a user switch between a bar chart of GDP by country and a radial pie variant. The bar chart scales rectangle heights by the `gdp` value, while the ring chart uses a linear angle scale and nested arcs with hover opacity transitions. The pie mode applies `d3.pie` and `d3.arc` with labeled segments.

AI-generated description

Set up Vue starter (?)

MIT Licensed

Similar vizzes

Loading thumbnail…

D3

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.

Mmrharis1

77% match

Loading thumbnail…

Linked Views

A simple bar chart displays GDP by country from a CSV file, using D3 v6 to bind data to SVG rectangles. Hovering over a bar reveals a tooltip showing the country name, following the cursor's position via mouse events. The chart uses scaleBand and scaleLinear for x and y axes, with a fixed width and height. Clicking or interacting with bars updates the tooltip dynamically, demonstrating linked views between data and visual feedback.

DDasbach.EJ

76% 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

75% 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

75% 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

75% match

Loading thumbnail…

Pie Chart with Overlapping Labels

This pie chart displays the GDP of ten countries, with each slice labeled directly on the chart. The labels, however, overlap when slices are narrow or adjacent. The visualization uses D3 v4 with SVG rendering. It creates the pie layout with `d3.pie()` and draws slices using `d3.arc()`. Text labels are positioned via `arc.centroid()` and styled with Arial font. Countries and their GDP values are hardcoded, and slice colors come from a `d3.scaleOrdinal()` with a predefined color range.

Uubl2

75% match

Loading thumbnail…

Untitled

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

Ppriyankab23

75% match

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

75% match