Dustin Brunner

@brunnedu·6 public vizzes

Fork of Rendering Data with React & D3

This example renders a dataset of CSS named colors as a radial burst of pie slices, with each slice filled by its corresponding hex value. It combines React for component structure and state management with D3 utilities (`csv`, `arc`, `pie`) for data loading and shape generation, outputting to SVG. The code loads the color data from a GitHub Gist, and includes a static Plotly scatter plot as an unrelated side element. A loading state displays text until the asynchronous CSV fetch completes.

May 13, 2023

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for 150 flower samples. Built with React and D3 v5, the visualization uses d3.scaleLinear for both axes, d3.extent to compute domains, and d3.csv to load and parse the data. Each circle represents a flower, with tooltips displaying formatted petal length values. The SVG rendering includes styled tick marks, axis labels, and a loading state while data is fetched from the remote CSV source.

May 13, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset with an interactive scatter plot, mapping miles per gallon on the x-axis and horsepower on the y-axis. Circle size encodes vehicle weight, while color distinguishes the region of origin, and hovering reveals the car name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and loads CSV data with D3’s `csv` function. Custom styling configures dark axis labels and a large font size for readability, with the chart automatically fitting the full viewport.

May 12, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiley face rendered as an SVG graphic, built with React and D3. The face consists of a yellow circle with a black stroke, two eye circles, and a mouth drawn as a curved arc shape. The code uses D3’s `arc` generator to define the mouth’s radii and angles, and React’s `ReactDOM.render` to render the SVG into the DOM. It uses precise, hard-coded coordinates to position elements, with all dimensions computed relative to the canvas center.

May 12, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a resizable smiley face rendered as a full-screen SVG using React. The face fills the browser window, with a yellow circle for the head, two black eyes, and a wide smile drawn using SVG primitives. It uses React 16.9 and ReactDOM to render the SVG elements onto a root div, with dimensions and positions computed from `window.innerWidth` and `window.innerHeight`. The face automatically adapts its size and placement to the current viewport.

May 12, 2023

Loading thumbnail…

Hello this is a test

A yellow circle with a black outline sits on an otherwise empty SVG canvas, serving as a minimal demonstration of static vector rendering. The example uses a plain HTML page with an inline `<svg>` element, where a single `<circle>` is positioned at coordinates (200, 0) with a radius of 100. The circle’s fill, stroke color, and stroke width are set directly via SVG attributes. No additional libraries or JavaScript are involved, and the page’s only other content is a linked YouTube video, indicating a bare-bones setup focused on showing basic SVG shape creation.

May 12, 2023