Skip to content

Instantly share code, notes, and snippets.

@marialuisacp

marialuisacp/.block

Last active June 24, 2019 16:07
Show Gist options
  • Save marialuisacp/c8f50cd27d34f6a34c05ab59eb3ec7e5 to your computer and use it in GitHub Desktop.
Save marialuisacp/c8f50cd27d34f6a34c05ab59eb3ec7e5 to your computer and use it in GitHub Desktop.
Download ZIP
Time Series - Bar Chart
Raw
.block
license: gpl-3.0
height: 500
scrolling: no
border: yes
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Total Business Inventories and Sales Data</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito+Sans:300,300i,400,400i,600,600i,700&display=swap');
body * {
font-family: 'Nunito Sans', sans-serif;
}
h1, h2, h3 {
font-family: 'Archivo Narrow', sans-serif;
color: #008C31;
}
h1 {
color: #006C11;
}
a {
text-decoration: none;
color: #999;
}
.content {
display: block;
margin: 0 auto;
max-width: 1600px;
}
svg {
display: block;
margin: 0 auto;
}
.axis {
font: 12px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #434343;
shape-rendering: crispEdges;
}
.source {
font-size: .8em;
text-align: right;
}
.source span {
font-style: italic;
}
</style>
</head>
<body>
<div class="content">
<h1> Total Business Inventories and Sales Data </h1>
<h2> Explore Time Series from the U.S. Census Bureau </h2>
</div>
<div class="svg" id="area-visualization"></div>
<div class="svg" id="area-line"></div>
<p class="source content">
<span> Source: </span>
<a target='_blank' href="https://www.kaggle.com/census/total-business-inventories-and-sales-data">
https://www.kaggle.com/census/total-business-inventories-and-sales-data
</a>
</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
const margin = {
top: 20,
right: 20,
bottom: 70,
left: 40,
horizontal: 80
};
const width = 1800 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
const parseDate = d3.time.format("%Y-%m-%d").parse;
const x = d3.scale.ordinal().rangeRoundBands([0, width - margin.horizontal], .3);
const y = d3.scale.linear().range([height, 0]);
const xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y-%m"));
const yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
let svg = d3.select("#area-visualization").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 + ")");
d3.csv("total-business-inventories-to-sales-ratio.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
x.domain(data.map(function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
let i = 0;
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("opacity",(d) => { i++; if( i % 15 === 0) return 1; return 0; })
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)" );
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value ($)");
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill",(d) => { if (d.value > 1.4) return "#0EAC51"; return "#3EDC81"; })
.attr("x",(d) => { return x(d.date); })
.attr("width", x.rangeBand())
.attr("y", (d, i) => {
return height;
})
.attr("height", 0)
.transition()
.duration(50)
.delay((d, i) => {
return i * 50;
})
.attr("y",(d) => { return y(d.value); })
.attr("height",(d) => { return height - y(d.value); });
let lineHeight = 1;
let yline = y(1.4) - (height + margin.bottom + margin.top) + lineHeight;
let svgLine = d3.select("#area-line")
.append("svg")
.attr("width", width - margin.horizontal)
.attr("height", lineHeight)
.style("background", "#C5D3E2")
.style("opacity", 1)
.attr("id", "line")
.attr("transform", "translate(0,"+ yline +")");
});
</script>
</body>
</html>
Raw
total-business-inventories-to-sales-ratio.csv
realtime_start realtime_end date value
2019-04-08 2019-04-08 1992-01-01 1.68
2019-04-08 2019-04-08 1992-02-01 1.63
2019-04-08 2019-04-08 1992-03-01 1.50
2019-04-08 2019-04-08 1992-04-01 1.53
2019-04-08 2019-04-08 1992-05-01 1.52
2019-04-08 2019-04-08 1992-06-01 1.44
2019-04-08 2019-04-08 1992-07-01 1.55
2019-04-08 2019-04-08 1992-08-01 1.52
2019-04-08 2019-04-08 1992-09-01 1.47
2019-04-08 2019-04-08 1992-10-01 1.49
2019-04-08 2019-04-08 1992-11-01 1.56
2019-04-08 2019-04-08 1992-12-01 1.40
2019-04-08 2019-04-08 1993-01-01 1.66
2019-04-08 2019-04-08 1993-02-01 1.61
2019-04-08 2019-04-08 1993-03-01 1.46
2019-04-08 2019-04-08 1993-04-01 1.51
2019-04-08 2019-04-08 1993-05-01 1.49
2019-04-08 2019-04-08 1993-06-01 1.42
2019-04-08 2019-04-08 1993-07-01 1.55
2019-04-08 2019-04-08 1993-08-01 1.48
2019-04-08 2019-04-08 1993-09-01 1.45
2019-04-08 2019-04-08 1993-10-01 1.49
2019-04-08 2019-04-08 1993-11-01 1.51
2019-04-08 2019-04-08 1993-12-01 1.38
2019-04-08 2019-04-08 1994-01-01 1.64
2019-04-08 2019-04-08 1994-02-01 1.58
2019-04-08 2019-04-08 1994-03-01 1.40
2019-04-08 2019-04-08 1994-04-01 1.49
2019-04-08 2019-04-08 1994-05-01 1.46
2019-04-08 2019-04-08 1994-06-01 1.39
2019-04-08 2019-04-08 1994-07-01 1.55
2019-04-08 2019-04-08 1994-08-01 1.40
2019-04-08 2019-04-08 1994-09-01 1.41
2019-04-08 2019-04-08 1994-10-01 1.46
2019-04-08 2019-04-08 1994-11-01 1.48
2019-04-08 2019-04-08 1994-12-01 1.36
2019-04-08 2019-04-08 1995-01-01 1.59
2019-04-08 2019-04-08 1995-02-01 1.57
2019-04-08 2019-04-08 1995-03-01 1.42
2019-04-08 2019-04-08 1995-04-01 1.53
2019-04-08 2019-04-08 1995-05-01 1.45
2019-04-08 2019-04-08 1995-06-01 1.39
2019-04-08 2019-04-08 1995-07-01 1.58
2019-04-08 2019-04-08 1995-08-01 1.43
2019-04-08 2019-04-08 1995-09-01 1.44
2019-04-08 2019-04-08 1995-10-01 1.48
2019-04-08 2019-04-08 1995-11-01 1.51
2019-04-08 2019-04-08 1995-12-01 1.39
2019-04-08 2019-04-08 1996-01-01 1.62
2019-04-08 2019-04-08 1996-02-01 1.55
2019-04-08 2019-04-08 1996-03-01 1.44
2019-04-08 2019-04-08 1996-04-01 1.47
2019-04-08 2019-04-08 1996-05-01 1.41
2019-04-08 2019-04-08 1996-06-01 1.40
2019-04-08 2019-04-08 1996-07-01 1.49
2019-04-08 2019-04-08 1996-08-01 1.40
2019-04-08 2019-04-08 1996-09-01 1.42
2019-04-08 2019-04-08 1996-10-01 1.42
2019-04-08 2019-04-08 1996-11-01 1.47
2019-04-08 2019-04-08 1996-12-01 1.36
2019-04-08 2019-04-08 1997-01-01 1.54
2019-04-08 2019-04-08 1997-02-01 1.51
2019-04-08 2019-04-08 1997-03-01 1.38
2019-04-08 2019-04-08 1997-04-01 1.43
2019-04-08 2019-04-08 1997-05-01 1.40
2019-04-08 2019-04-08 1997-06-01 1.36
2019-04-08 2019-04-08 1997-07-01 1.45
2019-04-08 2019-04-08 1997-08-01 1.40
2019-04-08 2019-04-08 1997-09-01 1.36
2019-04-08 2019-04-08 1997-10-01 1.40
2019-04-08 2019-04-08 1997-11-01 1.49
2019-04-08 2019-04-08 1997-12-01 1.33
2019-04-08 2019-04-08 1998-01-01 1.57
2019-04-08 2019-04-08 1998-02-01 1.53
2019-04-08 2019-04-08 1998-03-01 1.38
2019-04-08 2019-04-08 1998-04-01 1.44
2019-04-08 2019-04-08 1998-05-01 1.43
2019-04-08 2019-04-08 1998-06-01 1.35
2019-04-08 2019-04-08 1998-07-01 1.48
2019-04-08 2019-04-08 1998-08-01 1.43
2019-04-08 2019-04-08 1998-09-01 1.39
2019-04-08 2019-04-08 1998-10-01 1.43
2019-04-08 2019-04-08 1998-11-01 1.50
2019-04-08 2019-04-08 1998-12-01 1.33
2019-04-08 2019-04-08 1999-01-01 1.59
2019-04-08 2019-04-08 1999-02-01 1.52
2019-04-08 2019-04-08 1999-03-01 1.35
2019-04-08 2019-04-08 1999-04-01 1.43
2019-04-08 2019-04-08 1999-05-01 1.40
2019-04-08 2019-04-08 1999-06-01 1.32
2019-04-08 2019-04-08 1999-07-01 1.45
2019-04-08 2019-04-08 1999-08-01 1.36
2019-04-08 2019-04-08 1999-09-01 1.35
2019-04-08 2019-04-08 1999-10-01 1.41
2019-04-08 2019-04-08 1999-11-01 1.43
2019-04-08 2019-04-08 1999-12-01 1.29
2019-04-08 2019-04-08 2000-01-01 1.54
2019-04-08 2019-04-08 2000-02-01 1.45
2019-04-08 2019-04-08 2000-03-01 1.31
2019-04-08 2019-04-08 2000-04-01 1.44
2019-04-08 2019-04-08 2000-05-01 1.36
2019-04-08 2019-04-08 2000-06-01 1.31
2019-04-08 2019-04-08 2000-07-01 1.48
2019-04-08 2019-04-08 2000-08-01 1.36
2019-04-08 2019-04-08 2000-09-01 1.37
2019-04-08 2019-04-08 2000-10-01 1.43
2019-04-08 2019-04-08 2000-11-01 1.48
2019-04-08 2019-04-08 2000-12-01 1.36
2019-04-08 2019-04-08 2001-01-01 1.55
2019-04-08 2019-04-08 2001-02-01 1.54
2019-04-08 2019-04-08 2001-03-01 1.38
2019-04-08 2019-04-08 2001-04-01 1.48
2019-04-08 2019-04-08 2001-05-01 1.37
2019-04-08 2019-04-08 2001-06-01 1.37
2019-04-08 2019-04-08 2001-07-01 1.48
2019-04-08 2019-04-08 2001-08-01 1.35
2019-04-08 2019-04-08 2001-09-01 1.45
2019-04-08 2019-04-08 2001-10-01 1.39
2019-04-08 2019-04-08 2001-11-01 1.44
2019-04-08 2019-04-08 2001-12-01 1.33
2019-04-08 2019-04-08 2002-01-01 1.49
2019-04-08 2019-04-08 2002-02-01 1.49
2019-04-08 2019-04-08 2002-03-01 1.34
2019-04-08 2019-04-08 2002-04-01 1.36
2019-04-08 2019-04-08 2002-05-01 1.30
2019-04-08 2019-04-08 2002-06-01 1.32
2019-04-08 2019-04-08 2002-07-01 1.37
2019-04-08 2019-04-08 2002-08-01 1.29
2019-04-08 2019-04-08 2002-09-01 1.35
2019-04-08 2019-04-08 2002-10-01 1.34
2019-04-08 2019-04-08 2002-11-01 1.41
2019-04-08 2019-04-08 2002-12-01 1.30
2019-04-08 2019-04-08 2003-01-01 1.45
2019-04-08 2019-04-08 2003-02-01 1.48
2019-04-08 2019-04-08 2003-03-01 1.33
2019-04-08 2019-04-08 2003-04-01 1.38
2019-04-08 2019-04-08 2003-05-01 1.33
2019-04-08 2019-04-08 2003-06-01 1.30
2019-04-08 2019-04-08 2003-07-01 1.34
2019-04-08 2019-04-08 2003-08-01 1.29
2019-04-08 2019-04-08 2003-09-01 1.29
2019-04-08 2019-04-08 2003-10-01 1.30
2019-04-08 2019-04-08 2003-11-01 1.40
2019-04-08 2019-04-08 2003-12-01 1.22
2019-04-08 2019-04-08 2004-01-01 1.42
2019-04-08 2019-04-08 2004-02-01 1.40
2019-04-08 2019-04-08 2004-03-01 1.22
2019-04-08 2019-04-08 2004-04-01 1.30
2019-04-08 2019-04-08 2004-05-01 1.28
2019-04-08 2019-04-08 2004-06-01 1.24
2019-04-08 2019-04-08 2004-07-01 1.33
2019-04-08 2019-04-08 2004-08-01 1.26
2019-04-08 2019-04-08 2004-09-01 1.28
2019-04-08 2019-04-08 2004-10-01 1.31
2019-04-08 2019-04-08 2004-11-01 1.34
2019-04-08 2019-04-08 2004-12-01 1.20
2019-04-08 2019-04-08 2005-01-01 1.42
2019-04-08 2019-04-08 2005-02-01 1.41
2019-04-08 2019-04-08 2005-03-01 1.23
2019-04-08 2019-04-08 2005-04-01 1.30
2019-04-08 2019-04-08 2005-05-01 1.26
2019-04-08 2019-04-08 2005-06-01 1.21
2019-04-08 2019-04-08 2005-07-01 1.30
2019-04-08 2019-04-08 2005-08-01 1.19
2019-04-08 2019-04-08 2005-09-01 1.23
2019-04-08 2019-04-08 2005-10-01 1.27
2019-04-08 2019-04-08 2005-11-01 1.30
2019-04-08 2019-04-08 2005-12-01 1.19
2019-04-08 2019-04-08 2006-01-01 1.36
2019-04-08 2019-04-08 2006-02-01 1.38
2019-04-08 2019-04-08 2006-03-01 1.20
2019-04-08 2019-04-08 2006-04-01 1.31
2019-04-08 2019-04-08 2006-05-01 1.22
2019-04-08 2019-04-08 2006-06-01 1.21
2019-04-08 2019-04-08 2006-07-01 1.32
2019-04-08 2019-04-08 2006-08-01 1.21
2019-04-08 2019-04-08 2006-09-01 1.30
2019-04-08 2019-04-08 2006-10-01 1.32
2019-04-08 2019-04-08 2006-11-01 1.36
2019-04-08 2019-04-08 2006-12-01 1.24
2019-04-08 2019-04-08 2007-01-01 1.40
2019-04-08 2019-04-08 2007-02-01 1.43
2019-04-08 2019-04-08 2007-03-01 1.24
2019-04-08 2019-04-08 2007-04-01 1.31
2019-04-08 2019-04-08 2007-05-01 1.22
2019-04-08 2019-04-08 2007-06-01 1.23
2019-04-08 2019-04-08 2007-07-01 1.30
2019-04-08 2019-04-08 2007-08-01 1.21
2019-04-08 2019-04-08 2007-09-01 1.31
2019-04-08 2019-04-08 2007-10-01 1.26
2019-04-08 2019-04-08 2007-11-01 1.30
2019-04-08 2019-04-08 2007-12-01 1.24
2019-04-08 2019-04-08 2008-01-01 1.35
2019-04-08 2019-04-08 2008-02-01 1.37
2019-04-08 2019-04-08 2008-03-01 1.27
2019-04-08 2019-04-08 2008-04-01 1.27
2019-04-08 2019-04-08 2008-05-01 1.21
2019-04-08 2019-04-08 2008-06-01 1.20
2019-04-08 2019-04-08 2008-07-01 1.24
2019-04-08 2019-04-08 2008-08-01 1.25
2019-04-08 2019-04-08 2008-09-01 1.30
2019-04-08 2019-04-08 2008-10-01 1.34
2019-04-08 2019-04-08 2008-11-01 1.54
2019-04-08 2019-04-08 2008-12-01 1.38
2019-04-08 2019-04-08 2009-01-01 1.59
2019-04-08 2019-04-08 2009-02-01 1.60
2019-04-08 2019-04-08 2009-03-01 1.43
2019-04-08 2019-04-08 2009-04-01 1.45
2019-04-08 2019-04-08 2009-05-01 1.40
2019-04-08 2019-04-08 2009-06-01 1.31
2019-04-08 2019-04-08 2009-07-01 1.34
2019-04-08 2019-04-08 2009-08-01 1.30
2019-04-08 2019-04-08 2009-09-01 1.31
2019-04-08 2019-04-08 2009-10-01 1.31
2019-04-08 2019-04-08 2009-11-01 1.36
2019-04-08 2019-04-08 2009-12-01 1.20
2019-04-08 2019-04-08 2010-01-01 1.39
2019-04-08 2019-04-08 2010-02-01 1.41
2019-04-08 2019-04-08 2010-03-01 1.20
2019-04-08 2019-04-08 2010-04-01 1.24
2019-04-08 2019-04-08 2010-05-01 1.24
2019-04-08 2019-04-08 2010-06-01 1.21
2019-04-08 2019-04-08 2010-07-01 1.27
2019-04-08 2019-04-08 2010-08-01 1.23
2019-04-08 2019-04-08 2010-09-01 1.27
2019-04-08 2019-04-08 2010-10-01 1.30
2019-04-08 2019-04-08 2010-11-01 1.31
2019-04-08 2019-04-08 2010-12-01 1.19
2019-04-08 2019-04-08 2011-01-01 1.37
2019-04-08 2019-04-08 2011-02-01 1.39
2019-04-08 2019-04-08 2011-03-01 1.18
2019-04-08 2019-04-08 2011-04-01 1.25
2019-04-08 2019-04-08 2011-05-01 1.23
2019-04-08 2019-04-08 2011-06-01 1.20
2019-04-08 2019-04-08 2011-07-01 1.29
2019-04-08 2019-04-08 2011-08-01 1.20
2019-04-08 2019-04-08 2011-09-01 1.25
2019-04-08 2019-04-08 2011-10-01 1.29
2019-04-08 2019-04-08 2011-11-01 1.30
2019-04-08 2019-04-08 2011-12-01 1.20
2019-04-08 2019-04-08 2012-01-01 1.36
2019-04-08 2019-04-08 2012-02-01 1.33
2019-04-08 2019-04-08 2012-03-01 1.20
2019-04-08 2019-04-08 2012-04-01 1.27
2019-04-08 2019-04-08 2012-05-01 1.21
2019-04-08 2019-04-08 2012-06-01 1.25
2019-04-08 2019-04-08 2012-07-01 1.31
2019-04-08 2019-04-08 2012-08-01 1.23
2019-04-08 2019-04-08 2012-09-01 1.31
2019-04-08 2019-04-08 2012-10-01 1.28
2019-04-08 2019-04-08 2012-11-01 1.32
2019-04-08 2019-04-08 2012-12-01 1.25
2019-04-08 2019-04-08 2013-01-01 1.37
2019-04-08 2019-04-08 2013-02-01 1.41
2019-04-08 2019-04-08 2013-03-01 1.26
2019-04-08 2019-04-08 2013-04-01 1.29
2019-04-08 2019-04-08 2013-05-01 1.22
2019-04-08 2019-04-08 2013-06-01 1.26
2019-04-08 2019-04-08 2013-07-01 1.28
2019-04-08 2019-04-08 2013-08-01 1.24
2019-04-08 2019-04-08 2013-09-01 1.31
2019-04-08 2019-04-08 2013-10-01 1.28
2019-04-08 2019-04-08 2013-11-01 1.35
2019-04-08 2019-04-08 2013-12-01 1.24
2019-04-08 2019-04-08 2014-01-01 1.40
2019-04-08 2019-04-08 2014-02-01 1.44
2019-04-08 2019-04-08 2014-03-01 1.28
2019-04-08 2019-04-08 2014-04-01 1.29
2019-04-08 2019-04-08 2014-05-01 1.25
2019-04-08 2019-04-08 2014-06-01 1.26
2019-04-08 2019-04-08 2014-07-01 1.29
2019-04-08 2019-04-08 2014-08-01 1.28
2019-04-08 2019-04-08 2014-09-01 1.30
2019-04-08 2019-04-08 2014-10-01 1.30
2019-04-08 2019-04-08 2014-11-01 1.41
2019-04-08 2019-04-08 2014-12-01 1.26
2019-04-08 2019-04-08 2015-01-01 1.49
2019-04-08 2019-04-08 2015-02-01 1.53
2019-04-08 2019-04-08 2015-03-01 1.34
2019-04-08 2019-04-08 2015-04-01 1.37
2019-04-08 2019-04-08 2015-05-01 1.35
2019-04-08 2019-04-08 2015-06-01 1.31
2019-04-08 2019-04-08 2015-07-01 1.37
2019-04-08 2019-04-08 2015-08-01 1.37
2019-04-08 2019-04-08 2015-09-01 1.38
2019-04-08 2019-04-08 2015-10-01 1.40
2019-04-08 2019-04-08 2015-11-01 1.47
2019-04-08 2019-04-08 2015-12-01 1.32
2019-04-08 2019-04-08 2016-01-01 1.59
2019-04-08 2019-04-08 2016-02-01 1.53
2019-04-08 2019-04-08 2016-03-01 1.36
2019-04-08 2019-04-08 2016-04-01 1.44
2019-04-08 2019-04-08 2016-05-01 1.39
2019-04-08 2019-04-08 2016-06-01 1.34
2019-04-08 2019-04-08 2016-07-01 1.45
2019-04-08 2019-04-08 2016-08-01 1.35
2019-04-08 2019-04-08 2016-09-01 1.39
2019-04-08 2019-04-08 2016-10-01 1.43
2019-04-08 2019-04-08 2016-11-01 1.44
2019-04-08 2019-04-08 2016-12-01 1.30
2019-04-08 2019-04-08 2017-01-01 1.51
2019-04-08 2019-04-08 2017-02-01 1.54
2019-04-08 2019-04-08 2017-03-01 1.33
2019-04-08 2019-04-08 2017-04-01 1.43
2019-04-08 2019-04-08 2017-05-01 1.33
2019-04-08 2019-04-08 2017-06-01 1.32
2019-04-08 2019-04-08 2017-07-01 1.42
2019-04-08 2019-04-08 2017-08-01 1.32
2019-04-08 2019-04-08 2017-09-01 1.37
2019-04-08 2019-04-08 2017-10-01 1.36
2019-04-08 2019-04-08 2017-11-01 1.37
2019-04-08 2019-04-08 2017-12-01 1.29
2019-04-08 2019-04-08 2018-01-01 1.46
2019-04-08 2019-04-08 2018-02-01 1.51
2019-04-08 2019-04-08 2018-03-01 1.31
2019-04-08 2019-04-08 2018-04-01 1.38
2019-04-08 2019-04-08 2018-05-01 1.27
2019-04-08 2019-04-08 2018-06-01 1.29
2019-04-08 2019-04-08 2018-07-01 1.35
2019-04-08 2019-04-08 2018-08-01 1.27
2019-04-08 2019-04-08 2018-09-01 1.37
2019-04-08 2019-04-08 2018-10-01 1.33
2019-04-08 2019-04-08 2018-11-01 1.37
2019-04-08 2019-04-08 2018-12-01 1.33
2019-04-08 2019-04-08 2019-01-01 1.50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment