D3 Examples - Energy Efficiency

Energy Efficiency
This dataset is based on numerical simulation of energy consumption for buldings with different shapes. Different parameters such as height and surface area effects on the building energy consumption is studied.
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>building energy efficiency: Scatterplot Matrix</title>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Roboto");
      body {
        font-family:  Roboto, sans-serif;
        margin: 0;
      }
​
      svg {
        padding: 40px;
        padding-top: 40px;
        padding-right: 10px;
      }
​
      .frame {
        shape-rendering: crispEdges;
      }
​
      .axis line {
        stroke: #ddd;
      }
​
      .axis path {
        display: none;
      }
​
      .cell text {
        font-weight: bold;
      }
​
      .frame {
        fill: #ccc;
        fill-opacity: 0.25;
        stroke: #aaa;
      }
​
      .frame:hover {
        fill-opacity: 0.5;
      }
​
      circle {
        fill-opacity: .3;
        transition: r 0.1s, fill-opacity 0.1s ;
      }
​
​
​
      .fragment {
        fill-opacity: 0.5;
      }
​
      .varlabel {
        font-size: 6pt;
        fill: #333;
      }
​
      .color-legend {
        font-size: 1em;
        fill: #333;
      }
      .color-legend circle {
        fill-opacity: 1;
      }
    </style>
  </head>
  <body>
    <script>
const width = 750, size = 75, padding = 20;
​
const colorValue = d => d.type;
​
const x = d3.scaleLinear()
  .range([padding / 2, size - padding / 2]);
​
const y = d3.scaleLinear()
  .range([size - padding / 2, padding / 2]);
​
const colorScale = d3.scaleOrdinal()
​
const colorLegend = d3.legendColor()
  .scale(colorScale)
  .shape("circle")
  .shapeRadius(6);
​
const nticksX = 1;
const nticksY = 1;
const xAxis = d3.axisBottom().scale(x).ticks(nticksX); 
const yAxis = d3.axisLeft().scale(y).ticks(nticksY);
​
​
const row = d => {
  d["Relative Compactness"] = +d["Relative Compactness"];
  d["Surface Area"] = +d["Surface Area"];
  d["Wall Area"] = +d["Wall Area"];
  d["Roof Area "] = +d["Roof Area"];
  d["Overall Height "] = +d["Overall Height"];
  d["Orientation"] = +d["Orientation"];
  d["Glazing Area "] = +d["Glazing Area"];
  d["Glazing Area Distribution "] = +d["Glazing Area Distribution"];
  d["Heating Load"] = +d["Heating Load"];
  d["Cooling Load"] = +d["Cooling Load"];
  
  return d;
};
​
const tick_format_strings = {
  "Relative Compactness": "0",
  "Surface Area": "0",
  "Wall Area": "0",
  "Roof Area": "0",
  "Overall Height": "0",
  "Orientation": "0",
  "Glazing Area": "",
  "Glazing Area Distribution": "0",
  "Heating Load": "0",
  "Cooling Load": "0"    
};
​
const tooltip_format_strings = {
  "Relative Compactness": "0",
  "Surface Area": "0",
  "Wall Area": "0",
  "Roof Area": "0",
  "Overall Height": ".1f",
  "Orientation": ".1f",
  "Glazing Area": ".3f",
  "Glazing Area Distribution": ".2f",
  "Heating Load": ".1f",
  "Cooling Load": ".2f"
};
​
const tick_format = d => d3.format(tick_format_strings[d]);
const tooltip_format = d => d3.format(tooltip_format_strings[d]);
​
d3.csv("EF.csv", row, data => {
  const domainByTrait = {};
  const traits = ["Relative Compactness","Surface Area" ,"Wall Area","Roof Area" ,"Overall Height" ,"Orientation","Glazing Area","Glazing Area Distribution", "Heating Load" ,"Cooling Load"];
  const n = traits.length;
​
  traits.forEach(trait => {
    domainByTrait[trait] = d3.extent(data, d => d[trait]);
  });
​
  xAxis.tickSize(size * n);
  yAxis.tickSize(-size * n);
​
  const svg = d3.select("body").append("svg")
      .attr("width", size * n + padding)
      .attr("height", size * n + padding)
    .append("g")
      .attr("transform", "translate(" + padding + "," + padding / 2 + ")");
​
  svg.selectAll(".x.axis")
    .data(traits)
    .enter().append("g")
      .attr("class", "x axis")
      .attr("transform", (d, i) => "translate(" + (n - i - 1) * size + ",0)")
    .each(function(d) { 
      x.domain(domainByTrait[d]).nice(nticksX);
      d3.select(this)
        .call(xAxis.tickFormat(tick_format(d)));
    });
​
  svg.selectAll(".x.axis")
    .data(traits)
    .selectAll("text")
    .attr("transform", (d, i) => "translate(0," + (i%2) * padding*2/3 + ")");
​
  svg.selectAll(".y.axis")
    .data(traits)
    .enter().append("g")
      .attr("class", "y axis")
      .attr("transform", (d, i) => "translate(0," + i * size + ")")
    .each(function(d) {
      y.domain(domainByTrait[d]).nice(nticksY);
      d3.select(this)
        .call(yAxis.tickFormat(tick_format(d)));
    });
​
  const colorLegendG = svg.append("g")
      .attr("transform", `translate(10, -30)`);
​
  const cell = svg.selectAll(".cell")
    .data(cross(traits, traits))
    .enter().append("g")
      .attr("class", "cell")
      .attr("transform", d => "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")")
    .each(plot);
​
  colorLegendG.call(colorLegend)
      .attr("class", "color-legend");
​
  // Titles for the diagonal.
  cell.filter(d => d.i === d.j).append("text")
      .attr("class", "varlabel")
      .attr("x", padding)
      .attr("y", padding)
      .attr("dy", ".71em")
    .text(d => d.x);
​
  function plot(p) {
    const cell = d3.select(this);
​
    x.domain(domainByTrait[p.x]).nice(nticksX);
    y.domain(domainByTrait[p.y]).nice(nticksY);
​
    cell.append("rect")
        .attr("class", "frame")
        .attr("x", padding / 2)
        .attr("y", padding / 2)
        .attr("width", size - padding)
        .attr("height", size - padding)
      .append("title")
      .text(d => p.y + " vs. " + p.x);
​
    cell.selectAll("circle")
      .data(data)
      .enter().append("circle")
        .attr("cx", d => x(d[p.x]))
        .attr("cy", d => y(d[p.y]))
        .attr("r", 2)
        .attr("fill", d => colorScale(colorValue(d)))
      .append("title")
      .text(d => d.Object + "\n"
          + p.x + ": " + tooltip_format(p.x)(d[p.x]) + "\n"
          + p.y + ": " + tooltip_format(p.y)(d[p.y]));
​
  }
​
});
​
function cross(a, b) {
  const c = [], n = a.length, m = b.length;
  let i, j;
  for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
  return c;
}
​
    </script>
  </body>
</html>
​
    