Skip to content

Instantly share code, notes, and snippets.

@nicoguaro

nicoguaro/README.md

Last active September 27, 2015 17:08
Show Gist options
  • Save nicoguaro/b34fe29feb232413375b to your computer and use it in GitHub Desktop.
Save nicoguaro/b34fe29feb232413375b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>
Material comparison: Young modulus vs density
</title>
<style>
.ellip {
fill: white;
fill-opacity: 0.6;
stroke-width: 2;
}
.ellip:hover {
fill: lightgrey;
fill-opacity: 1.0;
}
.axis {
font: 18px serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
}
.grid {
stroke: lightgrey;
opacity: 0.4;
stroke-dasharray: 20, 5;
}
.grid path {
stroke-width: 0;
}
.hull {
fill-opacity: 0.4;
stroke-opacity: 0.7;
stroke-width: 3px;
stroke-linejoin: round;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right:200, bottom: 30, left: 70},
width = 900 - margin.left - margin.right,
height = 560 - margin.top - margin.bottom;
// Setup x
var x = d3.scale.log()
.range([0, width]);
// Setup y
var y = d3.scale.log()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4, function(d) { return d; });
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(8, function(d) { return d; });
var xGrid = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4)
.tickSize(-height, 0, 0)
.tickFormat("");
var yGrid = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(8)
.tickSize(-width, 0, 0)
.tickFormat("");
// setup colors
var cValue = function(d) { return d.Category;},
color = d3.scale.category10();
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var categories = ["Foams", "Elastomers", "Natural materials", "Polymers",
"Nontechnical ceramics", "Composites", "Technical ceramics",
"Metals"]
d3.tsv("materials_E_density.tsv", type, function(error, data) {
if (error) throw error;
x.domain([d3.min(data, function(d) { return d["Density low"]; }),
d3.max(data, function(d) { return d["Density high"]; })])
.nice();
y.domain([d3.min(data, function(d) { return d["Young low"]; }),
d3.max(data, function(d) { return d["Young high"]; })])
.nice();
// Add Grids
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(xGrid);
svg.append("g")
.attr("class", "grid")
.call(yGrid)
// Add axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Density [kg/m\u00B3]");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Young Modulus [GPa]");
// Add enclosing
for (j in categories) {
var cat = categories[j];
var vertices = [];
for (var k in data) {
if (data[k].Category === cat){
vertices.push([x(data[k]["Density low"]), y(data[k]["Young low"])]);
vertices.push([x(data[k]["Density low"]), y(data[k]["Young high"])]);
vertices.push([x(data[k]["Density high"]), y(data[k]["Young low"])]);
vertices.push([x(data[k]["Density high"]), y(data[k]["Young high"])]);
}
}
svg.append("path")
.attr("class", "hull")
.datum(d3.geom.hull(vertices))
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.style("fill", color(cat))
.style("stroke", color(cat));
};
// Add ellipses
svg.selectAll(".ellip")
.data(data)
.enter().append("ellipse")
.attr("class", "ellip")
.attr("cx", function(d) { return 0.5*(x(d["Density low"]) + x(d["Density high"])); })
.attr("cy", function(d) { return 0.5*(y(d["Young low"]) + y(d["Young high"])); })
.attr("rx", function (d) {
var rx = 0.5*(x(d["Density high"]) - x(d["Density low"]))
if (rx < 4) { return 4;}
else {return rx;}
})
.attr("ry", function (d) {
var ry = 0.5*(y(d["Young low"]) - y(d["Young high"]));
if (ry < 4) { return 4;}
else {return ry;}
})
.style("stroke", function(d) { return color(cValue(d));})
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d["Material"])
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");;
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
// Draw legend
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
// draw legend colored rectangles
legend.append("rect")
.attr("x", width - 20)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
// draw legend text
legend.append("text")
.attr("x", width)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "beginning")
.text(function(d) { return d;})
});
function type(d) {
d["Density low"] = +d["Density low"];
d["Density high"] = +d["Density high"];
d["Young low"] = +d["Young low"];
d["Young high"] = +d["Young high"];
return d;
}
</script>
</body>
Raw
materials_E_density.tsv
Material Category Young low Young high Density low Density high
Flexible Foam VLD Foams 0.0003 0.001 16 35
Flexible Foam LD Foams 0.001 0.003 38 70
Flexible Foam MD Foams 0.004 0.012 75 115
Rigid Foam LD Foams 0.023 0.08 36 70
Rigid Foam MD Foams 0.08 0.2 78 165
Rigid Foam HD Foams 0.2 0.48 170 470
Butyl rubber Elastomers 0.001 0.002 900 920
EVA Elastomers 0.01 0.04 945 955
Isoprene Elastomers 0.0014 0.004 930 940
Neoprene Elastomers 0.0007 0.002 1230 1250
Polyurethane Elastomers 0.002 0.03 1020 1250
Silicone elastomers Elastomers 0.005 0.02 1300 1800
Leather Natural materials 0.1 0.5 810 1050
Wood (parallel) Natural materials 6 20 600 800
Wood (perpendicular) Natural materials 0.5 3 600 800
Bamboo Natural materials 15 20 600 800
Cork Natural materials 0.013 0.05 120 240
Polyester Polymers 2.07 4.41 1040 1400
Epoxies Polymers 2.35 3.075 1110 1400
PA Polymers 2.62 3.2 1120 1140
PC Polymers 2 2.44 1140 1210
PE Polymers 0.621 0.896 939 960
PEEK Polymers 3.5 4.2 1300 1320
PET Polymers 2.76 4.14 1290 1400
PP Polymers 0.896 1.55 890 910
PTFE Polymers 0.4 0.552 2140 220
PS Polymers 2.28 3.34 1040 1050
PMMA Polymers 2.24 3.8 1160 1220
Brick Nontechnical ceramics 15 25 1900 2100
Stone Nontechnical ceramics 20 60 2500 3000
Concrete Nontechnical ceramics 25 38 2200 2600
Glass Nontechnical ceramics 61 110 2170 2800
GFRP Composites 15 28 1750 1970
CFRP Composites 69 150 1500 1600
Aluminun/silicon carbide Composites 81 100 2660 2900
Boron carbide Technical ceramics 400 472 2350 2550
Silicon carbide Technical ceramics 280 310 3000 3290
Silicon carbide Technical ceramics 300 460 3000 3210
Alumina Technical ceramics 215 413 3500 3980
Tungsten carbide Technical ceramics 600 720 15300 15900
Lead alloys Metals 12.5 15 10000 11400
Cu alloys Metals 112 148 8930 8940
W alloys Metals 275 365 17000 18500
Steels Metals 189 217 7600 8100
Ni alloys Metals 190 220 8830 8950
Ti Alloys Metals 90 120 4400 4800
Al alloys Metals 68 82 2500 2900
Mg alloys Metals 42 47 1740 1950
Cast iron Metals 165 180 7050 7250
Zn alloys Metals 68 95 4950 7000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment