Commit 6d6119b4 authored by Sam Calisch's avatar Sam Calisch

moved

parents
This diff is collapsed.
<html lang="en">
<head>
<title>energy</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" type="text/css" href="style/ternary.css">
<script type='text/javascript' src='js/jquery-3.0.0.min.js'></script>
<script type='text/javascript' src='js/mustache.min.js'></script>
<script type='text/javascript' src='js/parse-bibtex.js'></script>
<script type='text/javascript' src='js/parse_citations.js'></script>
</head>
<body>
<script charset="UTF-8" src="js/d3.min.js"></script>
<script charset="UTF-8" src="js/ternary.js"></script>
<div id="plot" style='text-align:center;'></div>
<div id='define'>
<p><span id='word'> Materials energy: </span>
<span id='definition'>Energy required to bring raw materials from reference state (earth’s crust) to start of product-specific manufacturing.</span></p>
</div>
<div id='define'>
<p><span id='word'> Manufacturing energy: </span>
<span id='definition'>Energy for product specific industrial production. This includes transporting parts to end use location and installation/distribution at end use location.</span></p>
</div>
<div id='define'>
<p><span id='word'>End use energy:</span>
<span id='definition'>Energy required to utilize the service provided by the product. This includes active use power, maintenance, and disposal.</span></p>
</div>
<h2>Studies</h2>
<ul id='studies'></ul>
<h2>References</h2>
<div id="bib"></div>
<script type='text/javascript'>make_all_citations('energy.bib');</script>
<script >
var plot_opts = {
side: 550,
height:580,
margin: {top:40,left:150,bottom:20,right:150},
axis_labels:['Materials Energy','Manufacturing Energy','End Use Energy',],
axis_ticks:d3.range(0, 101, 20),
minor_axis_ticks:d3.range(0, 101, 5)
}
var tp = ternaryPlot( '#plot', plot_opts );
$.getJSON("results.json", function(studies){
var d = []
var studylist = document.getElementById("studies");
for(var key in studies){
//build data for d3
os = studies[key]['label_offset'] ? studies[key]['label_offset'] : [0,0];
d.push({
materials_energy:studies[key]['materials_energy'],
manufacturing_energy:studies[key]['manufacturing_energy'],
use_energy:studies[key]['use_energy'],
label:key,
url:studies[key]['url'],
offset: os
});
//build list of links to studies
var entry = document.createElement("li");
var template = "<a href={{url}}>"+key+"</a>";
entry.innerHTML = Mustache.to_html(template,studies[key]);
studylist.appendChild(entry);
}
tp.data(d, function(d){ return [d.materials_energy, d.manufacturing_energy, d.use_energy, d.label, d.url, d.offset]}, 'label');
});
//TODO: Build a full bibliography here
</script>
</body>
</html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
//curve fitting routines
//requires math.js
function linear_least_squares(phis,xs,ys){
//return beta_j that minimizes sum_i(f(x_i)-y_i)**2 where f=sum_j beta_j phi_j
//see https://en.wikipedia.org/wiki/Least_squares
//first evaluate basis functions at data points
var X = [];
for(var i=0; i<xs.length; i++){
var X_i = [];
for(var j=0; j<phis.length; j++){
X_i.push( phis[j](xs[i]) );
}
X.push(X_i);
}
//then solve linear system
return math.lusolve( math.multiply( math.transpose(X), X ), math.multiply( math.transpose(X), ys ));
}
function linear_fit(xs,ys){
// f = beta[0]*x + beta[1]
return linear_least_squares([function(x){return x;}, function(x){return 1;}],xs,ys);
}
function homogeneous_quadratic_fit(xs,ys){
// f = beta[0] * x^2
return linear_least_squares([function(x){return x*x;}],xs,ys);
}
function exponential_fit(xs,ys){
//f = beta[0] * e^(beta[1]*x)
var beta = linear_least_squares([function(x){return 1;}, function(x){return x;} ], xs, ys.map(Math.log));
beta[0] = Math.exp(beta[0]);
return beta
}
function power_fit(xs,ys){
//f = beta[0] * x ^ beta[1]
var beta = linear_least_squares([function(x){return 1;}, function(x){return Math.log(x);} ], xs, ys.map(Math.log) );
beta[0] = Math.exp(beta[0]);
return beta;
}
// d3.legend.js
// (C) 2012 ziggy.jonsson.nyc@gmail.com
// MIT licence
(function() {
d3.legend = function(g) {
g.each(function() {
var g= d3.select(this),
items = {},
svg = d3.select(g.property("nearestViewportElement")),
legendPadding = g.attr("data-style-padding") || 5,
lb = g.selectAll(".legend-box").data([true]),
li = g.selectAll(".legend-items").data([true])
lb.enter().append("rect").classed("legend-box",true)
li.enter().append("g").classed("legend-items",true)
svg.selectAll("[data-legend]").each(function() {
var self = d3.select(this)
items[self.attr("data-legend")] = {
pos : self.attr("data-legend-pos") || this.getBBox().y,
color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke")
}
})
items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})
li.selectAll("text")
.data(items,function(d) { return d.key})
.call(function(d) { d.enter().append("text")})
.call(function(d) { d.exit().remove()})
.attr("y",function(d,i) { return i+"em"})
.attr("x","1em")
.text(function(d) { ;return d.key})
li.selectAll("circle")
.data(items,function(d) { return d.key})
.call(function(d) { d.enter().append("circle")})
.call(function(d) { d.exit().remove()})
.attr("cy",function(d,i) { return i-0.25+"em"})
.attr("cx",0)
.attr("r","0.4em")
.style("fill",function(d) { return d.value.color})
// Reposition and resize the box
var lbbox = li[0][0].getBBox()
lb.attr("x",(lbbox.x-legendPadding))
.attr("y",(lbbox.y-legendPadding))
.attr("height",(lbbox.height+2*legendPadding))
.attr("width",(lbbox.width+2*legendPadding))
})
return g
}
})()
\ No newline at end of file
//make a stacked line graph from data
//following chart API, except using selection as input: https://bost.ocks.org/mike/chart/
function lineGraph() {
var width = 600, // default width
height = 400, // default height
margin = {top: 30, right: 20, bottom: 30, left: 50},
color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]),
xaxislabel = '',
yaxislabel = '',
offset = 'zero',
selection_string = '',
legend_font_size="",
title = '',
data = []; //data
function my() {
//create axes
var minyval = 0;//d3.min(data, function(d){return d3.min(_.map(d.values, 'y'));});
var maxyval = d3.max(data, function(d){return d3.max(_.map(d.values, 'y'));});
var minxval = d3.min(data, function(d){return d3.min(_.map(d.values, 'x'));});
var maxxval = d3.max(data, function(d){return d3.max(_.map(d.values, 'x'));});
var x = d3.scale.linear().domain([minxval,maxxval]).range([0, width]);
var y = d3.scale.linear().domain([minyval,maxyval]).range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10);
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
//create svg
var svg = d3.select(selection_string)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class","graph")
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
svg.selectAll("path")
.data(_.map(data, 'values'))
.enter()
.append("path")
.attr("fill","none")
.attr("d", line)
.attr("stroke-width","2px")
.style("stroke", function(d,i) { return color(i); })
.attr("data-legend",function(d,i) { return data[i].name});
//must append axes after binding data.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.style("font-size",12);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.style("font-size",12);
svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", "translate("+ (margin.left/2) +","+(height/2)+")rotate(-90)")
.text(yaxislabel);
svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", "translate("+ (width/2) +","+(height-(margin.bottom/3))+")")
.text(xaxislabel);
if (legend_font_size != 0){
legend = svg.append("g")
.attr("class","legend")
.attr("transform","translate(50,50)")
.style("font-size",legend_font_size)
.call(d3.legend)
}
if (title != ''){
svg.append("text")
.attr("x", width/2)
.attr("y", 16)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text(title);
}
}
my.width = function(value) {
if (!arguments.length) return width;
width = value;
return my;
};
my.height = function(value) {
if (!arguments.length) return height;
height = value;
return my;
};
my.margin = function(value) {
if (!arguments.length) return margin;
margin = value;
return my;
};
my.color = function(value) {
if (!arguments.length) return color;
color = value;
return my;
};
my.xaxislabel = function(value) {
if (!arguments.length) return xaxislabel;
xaxislabel = value;
return my;
};
my.yaxislabel = function(value) {
if (!arguments.length) return yaxislabel;
yaxislabel = value;
return my;
};
my.offset = function(value) {
if (!arguments.length) return offset;
offset = value;
return my;
};
my.legend_font_size = function(value) {
if (!arguments.length) return legend_font_size;
legend_font_size = value;
return my;
};
my.title = function(value) {
if (!arguments.length) return title;
title = value;
return my;
};
my.selection_string = function(value) {
if (!arguments.length) return selection_string;
selection_string = value;
return my;
};
my.data = function(value) {
if (!arguments.length) return data;
data = value;
return my;
};
return my;
}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
//make a stacked line graph from data
//following chart API, except using selection as input: https://bost.ocks.org/mike/chart/
function pieChart() {
var width = 500, // default width
height = 500, // default height
outer_radius = Math.min(width, height) / 2,
inner_radius = outer_radius/2,
title = '';
//margin = {top: 30, right: 20, bottom: 30, left: 50},
color = d3.scale.category20();
//color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]),
//color = d3.scale.ordinal().range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]);
slice_value = function(d){return d[0]},
label_value = function(d){return d[0]},
selection_string = '',
data = []; //data
function my() {
var arc = d3.svg.arc()
.outerRadius(outer_radius-10)
.innerRadius(inner_radius-10);
var labelArc = d3.svg.arc()
.outerRadius(outer_radius+10 )
.innerRadius(outer_radius+10 );
var pie = d3.layout.pie()
.sort(null)
.value(slice_value);
var svg = d3.select(selection_string).append("svg")
.attr("id","pie")
.attr("width", width)
.attr("height", height+16)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (16+height / 2) + ")");
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d,i) { return color(i); });
g.append("text")
.attr("transform", function(d) {
var pos = labelArc.centroid(d);
pos[0] = (outer_radius+10) * (midAngle(d) < Math.PI ? 1 : -1);
return "translate(" + pos + ")";
})
.attr("dy", ".35em")
.attr("text-anchor",function(d){
return midAngle(d) < Math.PI ? "start":"end";
})
.text( label_value )
function midAngle(d){
return d.startAngle + (d.endAngle - d.startAngle)/2;
}
var polyline = svg.selectAll("polyline")
.data(pie(data), label_value);
polyline.enter()
.append("polyline")
.style("fill","none")
.style("stroke","black")
.style("opacity",.3)
.style("stroke-width","2px");
polyline.attr("points",function(d){
var pos = labelArc.centroid(d);
pos[0] = (outer_radius+10) * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
return [arc.centroid(d), labelArc.centroid(d), pos];
});
g.selectAll("text")
.call(my.wrap, 125)
if (title != ''){
svg.append("text")
.attr("x", 0)
.attr("y", -height/2)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text(title);
}
}
my.wrap = function (text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = .5, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
my.width = function(value) {
if (!arguments.length) return width;
width = value;
outer_radius = Math.min(width, height) / 2-20;
inner_radius = outer_radius/2;
return my;
};
my.height = function(value) {
if (!arguments.length) return height;
height = value;
outer_radius = Math.min(width, height) / 2-20 ;
inner_radius = outer_radius/2;
return my;
};
my.inner_radius = function(value) {
if (!arguments.length) return inner_radius;
inner_radius = value;
return my;
};
my.outer_radius = function(value) {
if (!arguments.length) return outer_radius;
outer_radius = value;
return my;
};
// my.margin = function(value) {
// if (!arguments.length) return margin;
// margin = value;
// return my;
// };
my.color = function(value) {
if (!arguments.length) return color;
color = value;
return my;
};
my.slice_value = function(value) {
if (!arguments.length) return slice_value;
slice_value = value;
return my;
};
my.label_value = function(value) {
if (!arguments.length) return label_value;
label_value = value;
return my;
};
my.selection_string = function(value) {
if (!arguments.length) return selection_string;
selection_string = value;
return my;
};
my.data = function(value) {
if (!arguments.length) return data;
data = value;
return my;
};
my.title = function(value) {
if (!arguments.length) return title;
title = value;
return my;
};
return my;
}
\ No newline at end of file
//make a stacked line graph from data
//following chart API, except using selection as input: https://bost.ocks.org/mike/chart/
function stackedLineGraph() {
var width = 600, // default width
height = 400, // default height
margin = {top: 30, right: 20, bottom: 30, left: 50},
color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]),
xaxislabel = '',
yaxislabel = '',
offset = 'zero',
legend_font_size="18px",
selection_string = '',
title = '',
data = []; //data
function my() {
//stack data
stack = d3.layout.stack()
.offset(offset)
.values( function(d){ return d.values;} );
layers = stack( data )
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
//create axes
var minyval = d3.min(data, function(d){return d3.min(_.map(d.values, 'y0'));});
var maxyval = d3.max(data, function(d){return d3.max(_.map(d.values, function(d){return d.y0+d.y;}));});
var minxval = d3.min(data, function(d){return d3.min(_.map(d.values, 'x'));});
var maxxval = d3.max(data, function(d){return d3.max(_.map(d.values, 'x'));});
var x = d3.scale.linear().domain([minxval,maxxval]).range([0, width]);
var y = d3.scale.linear().domain([minyval,maxyval]).range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10);
//create svg
var svg = d3.select(selection_string)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class","graph")
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
svg.selectAll("path")
.data(_.map(layers, 'values'))
//.data(layers)
.enter()
.append("path")
.attr("d", area)
.style("fill", function(d,i) { return color(i); })
.attr("data-legend",function(d,i) { return data[i].name});
//must append axes after binding data.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.style("font-size",12);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.style("font-size",12);
svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", "translate("+ (margin.left/2) +","+(height/2)+")rotate(-90)")
.text(yaxislabel);
svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", "translate("+ (width/2) +","+(height-(margin.bottom/3))+")")
.text(xaxislabel);
if (title != ''){
svg.append("text")
.attr("x", width/2)
.attr("y", 16)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text(title);
}
legend = svg.append("g")
.attr("class","legend")
.attr("transform","translate(50,50)")
.style("font-size",legend_font_size)
.call(d3.legend)
}
my.width = function(value) {
if (!arguments.length) return width;
width = value;
return my;
};
my.height = function(value) {
if (!arguments.length) return height;
height = value;
return my;
};
my.margin = function(value) {
if (!arguments.length) return margin;
margin = value;
return my;
};
my.color = function(value) {
if (!arguments.length) return color;
color = value;
return my;
};
my.xaxislabel = function(value) {
if (!arguments.length) return xaxislabel;
xaxislabel = value;
return my;
};
my.yaxislabel = function(value) {
if (!arguments.length) return yaxislabel;
yaxislabel = value;
return my;
};
my.offset = function(value) {
if (!arguments.length) return offset;
offset = value;
return my;
};
my.title = function(value) {
if (!arguments.length) return title;
title = value;
return my;
};
my.legend_font_size = function(value) {
if (!arguments.length) return legend_font_size;
legend_font_size = value;
return my;
};
my.selection_string = function(value) {
if (!arguments.length) return selection_string;
selection_string = value;
return my;
};
my.data = function(value) {
if (!arguments.length) return data;
data = value;
return my;
};
return my;
}
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
(function defineMustache(global,factory){if(typeof exports==="object"&&exports&&typeof exports.nodeName!=="string"){factory(exports)}else if(typeof define==="function"&&define.amd){define(["exports"],factory)}else{global.Mustache={};factory(global.Mustache)}})(this,function mustacheFactory(mustache){var objectToString=Object.prototype.toString;var isArray=Array.isArray||function isArrayPolyfill(object){return objectToString.call(object)==="[object Array]"};function isFunction(object){return typeof object==="function"}function typeStr(obj){return isArray(obj)?"array":typeof obj}function escapeRegExp(string){return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function hasProperty(obj,propName