Create a gist now

Instantly share code, notes, and snippets.

@geezhawk /chart.js
Last active Mar 30, 2016

What would you like to do?
NASA budget as percentage of federal budget since 1958
var HEIGHT = 500;
var WIDTH = 700;
var PADDING = 60;
// select the SVG element
var svg = d3.select("svg")
.attr("height", HEIGHT + "px")
.attr("width", WIDTH + "px")
// Scale the range of the data
var xScale = d3.scale.linear()
.range([PADDING, WIDTH-PADDING])
var yScale = d3.scale.linear()
.range([HEIGHT-PADDING, PADDING])
// Get the data
var dataset = d3.json("nasa-budget.json", function(error, data) {
// Set the domain of the data
xScale.domain(["1958", d3.max(data, function(d){
return d.year})])
yScale.domain([0, d3.max(data, function(d){
return d.budget})])
// Create axes
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(d3.format("d"))
.ticks(10)
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(d3.format(".2%"))
.ticks(10)
// Create line generator function
var lineGen = d3.svg.line()
.x(function(d) {return xScale(d.year)})
.y(function(d) {return yScale(d.budget)})
// Create a line
svg.append("path")
.attr("d", lineGen(data))
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("fill", "none");
var focus = svg.append("g")
// Append a dashed line to the x axis
focus.append("line")
.attr("class", "x-line")
.style("stroke", "black")
.style("stroke-dasharray", "3.3")
.style("opacity", 0.5)
.attr("y1", 0)
.attr("y2", HEIGHT)
// Append a dashed line to the y axis
focus.append("line")
.attr("class", "y-line")
.style("stroke", "black")
.style("stroke-dasharray", "3.3")
.style("opacity", 0.5)
.attr("x1", WIDTH)
.attr("x2", WIDTH)
// Append the circle at the intersection
focus.append("circle")
.attr("class", "y")
.style("fill", "none")
.style("stroke", "black")
.attr("r", 5)
// Place a tooltip w/ the budget at the intersection
focus.append("text")
.attr("class", "y1")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "-.3em");
focus.append("text")
.attr("class", "y2")
.attr("dx", 8)
.attr("dy", "-.3em");
// Place a tooltip w/ the year at the intersection
focus.append("text")
.attr("class", "y3")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "1em");
focus.append("text")
.attr("class", "y4")
.attr("dx", 8)
.attr("dy", "1em");
// Append a rectangle to capture the mouse
svg.append("rect")
.attr("width", WIDTH)
.attr("height", HEIGHT)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() {focus.style("display", null); })
.on("mouseout", function() {focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
// Get value of input domain for output range at mouse position
var x0 = xScale.invert(d3.mouse(this)[0])
bisectYear = d3.bisector(function(d) {return d.year;}).left
var i = bisectYear(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.year > d1.year - x0 ? d1 : d0;
focus.select("circle.y")
.attr("transform",
"translate(" + xScale(d.year) + "," +
yScale(d.budget) + ")");
focus.select("text.y1")
.attr("transform",
"translate(" + xScale(d.year) + "," +
yScale(d.budget) + ")")
.text(d3.format(".2%")(d.budget))
focus.select("text.y2")
.attr("transform",
"translate(" + xScale(d.year) + "," +
yScale(d.budget) + ")")
.text(d3.format(".2%")(d.budget))
focus.select("text.y3")
.attr("transform",
"translate(" + xScale(d.year) + "," +
yScale(d.budget) + ")")
.text(d.year)
focus.select("text.y4")
.attr("transform",
"translate(" + xScale(d.year) + "," +
yScale(d.budget) + ")")
.text(d.year)
focus.select(".x-line")
.attr("transform",
"translate(" + xScale(d.year) + "," +
yScale(d.budget) + ")")
.attr("y2", HEIGHT - yScale(d.budget))
focus.select(".y-line")
.attr("transform",
"translate(" + WIDTH * -1 + "," +
yScale(d.budget) + ")")
.attr("x2", WIDTH + WIDTH)
}
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0, " + (HEIGHT - PADDING) + ")")
.call(xAxis)
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + PADDING + ", 0)")
.call(yAxis)
svg.append("text")
.attr("class", "label")
.attr("text-anchor", "end")
.attr("x", WIDTH - PADDING)
.attr("y", HEIGHT - 20)
.text("Year")
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("class", "label")
.attr("text-anchor", "end")
.attr("x", -PADDING)
.attr("y", 10)
.text("Percentage of U.S. federal budget")
svg.append("text")
.attr("class", "title")
.attr("text-anchor", "middle")
.attr("x", WIDTH/2)
.attr("y", 20)
.text("Percentage of U.S. federal budget spent on NASA between 1958 and 2014")
})
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="d3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.label {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<svg/>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
[
{
"budget": "0.001",
"year": "1958"
},
{
"budget": "0.002",
"year": "1959"
},
{
"budget": "0.005",
"year": "1960"
},
{
"budget": "0.009",
"year": "1961"
},
{
"budget": "0.0118",
"year": "1962"
},
{
"budget": "0.0229",
"year": "1963"
},
{
"budget": "0.0352",
"year": "1964"
},
{
"budget": "0.0431",
"year": "1965"
},
{
"budget": "0.0441",
"year": "1966"
},
{
"budget": "0.0345",
"year": "1967"
},
{
"budget": "0.0265",
"year": "1968"
},
{
"budget": "0.0231",
"year": "1969"
},
{
"budget": "0.0192",
"year": "1970"
},
{
"budget": "0.0161",
"year": "1971"
},
{
"budget": "0.0148",
"year": "1972"
},
{
"budget": "0.0135",
"year": "1973"
},
{
"budget": "0.0121",
"year": "1974"
},
{
"budget": "0.0098",
"year": "1975"
},
{
"budget": "0.0099",
"year": "1976"
},
{
"budget": "0.0098",
"year": "1977"
},
{
"budget": "0.0091",
"year": "1978"
},
{
"budget": "0.0087",
"year": "1979"
},
{
"budget": "0.0084",
"year": "1980"
},
{
"budget": "0.0082",
"year": "1981"
},
{
"budget": "0.0083",
"year": "1982"
},
{
"budget": "0.0085",
"year": "1983"
},
{
"budget": "0.0083",
"year": "1984"
},
{
"budget": "0.0077",
"year": "1985"
},
{
"budget": "0.0075",
"year": "1986"
},
{
"budget": "0.0076",
"year": "1987"
},
{
"budget": "0.0085",
"year": "1988"
},
{
"budget": "0.0096",
"year": "1989"
},
{
"budget": "0.0099",
"year": "1990"
},
{
"budget": "0.0105",
"year": "1991"
},
{
"budget": "0.0101",
"year": "1992"
},
{
"budget": "0.0101",
"year": "1993"
},
{
"budget": "0.0094",
"year": "1994"
},
{
"budget": "0.0088",
"year": "1995"
},
{
"budget": "0.0089",
"year": "1996"
},
{
"budget": "0.0090",
"year": "1997"
},
{
"budget": "0.0086",
"year": "1998"
},
{
"budget": "0.0080",
"year": "1999"
},
{
"budget": "0.0075",
"year": "2000"
},
{
"budget": "0.0076",
"year": "2001"
},
{
"budget": "0.0072",
"year": "2002"
},
{
"budget": "0.0068",
"year": "2003"
},
{
"budget": "0.0066",
"year": "2004"
},
{
"budget": "0.0063",
"year": "2005"
},
{
"budget": "0.0057",
"year": "2006"
},
{
"budget": "0.0058",
"year": "2007"
},
{
"budget": "0.0060",
"year": "2008"
},
{
"budget": "0.0057",
"year": "2009"
},
{
"budget": "0.0052",
"year": "2010"
},
{
"budget": "0.0051",
"year": "2011"
},
{
"budget": "0.0050",
"year": "2012"
},
{
"budget": "0.0049",
"year": "2013"
},
{
"budget": "0.0050",
"year": "2014"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment