drmurugesh

@drmurugesh·3 public vizzes

Scatter Plot

This interactive scatter plot explores relationships among movie budget, gross revenue, and IMDb scores using data loaded from a CSV file. Dropdown menus let users select which three measures to compare on the x-axis, y-axis, and color scale. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render animated SVG circles that transition from the chart’s center to their final positions. A modular `dropdownMenu` component and reusable `scatterPlot` function structure the code for maintainability.

May 28, 2019

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst chart visualizes the hierarchical structure of the Flare software project, using nested arcs where each ring represents a level in the tree and arc angles are proportional to each node's value. The example, ported from an Observable notebook, loads the data from the `@observablehq/flare` library and renders it using SVG. User interactions trigger the `clicked` function, which sets new target values for the `d3.partition()` layout and uses `g.transition().duration(750)` along with `attrTween` on the path elements to animate the zoom across its layered structure.

May 28, 2019

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical structure of the Flare data library, using D3 v5’s `d3.arc`, `d3.partition`, and `d3.hierarchy` APIs. The root hierarchy is loaded via an ObservableHQ library (`@observablehq/stdlib`), and each ring segment is colored by top-level category with proportional arc lengths. Clicking a node smoothly zooms the chart via `transition.attrTween` and `d3.interpolate`, animating both arc geometry and label rotation. The SVG rendering includes hover tooltips showing the full path and numeric value for each leaf.

May 28, 2019