Skip to content

Instantly share code, notes, and snippets.

/.block

Created November 26, 2017 20:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/2a2f64d8f37032795ab8c02dfdc0e4b4 to your computer and use it in GitHub Desktop.
Save anonymous/2a2f64d8f37032795ab8c02dfdc0e4b4 to your computer and use it in GitHub Desktop.
Download ZIP
co2 in fuel
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE 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-tip/0.7.1/d3-tip.min.js"></script>
<style>
.tip {
line-height: 1;
padding: 6px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 4px;
font-size: 12px;
font-family: Lato;
}
/* Creates a small triangle extender for the tooltip */
.tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips specifically */
.tip.n:after {
margin: -2px 0 0 0;
top: 100%;
left: 0;
}
.xAxis{
stroke-dasharray: ;
}
.group-label {
font-weight: bold;
text-anchor: end;
}
</style>
</head>
<body>
<form>
<label>
<input type="radio" name="mode" value="stacked"> Stacked
</label>
<label>
<input type="radio" name="mode" value="multiples" checked>Multiples
</label>
</form>
<script>
var margin = { top: 40, right: 40, bottom: 40, left: 40};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.attr('transform', 'translate(' + margin.left +', ' + margin.top + ')');
var gSVG = svg.append('g')
.attr('class', 'svg');
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.3)
.align(0.1);
var y0 = d3.scaleBand()
.rangeRound([height, 0]);
var y = d3.scaleLinear();
var zScale = d3.scaleOrdinal()
.range(["DarkGoldenRod ", "GoldenRod", "OliveDrab", "YellowGreen", "LimeGreen"]);
var data = data;
var allVehicleTypeKeys = ["diesel", "B20", "gasoline", "B100", "CNG"];
d3.csv("The Impact of Fuel.csv", function(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}, function(error, data) {
if (error) throw error;
var allFuelTypeKeys = data.columns.slice(1);
data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) {return d.vehicleType; }));
zScale.domain(allFuelTypeKeys);
var stack = d3.stack()
.keys(allFuelTypeKeys)
(data);
y0.domain(stack.map(function(d) { return d.key; }))
console.log(y0.bandwidth());
y.range([y0.bandwidth(), 0])
.domain([0, 1800]).nice();
var tip = d3.tip()
.attr("class", "tip")
.offset([-8, 0])
.html(function(d) { return d[1]-d[0];})
svg.call( tip)
var group = gSVG.selectAll('g')
.data(stack)
.enter().append('g')
.attr('class', 'group')
.attr("fill", function(d) {
return zScale(d.key); })
.attr("transform", "translate(0," + height + ")")
/*group.append("text")
.attr("class", "group-label")
.attr("x", 106)
.attr("y", function(d) { return y(d[1]); })
.attr("dy", ".35em")*/
group.selectAll('rect')
.data(function(d) { return d;})
.enter().append("rect")
.attr("x", function(d) { return x(d.data.vehicleType)})
.attr("y", function(d) { return y(d[1]) - y0.bandwidth(); })
.attr("height", function(d) { return y(d[0]) - y(d[1]) })
.attr("width", x.bandwidth())
.style("stroke", "white")
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
//append x axis
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
var title = svg.append("text")
.text("POUNDS CO2")
.attr("transform", "translate("+[margin.right *10, margin.top]+")")
.attr("text-anchor","center")
.style("font-size", 28)
.style("font-family", "Lato")
.style("fill", "black")
.style("opacity", .6);
d3.selectAll("input")
.on("change", change);
function change() {
if (this.value === "stacked") transitionStacked();
else transitionMultiples ();
}
d3.select("input[value=\"stacked\"]")
.property("checked", true)
function transitionMultiples() {
var t = svg.transition()
.duration(750);
g = t.selectAll(".group")
.attr("transform", function(d) {
console.log(y0(d.key));
return "translate(0," + (y0(d.key)) + ")";
});
t.selectAll("rect")
.attr("y", function(d) {
return y0.bandwidth() + (y(d[1]) - y(d[0]));
});
// g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2); })
}
function transitionStacked() {
var t = svg.transition()
.duration(750),
g=t.selectAll(".group")
.attr("transform", "translate(0," + height + ")")
g.selectAll("rect")
.attr("y", function(d) { return y(d[1]) - y0.bandwidth(); });
}
});
</script>
</body>
Raw
The Impact of Fuel.csv
vehicleType diesel B20 gasoline B100 CNG
generator 1000 1000 1000 1000 500
hybrid car 300 300 200 200 200
car 400 400 400 400 300
hybrid SUV 300 300 300 300 200
van, pickup, SUV 600 600 500 500 400
truck (<18 wheels) 1400 1400 1200 1300 1000
18 wheeler 1800 1700 1500 1000 1200
bus 1700 1700 1500 1600 1200
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment