CodyWeisbach

@CodyWeisbach·4 public vizzes

Symptoms at One Year

This bar chart shows the percentage distribution of five symptoms reported at the one-year mark, with knee pain at 90% and shoulder pain at 50%. The static visualization uses SVG rectangles scaled proportionally to each percentage value. The code leverages D3.js (`d3.select`, `d3.scaleLinear`) to map the data from `data.csv` to pixel heights, with axes and labels rendered via SVG text elements. The source data is a small CSV file containing two columns: symptom type and its corresponding percentage.

May 16, 2018

Loading thumbnail…

Injury Healing Times: A visualization with D3.js

This example visualizes the variability and average recovery times for different injury types, such as muscle strains, ligament sprains, and bone injuries, using a scatterplot where each circle represents an injury category. The x-axis shows the range of recovery variability (in days) and the y-axis displays the average days to recovery, with tooltips revealing the specific low and high estimates. Built with D3.js (v3), the visualization uses `d3.scale.linear` for the axes, `d3.svg.axis` for ticks and labels, and SVG circles with mouseover and mouseout transitions that enlarge the points. The data, loaded from a CSV file via `d3.csv`, originates from an infographic by Caleb Burgess, and the animation highlights interactive hovering.

May 15, 2018

Loading thumbnail…

Hello World

This example displays a static HTML page that sets a heading to “Hello world!” using a plain-text string. It uses the D3.js v4 library solely for loading the page structure, though no visual data or charts are rendered. The code selects the first `h1` element with the Document Object Model (DOM) API and updates its text content via `textContent`. The page relies on standard JavaScript and a minimal stylesheet, with no data source, animation, or interactive behavior present.

May 15, 2018

Loading thumbnail…

Scatterplot Tutorial

This scatterplot shows the relationship between calories and protein content for 77 breakfast cereals, with each point colored by manufacturer and a tooltip revealing the cereal name and exact values on hover. Built with D3.js v3, it loads data from a CSV file and uses linear scales, SVG circles for the dots, and axes with labeled ticks. A categorical color scale assigns manufacturer colors, and a legend identifies each brand.

May 14, 2018