Skip to main content
SimilarExport ZIP
100%

Injury Healing Times: A visualization with D3.js

✓ Published0🌍 Public
CCodyWeisbach
Last edited May 15, 2018
Created on May 14, 2018

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.

AI-generated description

d3js: Injury Healing Times.

If found a nice <a href='https://www.instagram.com/p/BirUVLyA0xb/?hl=en&taken-by=modernmanualtherapy'>infographic on healing times for different injuries</a> from <a href='https://www.instagram.com/dr.caleb.burgess/?hl=en'>Caleb Burgess</a> via <a href='https://www.instagram.com/modernmanualtherapy/?hl=en'>Modern Manual Therapy</a>. The table is great, but I though it would be interesting to make a visual representation.

I took the code from an example that I thought would be similar (<a href='http://bl.ocks.org/jfreels/'>jfreels</a>'s block: <a href='http://bl.ocks.org/jfreels/6816504'>d3js: Scatterplot using CSV data.</a>). I've done my best to modify it as a way of learning to create data visualizations.

mit Licensed

Similar vizzes

Loading thumbnail…

Activity 7 Tutorial

A reusable scatter plot example demonstrates D3.js modular chart construction with local ES6 imports and a data-driven API. It loads NFL injury data from a GitHub gist, using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render points. The chart’s width, height, margin, and radius are configurable via function methods. A companion area chart illustrates yearly injury totals with `d3.rollup`, `d3.area`, and gridlines, while a pie chart displays injury-type percentages using `d3.pie` and `d3.arc` with a legend. The examples show multiple visualization patterns within a single tutorial.

Mmayasuedorman@gmail.com
70% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot that visualizes the Iris Dataset, with animated transitions between different medical measurements. It shows a static scatter plot initially, then cycles through the dataset’s numerical columns every two seconds, updating the x-axis to reflect the selected variable while the y-axis remains fixed on lymphocyte count. The visualization uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and `selection.join` to manage circle elements. Data is loaded from a CSV file, and the animation uses `setInterval` to repeatedly update the chart.

Hharichandanamone21@gmail.com
69% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot cycles through three blood-related measurements from a medical dataset, displaying a different x-axis variable every two seconds. The visualization uses D3 v6 with a reusable chart module that maps data points to circles, scaling positions with linear axes. It animates by calling a custom `scatterPlot` function with different accessor functions, updating the chart in place. The plot reads CSV data from a remote gist, and the axes are rendered with `axisLeft` and `axisBottom`. The circular markers transition smoothly between states, demonstrating a flexible, data-driven approach to multi-variable exploration.

Hharichandanamone21@gmail.com
69% match
Loading thumbnail…

Reusable D3 Scatter Plot

This animated scatter plot cycles through cancer types—liver, breast, prostate, and thyroid—displaying death rates over time using the Iris Dataset-inspired structure. Built with reusable D3.js components and SVG rendering, the visualization updates every 2 seconds, transitioning between datasets while updating the title and axis labels. Symbols vary by cancer type (circle, square, star) and axes represent years and number of deaths, with smooth transitions on each refresh.

AAsrar Al Qassem
68% match
Loading thumbnail…

Untitled

A stacked bar chart visualizes reported head injuries across five sports, comparing Highschool and College levels from CTE_data.csv. Users click legend items to isolate a single category’s bars, sort them via a checkbox, and hover to reveal tooltips. Built with D3 v3, the SVG uses ordinal scales for sport categories, linear scales for counts, and an animated legend-driven class selector to redraw rects on demand.

KKofi Adu-Gyan
68% match
Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes cancer mortality trends in the USA, cycling through liver, breast, and prostate cancer datasets. Built with D3 v6 as a reusable chart, it animates between cancer types every 3 seconds, updating the y-axis and point symbols (star, square, circle) accordingly. The chart leverages SVG rendering and custom symbol mappings to distinguish cancer types, with axes and margins configured for readability.

Bbhavana.bayyapu@gmail.com
68% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through cancer incidence data from the U.S., visualizing death rates for liver, breast, prostate, and thyroid cancers over time. Using D3 v3, it maps years to the x-axis and population to the y-axis, with each cancer type distinguished by a unique symbol (star, square, circle). The chart updates every two seconds, transitioning smoothly between datasets while rotating through the cancer types, with a title indicating the current type. Built as a reusable module, it demonstrates animated transitions, SVG rendering, and dynamic symbol mapping in a clean, informative design.

AArun
67% match
Loading thumbnail…

Animated Brokenness

This visualization animates the brokenness of the D3.js Git history by displaying stacked area charts that represent monthly commit counts across different repositories. The chart initially renders with random colors for each area, then periodically reassigns new random colors to all areas with staggered transitions, creating a continuously shifting, chaotic visual effect. The code uses D3’s `scaleTime`, `scaleLinear`, `area`, and `stack` APIs to process and render the data, while `transition` and `delay` orchestrate the animated color changes. Data is loaded from a JSON file of all D3 commits, aggregated by month and repository.

CCurran Kelleher
67% match