nicoguaro/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<!--
Example based on http://bl.ocks.org/weiglemc/6185069
-->

<style>
.circ {
  fill: steelblue;
  stroke: black;
}

.circ:hover {
  fill: brown;
}

.axis {
  font: 14px serif;
}

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

.tooltip {
  position: absolute;
  width: 200px;
  height: 28px;
  pointer-events: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

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

// Setup x
var xValue = function(d) { return d.Density;},
    x = d3.scale.linear()
    .range([0, width]);

var yValue = function(d) { return d.Young;},
    y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")

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.tsv", type, function(error, data) {
  if (error) throw error;


  x.domain([0, d3.max(data, function(d) { return d.Density; })]);
  y.domain([0, d3.max(data, function(d) { return d.Young; })]);

  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^3]");

  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 [MPa]");

  svg.selectAll(".circ")
      .data(data)
    .enter().append("circle")
      .attr("class", "circ")
      .attr("cx", function(d) { return x(d.Density); })
      .attr("cy", function(d) { return y(d.Young); })
      .attr("r", 10)
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d["material"] + "<br/> (" + xValue(d)
             + ", " + yValue(d) + ")")
               .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);
      });

});


function type(d) {
  d.Young = +d.Young;
  d.Density = +d.Density;
  d.Poisson = +d.Poisson;
  return d;
}

</script>
</body>

## materials.tsv

          
            material
            Young
            Poisson
            Density

            
              Tungsten Carbide
              500
              0.22
              1550

            
              Silicon Carbide
              450
              0.22
              2850

            
              Tungsten
              410
              0.30
              1550

            
              Alumina
              390
              0.25
              7600

            
              Titanium Carbide
              380
              0.19
              2850

            
              Silicon Nitride
              300
              0.22
              3200

            
              Nickel
              215
              0.31
              8900

            
              CFRP
              150
              0.20
              1550

            
              Iron
              196
              0.30
              7900

            
              Low alloy steels
              200
              0.30
              7800

            
              Stainless steel
              200
              0.30
              7600

            
              Mild steel
              196
              0.30
              7800

            
              Copper
              124
              0.34
              8900

            
              Titanium
              116
              0.30
              4500

            
              Silicon
              107
              0.22
              2850

            
              Silica glass
              094
              0.16
              2600

            
              Aluminum & alloys
              70
              0.35
              2750

            
              Concrete
              50
              0.30
              2450

            
              GFRP
              20
              0.30
              1800

            
              Wood, parallel grain
              13
              0.20
              600

            
              Polyimides
              4
              0.28
              1400

            
              Nylon
              3
              0.25
              1150

            
              PMMA
              3.400
              0.37
              1200

            
              Polycarbonate
              2.600
              0.36
              1250

            
              Natural Rubbers
              0.050
              0.49
              870

            
              PVC
              0.005
              0.41
              1450
	<!DOCTYPE html>
	<meta charset="utf-8">

	<!--
	Example based on http://bl.ocks.org/weiglemc/6185069
	-->

	<style>
	.circ {
	fill: steelblue;
	stroke: black;
	}

	.circ:hover {
	fill: brown;
	}

	.axis {
	font: 14px serif;
	}

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

	.tooltip {
	position: absolute;
	width: 200px;
	height: 28px;
	pointer-events: none;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

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

	// Setup x
	var xValue = function(d) { return d.Density;},
	x = d3.scale.linear()
	.range([0, width]);

	var yValue = function(d) { return d.Young;},
	y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")

	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.tsv", type, function(error, data) {
	if (error) throw error;


	x.domain([0, d3.max(data, function(d) { return d.Density; })]);
	y.domain([0, d3.max(data, function(d) { return d.Young; })]);

	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^3]");

	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 [MPa]");

	svg.selectAll(".circ")
	.data(data)
	.enter().append("circle")
	.attr("class", "circ")
	.attr("cx", function(d) { return x(d.Density); })
	.attr("cy", function(d) { return y(d.Young); })
	.attr("r", 10)
	.on("mouseover", function(d) {
	tooltip.transition()
	.duration(200)
	.style("opacity", .9);
	tooltip.html(d["material"] + "<br/> (" + xValue(d)
	+ ", " + yValue(d) + ")")
	.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);
	});

	});


	function type(d) {
	d.Young = +d.Young;
	d.Density = +d.Density;
	d.Poisson = +d.Poisson;
	return d;
	}

	</script>
	</body>
material	Young	Poisson	Density
Tungsten Carbide	500	0.22	1550
Silicon Carbide	450	0.22	2850
Tungsten	410	0.30	1550
Alumina	390	0.25	7600
Titanium Carbide	380	0.19	2850
Silicon Nitride	300	0.22	3200
Nickel	215	0.31	8900
CFRP	150	0.20	1550
Iron	196	0.30	7900
Low alloy steels	200	0.30	7800
Stainless steel	200	0.30	7600
Mild steel	196	0.30	7800
Copper	124	0.34	8900
Titanium	116	0.30	4500
Silicon	107	0.22	2850
Silica glass	094	0.16	2600
Aluminum & alloys	70	0.35	2750
Concrete	50	0.30	2450
GFRP	20	0.30	1800
Wood, parallel grain	13	0.20	600
Polyimides	4	0.28	1400
Nylon	3	0.25	1150
PMMA	3.400	0.37	1200
Polycarbonate	2.600	0.36	1250
Natural Rubbers	0.050	0.49	870
PVC	0.005	0.41	1450