Skip to content

Instantly share code, notes, and snippets.

@areologist

areologist/.block

Last active July 8, 2017 21:02
Show Gist options
  • Save areologist/13e050e51cae8f05ce24d09ef8335e9c to your computer and use it in GitHub Desktop.
Save areologist/13e050e51cae8f05ce24d09ef8335e9c to your computer and use it in GitHub Desktop.
Download ZIP
stock data (line)
Raw
.block
license: mit
Raw
data.json
[
{
"ticker": "AMZN",
"values": [
{
"date": "2016/09/30",
"close": 837.31
},
{
"date": "2016/09/29",
"close": 829.05
},
{
"date": "2016/09/28",
"close": 828.72
},
{
"date": "2016/09/27",
"close": 816.11
},
{
"date": "2016/09/26",
"close": 799.16
},
{
"date": "2016/09/23",
"close": 805.75
},
{
"date": "2016/09/22",
"close": 804.7
},
{
"date": "2016/09/21",
"close": 789.74
},
{
"date": "2016/09/20",
"close": 780.22
},
{
"date": "2016/09/19",
"close": 775.1
},
{
"date": "2016/09/16",
"close": 778.52
},
{
"date": "2016/09/15",
"close": 769.69
},
{
"date": "2016/09/14",
"close": 761.09
},
{
"date": "2016/09/13",
"close": 761.01
},
{
"date": "2016/09/12",
"close": 771.49
},
{
"date": "2016/09/09",
"close": 760.14
},
{
"date": "2016/09/08",
"close": 784.06
},
{
"date": "2016/09/07",
"close": 784.48
},
{
"date": "2016/09/06",
"close": 788.87
},
{
"date": "2016/09/02",
"close": 772.44
},
{
"date": "2016/09/01",
"close": 770.62
},
{
"date": "2016/08/31",
"close": 769.16
},
{
"date": "2016/08/30",
"close": 767.58
},
{
"date": "2016/08/29",
"close": 771.29
},
{
"date": "2016/08/26",
"close": 769
},
{
"date": "2016/08/25",
"close": 759.22
},
{
"date": "2016/08/24",
"close": 757.25
},
{
"date": "2016/08/23",
"close": 762.45
},
{
"date": "2016/08/22",
"close": 759.48
},
{
"date": "2016/08/19",
"close": 757.31
},
{
"date": "2016/08/18",
"close": 764.46
},
{
"date": "2016/08/17",
"close": 764.63
},
{
"date": "2016/08/16",
"close": 764.04
},
{
"date": "2016/08/15",
"close": 768.49
},
{
"date": "2016/08/12",
"close": 772.56
},
{
"date": "2016/08/11",
"close": 771.24
},
{
"date": "2016/08/10",
"close": 768.56
},
{
"date": "2016/08/09",
"close": 768.31
},
{
"date": "2016/08/08",
"close": 766.56
},
{
"date": "2016/08/05",
"close": 765.98
},
{
"date": "2016/08/04",
"close": 760.77
},
{
"date": "2016/08/03",
"close": 754.64
},
{
"date": "2016/08/02",
"close": 760.58
},
{
"date": "2016/08/01",
"close": 767.74
},
{
"date": "2016/07/29",
"close": 758.81
},
{
"date": "2016/07/28",
"close": 752.61
},
{
"date": "2016/07/27",
"close": 736.67
},
{
"date": "2016/07/26",
"close": 735.59
},
{
"date": "2016/07/25",
"close": 739.61
},
{
"date": "2016/07/22",
"close": 744.86
},
{
"date": "2016/07/21",
"close": 744.43
},
{
"date": "2016/07/20",
"close": 745.72
},
{
"date": "2016/07/19",
"close": 739.95
},
{
"date": "2016/07/18",
"close": 736.07
},
{
"date": "2016/07/15",
"close": 735.44
},
{
"date": "2016/07/14",
"close": 741.2
},
{
"date": "2016/07/13",
"close": 742.63
},
{
"date": "2016/07/12",
"close": 748.21
},
{
"date": "2016/07/11",
"close": 753.78
},
{
"date": "2016/07/08",
"close": 745.81
},
{
"date": "2016/07/07",
"close": 736.57
},
{
"date": "2016/07/06",
"close": 737.61
},
{
"date": "2016/07/05",
"close": 728.1
},
{
"date": "2016/07/01",
"close": 725.68
}
]
},
{
"ticker": "GOOG",
"values": [
{
"date": "2016/09/30",
"close": 777.29
},
{
"date": "2016/09/29",
"close": 775.01
},
{
"date": "2016/09/28",
"close": 781.56
},
{
"date": "2016/09/27",
"close": 783.01
},
{
"date": "2016/09/26",
"close": 774.21
},
{
"date": "2016/09/23",
"close": 786.9
},
{
"date": "2016/09/22",
"close": 787.21
},
{
"date": "2016/09/21",
"close": 776.22
},
{
"date": "2016/09/20",
"close": 771.41
},
{
"date": "2016/09/19",
"close": 765.7
},
{
"date": "2016/09/16",
"close": 768.88
},
{
"date": "2016/09/15",
"close": 771.76
},
{
"date": "2016/09/14",
"close": 762.49
},
{
"date": "2016/09/13",
"close": 759.69
},
{
"date": "2016/09/12",
"close": 769.02
},
{
"date": "2016/09/09",
"close": 759.66
},
{
"date": "2016/09/08",
"close": 775.32
},
{
"date": "2016/09/07",
"close": 780.35
},
{
"date": "2016/09/06",
"close": 780.08
},
{
"date": "2016/09/02",
"close": 771.46
},
{
"date": "2016/09/01",
"close": 768.78
},
{
"date": "2016/08/31",
"close": 767.05
},
{
"date": "2016/08/30",
"close": 769.09
},
{
"date": "2016/08/29",
"close": 772.15
},
{
"date": "2016/08/26",
"close": 769.54
},
{
"date": "2016/08/25",
"close": 769.41
},
{
"date": "2016/08/24",
"close": 769.64
},
{
"date": "2016/08/23",
"close": 772.08
},
{
"date": "2016/08/22",
"close": 772.15
},
{
"date": "2016/08/19",
"close": 775.42
},
{
"date": "2016/08/18",
"close": 777.5
},
{
"date": "2016/08/17",
"close": 779.91
},
{
"date": "2016/08/16",
"close": 777.14
},
{
"date": "2016/08/15",
"close": 782.44
},
{
"date": "2016/08/12",
"close": 783.22
},
{
"date": "2016/08/11",
"close": 784.85
},
{
"date": "2016/08/10",
"close": 784.68
},
{
"date": "2016/08/09",
"close": 784.26
},
{
"date": "2016/08/08",
"close": 781.76
},
{
"date": "2016/08/05",
"close": 782.22
},
{
"date": "2016/08/04",
"close": 771.61
},
{
"date": "2016/08/03",
"close": 773.18
},
{
"date": "2016/08/02",
"close": 771.07
},
{
"date": "2016/08/01",
"close": 772.88
},
{
"date": "2016/07/29",
"close": 768.79
},
{
"date": "2016/07/28",
"close": 745.91
},
{
"date": "2016/07/27",
"close": 741.77
},
{
"date": "2016/07/26",
"close": 738.42
},
{
"date": "2016/07/25",
"close": 739.77
},
{
"date": "2016/07/22",
"close": 742.74
},
{
"date": "2016/07/21",
"close": 738.63
},
{
"date": "2016/07/20",
"close": 741.19
},
{
"date": "2016/07/19",
"close": 736.96
},
{
"date": "2016/07/18",
"close": 733.78
},
{
"date": "2016/07/15",
"close": 719.85
},
{
"date": "2016/07/14",
"close": 720.95
},
{
"date": "2016/07/13",
"close": 716.98
},
{
"date": "2016/07/12",
"close": 720.64
},
{
"date": "2016/07/11",
"close": 715.09
},
{
"date": "2016/07/08",
"close": 705.63
},
{
"date": "2016/07/07",
"close": 695.36
},
{
"date": "2016/07/06",
"close": 697.77
},
{
"date": "2016/07/05",
"close": 694.49
},
{
"date": "2016/07/01",
"close": 699.21
}
]
}
]
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {
border: 1px solid gray;
}
</style>
</head>
<body>
<script>
const margin = { top: 20, right: 30, bottom: 40, left: 40, };
const fullWidth = 560;
const fullHeight = 500;
const width = fullWidth - margin.right - margin.left;
const height = fullHeight - margin.top - margin.bottom;
const svg = d3.select("body").append("svg")
.attr("width", fullWidth)
.attr("height", fullHeight)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const parseTime = d3.timeParse('%Y/%m/%d');
let yScale, xScale;
d3.json('data.json', (err, data) => {
data.forEach(ticker => {
ticker.values.forEach(d => {
d.date = parseTime(d.date);
d.close = parseFloat(d.close);
})
});
setup(data);
});
function setup(data) {
// build y scale and axis
let min = d3.min(data,
ticker => d3.min(ticker.values,
d => d.close));
let max = d3.max(data,
ticker => d3.max(ticker.values,
d => d.close));
yScale = d3.scaleLinear()
.domain([min, max])
.range([height, 0]);
const yAxis = d3.axisLeft(yScale);
svg.append('g')
.call(yAxis);
// build the x scale and axis
min = d3.min(data,
ticker => d3.min(ticker.values,
d => d.date));
max = d3.max(data,
ticker => d3.max(ticker.values,
d => d.date));
xScale = d3.scaleTime()
.domain([min, max])
.range([0, width]);
const xAxis = d3.axisBottom(xScale)
.ticks(6);
svg.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
update(data);
}
function update(data) {
const line = d3.line()
.x(d => xScale(d.date))
.y(d => yScale(d.close))
.curve(d3.curveCatmullRom.alpha(0.5));
const colors = ['#ff9900', '#3369e8'];
svg.selectAll('.line')
.data(data)
.enter()
.append('path')
.attr('class', 'line')
.attr('d', d => line(d.values))
.style('stroke-width', 2)
.style('stroke', (d, i) => colors[i])
.style('fill', 'none');
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment