ShdnShmli

@ShdnShmli·5 public vizzes

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset using D3 v5. The visualization partitions data into a radial layout, with arcs representing nodes and their sizes proportional to values. Clicking an arc transitions the view to zoom into that node, re-scaling the partition layout and updating arc paths and labels. The code uses d3.hierarchy, d3.partition, and d3.arc for the layout and rendering, with d3.transition and attrTween animating the zoom. Colors are assigned via d3.scaleOrdinal with an interpolateRainbow range, and SVG text labels rotate and reposition dynamically.

Nov 26, 2021

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A fork of the D3 v5 Zoomable Sunburst example, this visualization shows the hierarchical structure of the Flare dataset as an interactive, animated sunburst diagram. Clicking a node zooms into that branch, smoothly transitioning arcs and labels via `d3.transition` and `transition.attrTween`. It partitions the data with `d3.hierarchy`, `d3.partition`, and `d3.arc`, and colors arcs using `d3.scaleOrdinal` with a rainbow interpolator. The example loads data from the `@observablehq/flare` package, rendering with SVG in an HTML page.

Nov 26, 2021

Loading thumbnail…

Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This radial stacked bar chart visualizes two years of personal electricity usage across multiple accounts in a three-family structure, with a dropdown menu to switch between accounts and each bar segmented by billing year. Built with D3 v7, it uses `scaleBand`, `scaleRadial`, and `arc` to render the circular wedges, while `d3.group` and `d3.stack` transform the CSV data. The SVG chart updates via a reusable bar chart component when the account selection changes, with hover text showing usage details per segment and total.

Nov 24, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates custom D3 axes, including formatted tick labels that convert values to billions and styled tick lines. Built with D3 v5, the code uses `csv` to load data, `scaleLinear` and `scaleBand` for positioning, and `axisBottom` and `axisLeft` for rendering axes. The SVG rendering includes custom labels for the title and x-axis, with styling applied via external CSS.

Nov 24, 2021

Loading thumbnail…

Fisrt Code

This example displays a static greeting, “Hello Viz!”, in large, centered text on a dark background. It uses the D3.js library, specifically its core module from version 5, to load and execute the script. The page defines a constant message and updates the text content of an HTML element. Data from an external file is defined as an array of album objects but is not rendered visually. The styling relies on CSS with an imported Google font, Ubuntu, and a simple color scheme.

Nov 23, 2021