D3 Examples - tstat2

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.grid line {
  fill: none;
  stroke: grey;
  stroke-width: 0.5;
  shape-rendering: crispEdges; }
.area { fill: lightgrey;}
​
.text {
      font: 15px sans-serif;}
​
.blocks1 {
      stroke: black;
      stroke-width: 0.5;}
​
.blocks2{
      stroke: black;
      stroke-width: 0.5;}
​
.blocks3 {
      stroke: black;
      stroke-width: 0.5;}
​
.timer {
      font: 50px sans-serif;
      text-anchor:  middle;
      font-family": sans-serif;
      font-weight: bold;}
​
​
</style>
<body>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
​
<script>
​
var margin = {top: 20, right: 50, bottom: 40, left: 50},
    width = 1100 - margin.left - margin.right,
    height = 540 - margin.top - margin.bottom;
​
var time = 1500;
var x_qty = 12;
var ytemprange = 100;
var blockn = 20;
var blockw = 30;
​
var x = d3.scaleLinear().range([0, width]); // used for grid
var y = d3.scaleLinear().range([height, 0]); // used for grid
​
var x_scale  = d3.scaleLinear()
                .domain([0,x_qty])
                .range([0, width]);
var y_scale  = d3.scaleLinear()
                .domain([0,ytemprange])
                .range([height,0]);
​
var c_scale = d3.scaleLinear()
                .domain([60,160])
                .range([1,0]);
​
var format = d3.format(",d");
​
// BUTTONS
d3.select("body").append("button").attr("id","Button1").text("Run")
​
//objects arrays xs = xstart, ys = ystart, yn = normal lifetime, ye = tstat limit or part limit, slope is in K/min
var dataset1 = [];
var dataset2 = [];
​
var f = d3.format(".1f");
​
// CREATING A DATASET FOR THE LOCATION OF THE BLOCKS
for (var i = 0; i < blockn; i++) {
var loc1 = f((i*(width-blockw)/(blockn-1))+(blockw/2));
var loc2 = f((i*(width-blockw)/(blockn-1))+(blockw/2));
var loc3 = f((i*(width-blockw)/(blockn-1))+(blockw/2));
var val1 = f(100-(i)*(30/(blockn-1)));
var val2 = f(95-(i)*(30/(blockn-1)));
var val3 = f(90-(i)*(30/(blockn-1)));
dataset1.push([loc1,loc2,loc3,val1,val2,val3]);}
​
​
for (var i = 0; i < blockn; i++) {
var loc1 = f((i*(width-blockw)/(blockn-1))+(blockw/2));
var loc2 = f((i*(width-blockw)/(blockn-1))+(blockw/2));
var loc3 = f((i*(width-blockw)/(blockn-1))+(blockw/2));
var val1 = f(160-(i)*(30/(blockn-1)));
var val2 = f(155-(i)*(30/(blockn-1)));
var val3 = f(150-(i)*(30/(blockn-1)));
dataset2.push([loc1,loc2,loc3,val1,val2,val3]);}
​
// xaxis generator
var xAxis = d3.axisBottom()
              .scale(x_scale)
              .ticks(12);
// yaxis generator
var yAxis = d3.axisLeft()
              .scale(y_scale)
              .ticks(5);
​
var formatPercent = d3.format(".3s");
​
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 + ")");
​
// call the xaxis
svg.append("g")
                .attr("transform", "translate(0," + (height) + ")")
                .call(xAxis);
​
// call the yaxis
svg.append("g")
          .attr("transform", "translate(" + 0 + ",0)")
          .call(yAxis);
​
svg.append("text")
   .attr("class", "timer")
   .attr("text-anchor", "middle")
   .attr("x", width-30)
   .attr("y", 30)
   .text("1")
​
   svg.append("text")
       .attr("class", "y label")
       .attr("text-anchor", "middle")
       .attr("x", -height/2)
       .attr("y", -40)
       .attr("dy", ".75em")
       .attr("transform", "rotate(-90)")
       .text("Temperature [C]");
​
svg.selectAll("loc1")
  .data(dataset1)
  .enter()
  .append("rect")
  .attr("class", "blocks1")
  .attr("fill", function(d){
    return d3.rgb(d3.interpolateWarm(c_scale(d[3])));
  })
  .attr("x", function (d){return d[0];})
  .attr("y", height-50)
  .attr("width",blockw)
  .attr("height", blockw)
​
svg.selectAll("loc2")
  .data(dataset1)
  .enter()
  .append("rect")
  .attr("class", "blocks2")
  .attr("fill", function(d){
    return d3.rgb(d3.interpolateWarm(c_scale(d[4])));
  })
  .attr("x", function (d){return d[1];})
  .attr("y", height-100)
  .attr("width",blockw)
  .attr("height", blockw)
​
svg.selectAll("loc3")
  .data(dataset1)
  .enter()
  .append("rect")
  .attr("class", "blocks3")
  .attr("fill", function(d){
    return d3.rgb(d3.interpolateWarm(c_scale(d[5])));
  })
  .attr("x", function (d){return d[2];})
  .attr("y", height-150)
  .attr("width",blockw)
  .attr("height", blockw)
​
//ACTION TIME
d3.select("#Button1")
                .on("click", function() {
​
svg.selectAll(".timer")
    .transition()
    .ease(d3.easeLinear)
    .duration(10000)
    .tween("text", function(d) {
                      var that = d3.select(this),
                      i = d3.interpolateNumber(1,1500);
                      return function(t) { that.text(format(i(t))); };})
​
​
svg.selectAll(".blocks1")
  .data(dataset2)
  .transition()
  .ease(d3.easeLinear)
  .duration(10000)
  .attr("fill", function(d){
    return d3.rgb(d3.interpolateWarm(c_scale(d[3])));
  })
  .attr("x", function (d){return d[0];})
  .attr("y", height-50)
  .attr("width",blockw)
  .attr("height", blockw)
​
  svg.selectAll(".blocks2")
    .data(dataset2)
    .transition()
    .ease(d3.easeLinear)
    .duration(10000)
    .attr("fill", function(d){
      return d3.rgb(d3.interpolateWarm(c_scale(d[4])));
    })
    .attr("x", function (d){return d[1];})
    .attr("y", height-100)
    .attr("width",blockw)
    .attr("height", blockw)
​
​
    svg.selectAll(".blocks3")
      .data(dataset2)
      .transition()
      .ease(d3.easeLinear)
      .duration(10000)
      .attr("fill", function(d){
        return d3.rgb(d3.interpolateWarm(c_scale(d[5])));
      })
      .attr("x", function (d){return d[2];})
      .attr("y", height-150)
      .attr("width",blockw)
      .attr("height", blockw)
​
​
​
​
      });
​
​
​
</script>
</body>
​
    