Visualizing Material Properties with Interactive D3.js Charts

Tech Stack

D3.js
JavaScript
SVG
Data Visualization
GitHub Pages
HTML5
CSS3

Built interactive Ashby-style scatter plot with D3.js visualizing mechanical properties (strength, stiffness, density, cost) for 50+ materials across metals, ceramics, polymers, and composites. Implemented log-scale axes, zoom/pan, category filtering, and hover tooltips. Calculates performance indices (strength-to-weight, specific modulus) for material selection. 1,000+ student views.

Live Demo

Overview

Built interactive Ashby-style scatter plot with D3.js visualizing mechanical properties (strength, stiffness, density, cost) for 50+ materials across metals, ceramics, polymers, and composites. Implemented log-scale axes, zoom/pan, category filtering, and hover tooltips. Calculates performance indices (strength-to-weight, specific modulus) for material selection. 1,000+ student views.

Key Features

Technical Implementation

This project leverages D3.js and JavaScript to create a robust solution. More detailed write-up coming soon.