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;
};