StuartSutherland

@StuartSutherland·4 public vizzes

D3 Scatter plot

This D3 scatter plot visualizes the classic Iris dataset using petal length along the x-axis and sepal length along the y-axis. The code loads data asynchronously from a CSV URL, converts numeric fields, and computes linear scales with `d3.scaleLinear`. It renders circles in an SVG container sized to the browser window, with axes drawn via `d3.axisLeft` and `d3.axisBottom`. The visualization demonstrates D3’s data-binding and layout pipeline for a simple multi-point chart.

Jan 9, 2023

Loading thumbnail…

D3 scatter plot

A React-based visualization demonstrates a scatter plot using D3 v3, though the current code renders only a static HTML message. The example shows a minimal setup with an index.html file containing a centered text div, styled via CSS, and loads JavaScript for potential D3 integration. It references a React Starter template, indicating the intent to build interactive D3 charts within a React framework, but no actual scatter plot implementation or data visualization logic is present in the provided files.

Jan 9, 2023

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes a hierarchical dataset representing the Flare visualization toolkit, using an SVG rendering with animated transitions powered by D3 v5. The visualization shows the hierarchical structure as a radial layout, with arcs partitioned by value and colored by top-level category. Clicking a node zooms in to expand that subtree, while clicking the center circle returns to the root. The code uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `transition.attrTween` to animate both the arcs and their labels, with data loaded from an Observable standard library module.

Jan 5, 2023

Loading thumbnail…

SVG fundamentals

This example demonstrates basic SVG shapes rendered directly in an HTML page, using the `circle` and `rect` elements to display geometric primitives with simple fill and stroke styling. The visualization shows a red circle and a yellow rectangle with a navy border, positioned within a 960 by 500 pixel viewport. The code relies on native SVG markup without external libraries or JavaScript, making it a minimal introduction to vector graphics. The CSS properties are applied inline through attributes such as `fill`, `stroke`, and `stroke-width`, illustrating how SVG handles coordinate-based drawing in the browser.

Jan 4, 2023