Skip to content

Instantly share code, notes, and snippets.

@kaz-a

kaz-a/index.html

Last active October 11, 2016 19:31
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 kaz-a/e77f7456475b90fd61f42337d7b8c917 to your computer and use it in GitHub Desktop.
Save kaz-a/e77f7456475b90fd61f42337d7b8c917 to your computer and use it in GitHub Desktop.
Download ZIP
Clickable Data Point
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600');
* {
padding: 0.2em;
}
body{
font-family: 'Open Sans', sans-serif;
font-weight: 300;
overflow: none;
}
h1 {
font-weight: 700;
font-weight: 300;
}
#chart {
height: 300;
margin: 30 0 30 0;
}
.title {
font-weight: 400;
}
.header {
margin: 30 0 10 0;
}
circle {
fill: #3ebdb2;
stroke: #3ebdb2;
}
/*circle:hover {
stroke-width: 6px;
}*/
.axis line, .axis path {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.tick > text {
font-size: 0.8em;
font-weight: 400;
}
div.comment {
position: absolute;
text-align: left;
width: auto;
height: auto;
padding: 10px;
font: 0.9em sans-serif;
background: white;
border: #3ebdb2 2px solid;
border-radius: 0;
pointer-events: none;
color: #3ebdb2;
}
.line {
fill: none;
stroke: #3ebdb2;
stroke-width: 0.2em;
}
</style>
<body>
<div class="container">
<div class="row header">
<h1 class="col-md-5">US Homeownership Rates</h1>
</div>
<div id="chart" class="row col-md-4 col-xs-12"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 300 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickPadding(10)
.outerTickSize(3)
.ticks(7)
.tickFormat(d3.format("d"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.outerTickSize(0)
.ticks(8)
.tickFormat(function(d) { return d; });
var commentBox = d3.select("body").append("div")
.attr("class", "comment")
.style("opacity", 0);
d3.csv("us_homeownership_rates.csv", ready);
function ready(error, data) {
if (error) throw error;
console.log(data);
data.forEach(function(d) {
d.avg = +d.annual_avg;
});
var svg = d3.select("#chart").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 + ")");
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain(d3.extent(data, function(d) { return d.avg; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Year");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Annual Average Rates (%)");
var line = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.avg); });
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var comment = "Obama takes office";
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.filter(function(d) { return d.year == '2008' })
.attr("class", "circle")
.attr("r", 4)
.attr("cx", function(d) { return x(d.year); })
.attr("cy", function(d) { return y(d.avg); })
.on("click", function(d) {
commentBox.text( function() { return comment; })
.style("opacity", 0.8)
.style("left", (d3.event.pageX)-0 + "px")
.style("top", (d3.event.pageY)-0 + "px");
})
.each(update);
function update() {
var circle = d3.selectAll(".circle");
(function repeat() {
circle
.transition()
.duration(1500)
.attr("stroke-width", 10)
.attr("r", 10)
.style("opacity", 0)
.transition()
.duration(0)
.attr("stroke-width", 0)
.attr("r", 6)
.style("opacity", 1)
.each("end", repeat);
})();
}
};
</script>
</body>
Raw
us_homeownership_rates.csv
year annual_avg
1965 63.03
1966 63.45
1967 63.63
1968 63.85
1969 64.33
1970 64.18
1971 64.25
1972 64.38
1973 64.53
1974 64.65
1975 64.60
1976 64.73
1977 64.80
1978 64.95
1979 65.23
1980 65.58
1981 65.43
1982 64.78
1983 64.65
1984 64.48
1985 63.90
1986 63.78
1987 63.98
1988 63.80
1989 63.90
1990 63.95
1991 64.05
1992 64.15
1993 64.00
1994 63.98
1995 64.75
1996 65.38
1997 65.70
1998 66.28
1999 66.80
2000 67.38
2001 67.83
2002 67.93
2003 68.25
2004 69.00
2005 68.88
2006 68.78
2007 68.15
2008 67.83
2009 67.38
2010 66.85
2011 66.15
2012 65.45
2013 65.13
2014 64.48
2015 63.70
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment