Skip to content

Instantly share code, notes, and snippets.

@karen-izuka

karen-izuka/data.csv

Last active June 15, 2019 14:54
Show Gist options
  • Save karen-izuka/1abdc2ff0041c4ab4fe7914d767fcc8b to your computer and use it in GitHub Desktop.
Save karen-izuka/1abdc2ff0041c4ab4fe7914d767fcc8b to your computer and use it in GitHub Desktop.
Download ZIP
Stock Price Heatmap
Raw
data.csv
year month value
2010 Jan 8.696036
2010 Feb 9.143008
2010 Mar 9.68576
2010 Apr 10.368195
2010 May 10.418239
2010 Jun 9.778413
2010 Jul 9.999735
2010 Aug 9.247241
2010 Sep 10.390129
2010 Oct 11.614171
2010 Nov 12.443755
2010 Dec 13.177216
2011 Jan 12.931145
2011 Feb 13.525818
2011 Mar 15.27591
2011 Apr 14.965843
2011 May 15.209763
2011 Jun 16.443031
2011 Jul 16.692867
2011 Aug 16.080774
2011 Sep 15.637712
2011 Oct 17.763836
2011 Nov 18.233511
2011 Dec 19.44598
2012 Jan 20.253239
2012 Feb 20.523735
2012 Mar 23.789124
2012 Apr 24.419073
2012 May 23.36348
2012 Jun 22.834967
2012 Jul 19.391733
2012 Aug 21.246113
2012 Sep 21.886667
2012 Oct 19.810646
2012 Nov 22.387327
2012 Dec 23.34038
2013 Jan 24.424055
2013 Feb 23.871338
2013 Mar 24.972275
2013 Apr 26.678017
2013 May 27.68656
2013 Jun 28.920197
2013 Jul 31.471844
2013 Aug 31.131924
2013 Sep 34.173378
2013 Oct 35.984844
2013 Nov 36.166866
2013 Dec 35.028748
2014 Jan 31.780138
2014 Feb 31.708641
2014 Mar 33.039116
2014 Apr 31.796432
2014 May 32.976086
2014 Jun 35.09745
2014 Jul 35.233521
2014 Aug 35.292488
2014 Sep 34.457699
2014 Oct 34.503365
2014 Nov 37.083351
2014 Dec 37.777737
2015 Jan 40.300854
2015 Feb 43.044971
2015 Mar 43.921547
2015 Apr 45.990093
2015 May 48.197754
2015 Jun 49.895802
2015 Jul 53.906456
2015 Aug 52.063984
2015 Sep 53.037998
2015 Oct 58.38472
2015 Nov 57.283638
2015 Dec 56.19598
2016 Jan 56.888721
2016 Feb 54.492218
2016 Mar 56.069698
2016 Apr 52.810711
2016 May 51.552189
2016 Jun 53.834293
2016 Jul 54.710793
2016 Aug 52.995495
2016 Sep 51.203411
2016 Oct 50.191448
2016 Nov 54.825668
2016 Dec 52.751785
2017 Jan 52.466743
2017 Feb 54.034477
2017 Mar 55.72868
2017 Apr 57.322567
2017 May 60.710766
2017 Jun 55.881577
2017 Jul 51.731907
2017 Aug 52.57526
2017 Sep 51.705513
2017 Oct 52.793343
2017 Nov 55.662125
2017 Dec 55.579563
2018 Jan 54.979546
2018 Feb 55.260201
2018 Mar 56.328621
2018 Apr 56.01725
2018 May 55.141521
2018 Jun 47.780998
2018 Jul 51.243534
2018 Aug 52.280334
2018 Sep 55.983208
2018 Oct 57.391651
2018 Nov 65.714279
2018 Dec 63.769806
2019 Jan 67.473213
2019 Feb 69.572472
2019 Mar 73.996712
2019 Apr 77.321297
2019 May 75.708771
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Starbucks</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Starbucks Historical Stock Price</h1>
<h2>Source: Yahoo Finance</h2>
<div id="chart"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
//static variables
const margin = {top: 50, right: 0, bottom: 0, left: 50};
const width = 1250 - margin.left - margin.right;
const height = 550 - margin.top - margin.bottom;
const 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})`);
const x = d3.scaleBand()
.range([0, width]);
const y = d3.scaleBand()
.range([0, height]);
const z = d3.scaleSequential(d3.interpolatePuBuGn);
const xAxis = g => g
.attr('transform', `translate(0, ${-margin.top/4})`)
.call(d3.axisTop(x).tickSize(0))
.call(g => g.select('.domain').remove());
const yAxis = g => g
.attr('transform', `translate(${-margin.left/4}, 0)`)
.call(d3.axisLeft(y).tickSize(0))
.call(g => g.select('.domain').remove());
const format = d3.format(',d');
//data load
const load = async () => {
const data = await d3.csv('data.csv', ({year, month, value}) => ({
year: year, month: month, value: +value
}));
chart(data);
}
//render chart
const chart = data => {
x.domain(data.map(d => d.month));
y.domain(data.map(d => d.year));
z.domain([0, d3.max(data, d => d.value)]);
const gx = svg.append('g')
.attr('class', 'axis')
.call(xAxis);
const gy = svg.append('g')
.attr('class', 'axis')
.call(yAxis);
const cards = svg.selectAll('.cards')
.data(data)
.join('rect')
.attr('class', 'cards')
.attr('x', d => x(d.month))
.attr('y', d => y(d.year))
.attr('rx', 10)
.attr('ry', 10)
.attr('width', x.bandwidth())
.attr('height', y.bandwidth())
.attr('fill', z(0));
cards.transition()
.duration(3000)
.attr('fill', d => z(d.value));
const label = svg.selectAll('.label')
.data(data)
.join('text')
.text(d => `$${format(d.value)}`)
.attr('class', 'label')
.attr('x', d => x(d.month) + x.bandwidth()/2)
.attr('y', d => y(d.year) + y.bandwidth()/2)
.attr('fill', d => d.value > 65 ? '#d0d1e6' : '#000000')
.attr('text-anchor', 'middle')
.attr('dy', '.35em')
.attr('opacity', 0);
label.transition()
.duration(3000)
.attr('opacity', 1);
}
load();
Raw
style.css
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
padding: 10px;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 5px;
text-align: center;
}
svg {
display: block;
margin: auto;
}
.axis text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.cards {
stroke: #ffffff;
stroke-width: 2px;
}
.label {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment