File:Young vs density linear.svg

Original file (SVG file, nominally 960 × 500 pixels, file size: 13 KB)

Summary

Description
English: The plot shows Young modulus vs density for a sample of 50 materials. The colors represent families of materials.
Español: El gráfico presenta módulo de Young vs densidad para una muestra de 50 materiales. Los colores respresentan familias de materiales.
Date
Source Own work
Author Nicoguaro

The SVG file was created using D3.js and then using SVG Crowbar. The code is below.

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<title>Young modulus versus density</title>

<style>
.ellip {
  fill-opacity: 0.1;
  stroke-width: 2;
}

.axis {
  font: 18px serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.grid {
    stroke: lightgrey;
    opacity: 0.5;
    stroke-dasharray: 20, 5;
}
.grid path {
      stroke-width: 0;
}
</style>

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 40, bottom: 30, left: 70},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Setup x and y
var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .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; });

// Setup grids
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);

d3.tsv("materials_E_density.tsv", type, function(error, data) {
  if (error) throw error;
  

  x.domain([0,
            10000]);
  y.domain([0,
            500]);

  // 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 ellipses
  svg.selectAll(".ellip")
      .data(data)
    .enter().append("ellipse")
      .attr("class", "ellip")
      .attr("cx", function(d) { return x(0.5*(d["Density low"] + d["Density high"])); })
      .attr("cy", function(d) { return y(0.5*(d["Young low"] + d["Young high"])); })
      .attr("rx", 10)
      .attr("ry", 10)
      .style("stroke", function(d) { return color(cValue(d));})
      .style("fill", function(d) { return color(cValue(d));});

  // 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 - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  // draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .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>
</html>

The content of the file materials_E_density.tsv is below[1]

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	2200
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

Licensing

I, the copyright holder of this work, hereby publish it under the following license:
w:en:Creative Commons
attribution
This file is licensed under the Creative Commons Attribution 4.0 International license.
You are free:
  • to share – to copy, distribute and transmit the work
  • to remix – to adapt the work
Under the following conditions:
  • attribution – You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
  1. Ashby, Michael F. (2005) Materials Selection in Mechanical Design, United States of America: Elsevier Ltd., p. 251 ISBN: 978-0-7506-6168-3.

Captions

Add a one-line explanation of what this file represents

Items portrayed in this file

depicts

29 August 2015

File history

Click on a date/time to view the file as it appeared at that time.

Date/TimeThumbnailDimensionsUserComment
current02:39, 1 September 2015Thumbnail for version as of 02:39, 1 September 2015960 × 500 (13 KB)NicoguaroFix typo in material data for PTFE.
22:04, 29 August 2015Thumbnail for version as of 22:04, 29 August 2015960 × 500 (47 KB)NicoguaroUser created page with UploadWizard

The following page uses this file:

Global file usage

The following other wikis use this file:

Metadata