Skip to content

Instantly share code, notes, and snippets.

@chemok78

chemok78/index.html

Created January 20, 2017 08:16
Show Gist options
  • Save chemok78/f841e03957fac269181e7c54e33da499 to your computer and use it in GitHub Desktop.
Save chemok78/f841e03957fac269181e7c54e33da499 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
</head>
<body>
<div class="container text-center">
<h1 class="text-center">USA GDP from 1947 to 1950 (Quarterly)</h1>
</br>
<div id="chart">
</div>
</div>
</body>
</html>
Raw
main.js
var data = [
[
"1947-01-01",
243.1
],
[
"1947-04-01",
246.3
],
[
"1947-07-01",
250.1
],
[
"1947-10-01",
260.3
],
[
"1948-01-01",
266.2
],
[
"1948-04-01",
272.9
],
[
"1948-07-01",
279.5
],
[
"1948-10-01",
280.7
],
[
"1949-01-01",
275.4
],
[
"1949-04-01",
271.7
],
[
"1949-07-01",
273.3
],
[
"1949-10-01",
271
],
[
"1950-01-01",
281.2
],
[
"1950-04-01",
290.7
],
[
"1950-07-01",
308.5
],
[
"1950-10-01",
320.3
],
[
"1951-01-01",
336.4
],
[
"1951-04-01",
344.5
],
[
"1951-07-01",
351.8
],
[
"1951-10-01",
356.6
],
[
"1952-01-01",
360.2
],
[
"1952-04-01",
361.4
],
[
"1952-07-01",
368.1
],
[
"1952-10-01",
381.2
],
[
"1953-01-01",
388.5
],
[
"1953-04-01",
392.3
],
[
"1953-07-01",
391.7
],
[
"1953-10-01",
386.5
],
[
"1954-01-01",
385.9
],
[
"1954-04-01",
386.7
],
[
"1954-07-01",
391.6
],
[
"1954-10-01",
400.3
],
[
"1955-01-01",
413.8
],
[
"1955-04-01",
422.2
],
[
"1955-07-01",
430.9
],
[
"1955-10-01",
437.8
],
[
"1956-01-01",
440.5
],
[
"1956-04-01",
446.8
],
[
"1956-07-01",
452
],
[
"1956-10-01",
461.3
],
[
"1957-01-01",
470.6
],
[
"1957-04-01",
472.8
],
[
"1957-07-01",
480.3
],
[
"1957-10-01",
475.7
],
[
"1958-01-01",
468.4
],
[
"1958-04-01",
472.8
],
[
"1958-07-01",
486.7
],
[
"1958-10-01",
500.4
],
[
"1959-01-01",
511.1
],
[
"1959-04-01",
524.2
],
[
"1959-07-01",
525.2
],
[
"1959-10-01",
529.3
],
[
"1960-01-01",
543.3
],
[
"1960-04-01",
542.7
],
[
"1960-07-01",
546
],
[
"1960-10-01",
541.1
],
[
"1961-01-01",
545.9
],
[
"1961-04-01",
557.4
],
[
"1961-07-01",
568.2
],
[
"1961-10-01",
581.6
],
[
"1962-01-01",
595.2
],
[
"1962-04-01",
602.6
],
[
"1962-07-01",
609.6
],
[
"1962-10-01",
613.1
],
[
"1963-01-01",
622.7
],
[
"1963-04-01",
631.8
],
[
"1963-07-01",
645
],
[
"1963-10-01",
654.8
],
[
"1964-01-01",
671.1
],
[
"1964-04-01",
680.8
],
[
"1964-07-01",
692.8
],
[
"1964-10-01",
698.4
],
[
"1965-01-01",
719.2
],
[
"1965-04-01",
732.4
],
[
"1965-07-01",
750.2
],
[
"1965-10-01",
773.1
],
[
"1966-01-01",
797.3
],
[
"1966-04-01",
807.2
],
[
"1966-07-01",
820.8
],
[
"1966-10-01",
834.9
],
[
"1967-01-01",
846
],
[
"1967-04-01",
851.1
],
[
"1967-07-01",
866.6
],
[
"1967-10-01",
883.2
],
[
"1968-01-01",
911.1
],
[
"1968-04-01",
936.3
],
[
"1968-07-01",
952.3
],
[
"1968-10-01",
970.1
],
[
"1969-01-01",
995.4
],
[
"1969-04-01",
1011.4
],
[
"1969-07-01",
1032
],
[
"1969-10-01",
1040.7
],
[
"1970-01-01",
1053.5
],
[
"1970-04-01",
1070.1
],
[
"1970-07-01",
1088.5
],
[
"1970-10-01",
1091.5
],
[
"1971-01-01",
1137.8
],
[
"1971-04-01",
1159.4
],
[
"1971-07-01",
1180.3
],
[
"1971-10-01",
1193.6
],
[
"1972-01-01",
1233.8
],
[
"1972-04-01",
1270.1
],
[
"1972-07-01",
1293.8
],
[
"1972-10-01",
1332
],
[
"1973-01-01",
1380.7
],
[
"1973-04-01",
1417.6
],
[
"1973-07-01",
1436.8
],
[
"1973-10-01",
1479.1
],
[
"1974-01-01",
1494.7
],
[
"1974-04-01",
1534.2
],
[
"1974-07-01",
1563.4
],
[
"1974-10-01",
1603
],
[
"1975-01-01",
1619.6
],
[
"1975-04-01",
1656.4
],
[
"1975-07-01",
1713.8
],
[
"1975-10-01",
1765.9
],
[
"1976-01-01",
1824.5
],
[
"1976-04-01",
1856.9
],
[
"1976-07-01",
1890.5
],
[
"1976-10-01",
1938.4
],
[
"1977-01-01",
1992.5
],
[
"1977-04-01",
2060.2
],
[
"1977-07-01",
2122.4
],
[
"1977-10-01",
2168.7
],
[
"1978-01-01",
2208.7
],
[
"1978-04-01",
2336.6
],
[
"1978-07-01",
2398.9
],
[
"1978-10-01",
2482.2
],
[
"1979-01-01",
2531.6
],
[
"1979-04-01",
2595.9
],
[
"1979-07-01",
2670.4
],
[
"1979-10-01",
2730.7
],
[
"1980-01-01",
2796.5
],
[
"1980-04-01",
2799.9
],
[
"1980-07-01",
2860
],
[
"1980-10-01",
2993.5
],
[
"1981-01-01",
3131.8
],
[
"1981-04-01",
3167.3
],
[
"1981-07-01",
3261.2
],
[
"1981-10-01",
3283.5
],
[
"1982-01-01",
3273.8
],
[
"1982-04-01",
3331.3
],
[
"1982-07-01",
3367.1
],
[
"1982-10-01",
3407.8
],
[
"1983-01-01",
3480.3
],
[
"1983-04-01",
3583.8
],
[
"1983-07-01",
3692.3
],
[
"1983-10-01",
3796.1
],
[
"1984-01-01",
3912.8
],
[
"1984-04-01",
4015
],
[
"1984-07-01",
4087.4
],
[
"1984-10-01",
4147.6
],
[
"1985-01-01",
4237
],
[
"1985-04-01",
4302.3
],
[
"1985-07-01",
4394.6
],
[
"1985-10-01",
4453.1
],
[
"1986-01-01",
4516.3
],
[
"1986-04-01",
4555.2
],
[
"1986-07-01",
4619.6
],
[
"1986-10-01",
4669.4
],
[
"1987-01-01",
4736.2
],
[
"1987-04-01",
4821.5
],
[
"1987-07-01",
4900.5
],
[
"1987-10-01",
5022.7
],
[
"1988-01-01",
5090.6
],
[
"1988-04-01",
5207.7
],
[
"1988-07-01",
5299.5
],
[
"1988-10-01",
5412.7
],
[
"1989-01-01",
5527.4
],
[
"1989-04-01",
5628.4
],
[
"1989-07-01",
5711.6
],
[
"1989-10-01",
5763.4
],
[
"1990-01-01",
5890.8
],
[
"1990-04-01",
5974.7
],
[
"1990-07-01",
6029.5
],
[
"1990-10-01",
6023.3
],
[
"1991-01-01",
6054.9
],
[
"1991-04-01",
6143.6
],
[
"1991-07-01",
6218.4
],
[
"1991-10-01",
6279.3
],
[
"1992-01-01",
6380.8
],
[
"1992-04-01",
6492.3
],
[
"1992-07-01",
6586.5
],
[
"1992-10-01",
6697.6
],
[
"1993-01-01",
6748.2
],
[
"1993-04-01",
6829.6
],
[
"1993-07-01",
6904.2
],
[
"1993-10-01",
7032.8
],
[
"1994-01-01",
7136.3
],
[
"1994-04-01",
7269.8
],
[
"1994-07-01",
7352.3
],
[
"1994-10-01",
7476.7
],
[
"1995-01-01",
7545.3
],
[
"1995-04-01",
7604.9
],
[
"1995-07-01",
7706.5
],
[
"1995-10-01",
7799.5
],
[
"1996-01-01",
7893.1
],
[
"1996-04-01",
8061.5
],
[
"1996-07-01",
8159
],
[
"1996-10-01",
8287.1
],
[
"1997-01-01",
8402.1
],
[
"1997-04-01",
8551.9
],
[
"1997-07-01",
8691.8
],
[
"1997-10-01",
8788.3
],
[
"1998-01-01",
8889.7
],
[
"1998-04-01",
8994.7
],
[
"1998-07-01",
9146.5
],
[
"1998-10-01",
9325.7
],
[
"1999-01-01",
9447.1
],
[
"1999-04-01",
9557
],
[
"1999-07-01",
9712.3
],
[
"1999-10-01",
9926.1
],
[
"2000-01-01",
10031
],
[
"2000-04-01",
10278.3
],
[
"2000-07-01",
10357.4
],
[
"2000-10-01",
10472.3
],
[
"2001-01-01",
10508.1
],
[
"2001-04-01",
10638.4
],
[
"2001-07-01",
10639.5
],
[
"2001-10-01",
10701.3
],
[
"2002-01-01",
10834.4
],
[
"2002-04-01",
10934.8
],
[
"2002-07-01",
11037.1
],
[
"2002-10-01",
11103.8
],
[
"2003-01-01",
11230.1
],
[
"2003-04-01",
11370.7
],
[
"2003-07-01",
11625.1
],
[
"2003-10-01",
11816.8
],
[
"2004-01-01",
11988.4
],
[
"2004-04-01",
12181.4
],
[
"2004-07-01",
12367.7
],
[
"2004-10-01",
12562.2
],
[
"2005-01-01",
12813.7
],
[
"2005-04-01",
12974.1
],
[
"2005-07-01",
13205.4
],
[
"2005-10-01",
13381.6
],
[
"2006-01-01",
13648.9
],
[
"2006-04-01",
13799.8
],
[
"2006-07-01",
13908.5
],
[
"2006-10-01",
14066.4
],
[
"2007-01-01",
14233.2
],
[
"2007-04-01",
14422.3
],
[
"2007-07-01",
14569.7
],
[
"2007-10-01",
14685.3
],
[
"2008-01-01",
14668.4
],
[
"2008-04-01",
14813
],
[
"2008-07-01",
14843
],
[
"2008-10-01",
14549.9
],
[
"2009-01-01",
14383.9
],
[
"2009-04-01",
14340.4
],
[
"2009-07-01",
14384.1
],
[
"2009-10-01",
14566.5
],
[
"2010-01-01",
14681.1
],
[
"2010-04-01",
14888.6
],
[
"2010-07-01",
15057.7
],
[
"2010-10-01",
15230.2
],
[
"2011-01-01",
15238.4
],
[
"2011-04-01",
15460.9
],
[
"2011-07-01",
15587.1
],
[
"2011-10-01",
15785.3
],
[
"2012-01-01",
15973.9
],
[
"2012-04-01",
16121.9
],
[
"2012-07-01",
16227.9
],
[
"2012-10-01",
16297.3
],
[
"2013-01-01",
16440.7
],
[
"2013-04-01",
16526.8
],
[
"2013-07-01",
16727.5
],
[
"2013-10-01",
16957.6
],
[
"2014-01-01",
16984.3
],
[
"2014-04-01",
17270
],
[
"2014-07-01",
17522.1
],
[
"2014-10-01",
17615.9
],
[
"2015-01-01",
17649.3
],
[
"2015-04-01",
17913.7
],
[
"2015-07-01",
18064.7
]
];
//Width and height of the SVG container
var margin = {top: 20, right: 20, bottom: 40, left: 50}
var w = 1000 - margin.left - margin.right;
var h = 500 - margin.top - margin.bottom;
var barPadding = 1;
var padding = 20;
//Create svg container and append to DOM
var svg = d3.select("#chart")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var maxDate = d3.max(data, function(d){
return d[0];
});
var minDate = d3.min(data, function(d){
return d[0];
});
var maxGDP = d3.max(data, function(d){
return d[1];
});
var minGDP = d3.min(data, function(d){
return d[1];
});
var xScale = d3.scaleTime()
//returns left start position of each bar along the X Axis
.domain([new Date(minDate), new Date(maxDate)])
.range([0,w]);
var yScale = d3.scaleLinear()
//returns height of each bar along the Y Axis
.domain([minGDP, maxGDP])
//lowest GDP gets the highest pixel height
//highest GDP gets the lowest pixel height
.range([h,0])
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(10);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(10);
var tip = d3.select("#chart").append("div")
//append a tooltip to the #chart container in the form of a div with opacity 0 (fully transparant)
.attr("class", "tooltip")
.style("opacity", 0);
var parsedDate = function(date){
var getDate = new Date(date);
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
return getDate.getDate() + " " + months[getDate.getMonth()] + " " + getDate.getFullYear();
};
var parsedGDP = function(GDP){
return "$" + GDP + " Billion";
}
//select all bar rectangles, bind data, append rectangles
var bars = svg.selectAll("rect")
//crate a selection of all rects and save in bars variable
.data(data)
//bind the data
.enter()
//call enter for each data element and returns placeholder selection for elements that do not have a rect yet
.append("rect")
//insert rect in the DOM for each data element
//Set bar attributes
var barAttributes = bars
.attr("x", function(d,i){ return xScale(new Date(d[0]));})
//left start position of each bar from the data array
//output range width against input domain of dates
.attr("y", function(d) { return yScale(d[1])})
//scale is top down, so we get the bottom of the bar with yScale
//height of the bar from the bottom
//grows from the bottom
.attr("width", function(d,i) { return (w/data.length+1);})
//the width of each bar
//divide width of SVG by data points = width of each bar. Minus padding on one side
.attr("height", function(d) { return h - yScale(d[1]);})
//yScale returns height of bar
.attr("fill", "#2980b9")
.attr("class", "bar")
.on("mouseover", function(d){
//mouseover event listener for every bar
tip.transition()
//show tooltip with a delay of 200 milliseconds
.duration(200)
.style("opacity", 0.7);
//show the tooltip by making it non opaque
tip.html("<span><strong>"+ parsedGDP(d[1])+ "</strong><br/>" + parsedDate(d[0]) + "</span>")
//set the left and right position to the x and y coordinate of the cursor
.style("left", d3.event.pageX + "px")
.style("top", (d3.event.pageY - 40) + "px");
//distract by height to put the tooltip above the cursor
})
.on("mouseout", function(d){
tip.transition()
.duration(500)
.style("opacity", 0);
});
//take a g element selection and call xAxis function, then append to DOM
svg.append("g")
//append x axis
.attr("class", "axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
//.attr("transform", "translate(0,0)")
.call(yAxis);
Raw
style.css
body {
font-family: 'Roboto Slab', serif;
background-image: url("https://subtlepatterns.com/patterns/sos.png");
}
.axis path,
line {
fill: none;
stroke: black;
shape-rendering: crispEdges
}
.axis text {
font-family: sans-serif;
font-size: 12px;
}
svg {
background-color: white;
}
.tooltip {
position: absolute;
text-align: center;
vertical-align: middle;
width: 140px;
height: 48px;
padding: 5px;
font: 14px sans-serif;
background: #ecf0f1;
border: 0px;
border-radius: 8px;
}
.bar:hover {
fill: #d35400;
}
svg {
box-shadow: 0 0 10px #888888;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment