Skip to content

Instantly share code, notes, and snippets.

@emilyinamillion

emilyinamillion/index.html

Last active June 29, 2017 15:36
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 emilyinamillion/a3361c54e16c9b32e329c2503defaf4b to your computer and use it in GitHub Desktop.
Save emilyinamillion/a3361c54e16c9b32e329c2503defaf4b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href='style.css' rel='stylesheet' type='text/css'>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
<!-- visualization source -->
<script src="index_works_adding_color.js"></script>
</body>
Raw
index_works_adding_color.js
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.timeParse("%Y");
bisectDate = d3.bisector(function(d) { return d.year; }).left;
// Set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// Define the axes
var xAxis = d3.axisBottom(x)
.ticks(5);
var yAxis = d3.axisLeft(y)
.ticks(6).tickFormat(function(d) { return parseInt(d)}).tickSizeInner([-width])
// Define the line
var valueline = d3.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
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 + ")");
var color = d3.scaleOrdinal(d3.schemeCategory10)
// Get the data
d3.json("twopartyoneannex.json", function(error, data) {
data.forEach(function(d) {
d.year_val = d.year;
d.year = parseDate(d.year);
d.close = +d.ODP_Tonnes;
});
// Scale the range of the data
var min = d3.min(data, function(d) { return d.year_val;}) - 1;
max = d3.max(data, function(d) { return d.year_val;}) + 1;
x.domain([parseDate(min), parseDate(max)]);
y.domain([0, d3.max(data, function(d) { return d.close; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var dataNest = d3.nest()
.key(function(d) {return d.party;})
.entries(data);
//////////////////////////////////////////////////////
/////// Loop through each symbol / key///////////////
/////////////////////////////////////////////////////
dataNest.forEach(function(d,i) {
//color_bookmark stores the hex value to refer back to on mouseout
var color_bookmark = function() {
return d.color = color(d.key)};
svg.append("path")
.attr("class", "line")
.style("stroke", color_bookmark)
.attr("d", valueline(d.values));
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
svg.selectAll("dot")
.data(d.values)
.enter().append("circle")
.attr("class", "dots")
.attr("r", 4)
.attr("cx", function(d, i) { return x(d.year); })
.attr("cy", function(d, i) { return y(d.close); })
.style("stroke", color_bookmark)
.style("fill", color_bookmark)
.on("mouseover", tooltipped)
.on("mouseout", function(d){
div.transition()
.duration(500)
.style("opacity", 0);
d3.select(this).attr("r", 4).style("fill-opacity", 1.0).style("fill", color_bookmark)});
///////////////////////////////
/////// create legend /////////
//////////////////////////////
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-100," + i * 14 + ")"; });
// changed legend shapes to circles, keeping rects as placeholders. could round the rectangle edges too
legend.append("rect")
.attr("rx", 2)
.attr("ry", 2)
.attr("x", width)
.attr("width", 12)
.attr("height", 12)
.style("fill", color)
;
// legend.append("circle")
// .attr("r", 6)
// .attr("cx", width)
// .style("fill", color);
legend.append("text")
.attr("x", width + 16)
.attr("y", 6)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d) { return d; });
legend.on("mouseover", legendHover)
.on("mouseout", function(type) {
d3.selectAll(".legend")
.style("opacity", 1);
d3.selectAll(".line")
.style("opacity", 1);
d3.selectAll(".dots")
.style("opacity", 1);
});
function tooltipped(d) {
d3.select(this).transition().duration(300).style("fill", "#F1F3F3").attr("r", 8);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(d.close)
.style("left", (d3.event.pageX - 32.45) + "px")
.style("top", (d3.event.pageY - 44.3) + "px");
}
function legendHover(type) {
d3.selectAll(".legend")
.style("opacity", 0.1);
d3.select(this)
.style("opacity", 1);
d3.selectAll(".line")
.style("opacity", 0.1)
d3.selectAll(".dots")
.style("opacity", 0.1)
// filter wasn't working on nested data, so redraw lines. hacky, but it works.
svg.append("path")
.attr("class", "line")
.style("stroke", color_bookmark)
.attr("d", valueline(d.values))
svg.selectAll("dot")
.data(d.values)
.enter().append("circle")
.attr("class", "dots")
.attr("r", 4)
.attr("cx", function(d, i) { return x(d.year); })
.attr("cy", function(d, i) { return y(d.close); })
.style("stroke", color_bookmark)
.style("fill", color_bookmark);
}
});
});
Raw
style.css
body {
background-color: #F1F3F3;
font: 12px Arial;
fill: #5D6971;
stroke: none;
}
/*can edit font for axis here*/
.axis text {
font: 12px sans-serif;
stroke: none;
fill: #616161;
}
/*.toolTip {
position: absolute;
display: none;
/*min-width: 50px;*/
/*min-width: auto;
border-radius: 5px;
height: auto;
background: none repeat scroll 0 0 white;
border: 1px solid black;
padding: 14px;
text-align: center;
box-shadow: 1px 1px black;
opacity: 50%;
}
.tooltip: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;
}
*/
.axis path,
.axis line {
fill: none;
stroke: #D4D8DA;
stroke-width: 2px;
}
.line {
fill: none;
stroke: #33A8FF;
stroke-width: 3px;
}
.dots {
stroke-width: 3px;
/*stroke: #33A8FF;
stroke-width: 3px;*/
}
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: #F1F3F3;
/*stroke: #33A8FF;*/
stroke: #D4D8DA;
stroke-width: 3px;
}
.hover-line {
/*stroke: #33A8FF;*/
stroke: #D4D8DA;
stroke-width: 2px;
/*stroke-dasharray: 3,3;*/
}
.focus rect{
background-color: black;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: white;
/*border: 0px;*/
/*border-radius: 8px;*/
pointer-events: none;
box-shadow: 1px 1px 5px #ABABAB;
}
div.tooltip:after {
left: 60%;
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 10px;
margin-top: -10px;
}
Raw
twopartyoneannex.json
[
{
"party": "Australia",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2001,
"ODP_Tonnes": 1.3,
"MT_Tonnes": 0
},
{
"party": "Australia",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2002,
"ODP_Tonnes": 4.9,
"MT_Tonnes": 0
},
{
"party": "Australia",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2003,
"ODP_Tonnes": 2.9,
"MT_Tonnes": 1.0
},
{
"party": "Australia",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2004,
"ODP_Tonnes": 0,
"MT_Tonnes": 0
},
{
"party": "Australia",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2005,
"ODP_Tonnes": 1.4,
"MT_Tonnes": 0
},
{
"party": "Australia",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2006,
"ODP_Tonnes": 0,
"MT_Tonnes": 0
},
{
"party": "Belgium",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2001,
"ODP_Tonnes": 2.0,
"MT_Tonnes": 0
},
{
"party": "Belgium",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2002,
"ODP_Tonnes": 4.0,
"MT_Tonnes": 0
},
{
"party": "Belgium",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2003,
"ODP_Tonnes": 2.9,
"MT_Tonnes": 1.0
},
{
"party": "Belgium",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2004,
"ODP_Tonnes": 4,
"MT_Tonnes": 0
},
{
"party": "Belgium",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2005,
"ODP_Tonnes": 1.4,
"MT_Tonnes": 0
},
{
"party": "Belgium",
"annex group": "BII",
"chemical group": "Carbon Tetrachloride",
"year": 2006,
"ODP_Tonnes": 2,
"MT_Tonnes": 0
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment