Skip to content

Instantly share code, notes, and snippets.

@sarubenfeld

sarubenfeld/amazon.csv

Created October 28, 2016 19:56
Show Gist options
  • Save sarubenfeld/9765b0fb33c42c2f1faf45c26f3ebcdb to your computer and use it in GitHub Desktop.
Save sarubenfeld/9765b0fb33c42c2f1faf45c26f3ebcdb to your computer and use it in GitHub Desktop.
Download ZIP
Zoom and Brush: 2016 AMZN Stock Market Close
Raw
amazon.csv
date close
2016-01-04 636.98999
2016-01-05 633.789978
2016-01-06 632.650024
2016-01-07 607.940002
2016-01-08 607.049988
2016-01-11 617.73999
2016-01-12 617.890015
2016-01-13 581.809998
2016-01-14 593.0
2016-01-15 570.179993
2016-01-19 574.47998
2016-01-20 571.77002
2016-01-21 575.02002
2016-01-22 596.380005
2016-01-25 596.530029
2016-01-26 601.25
2016-01-27 583.349976
2016-01-28 635.349976
2016-01-29 587.0
2016-02-01 574.809998
2016-02-02 552.099976
2016-02-03 531.070007
2016-02-04 536.26001
2016-02-05 502.130005
2016-02-08 488.100006
2016-02-09 482.070007
2016-02-10 490.480011
2016-02-11 503.820007
2016-02-12 507.079987
2016-02-16 521.099976
2016-02-17 534.099976
2016-02-18 525.0
2016-02-19 534.900024
2016-02-22 559.5
2016-02-23 552.940002
2016-02-24 554.039978
2016-02-25 555.150024
2016-02-26 555.22998
2016-02-29 552.52002
2016-03-01 579.039978
2016-03-02 580.210022
2016-03-03 577.48999
2016-03-04 575.140015
2016-03-07 562.799988
2016-03-08 560.26001
2016-03-09 559.469971
2016-03-10 558.929993
2016-03-11 569.609985
2016-03-14 573.369995
2016-03-15 577.02002
2016-03-16 574.27002
2016-03-17 559.440002
2016-03-18 552.080017
2016-03-21 553.97998
2016-03-22 560.47998
2016-03-23 569.630005
2016-03-24 582.950012
2016-03-28 579.869995
2016-03-29 593.859985
2016-03-30 598.690002
2016-03-31 593.640015
2016-04-01 598.5
2016-04-04 593.190002
2016-04-05 586.140015
2016-04-06 602.080017
2016-04-07 591.429993
2016-04-08 594.599976
2016-04-11 595.929993
2016-04-12 603.169983
2016-04-13 614.820007
2016-04-14 620.75
2016-04-15 625.890015
2016-04-18 635.349976
2016-04-19 627.900024
2016-04-20 632.98999
2016-04-21 631.0
2016-04-22 620.5
2016-04-25 626.200012
2016-04-26 616.880005
2016-04-27 606.570007
2016-04-28 602.0
2016-04-29 659.590027
2016-05-02 683.849976
2016-05-03 671.320007
2016-05-04 670.900024
2016-05-05 659.090027
2016-05-06 673.950012
2016-05-09 679.75
2016-05-10 703.070007
2016-05-11 713.22998
2016-05-12 717.929993
2016-05-13 709.919983
2016-05-16 710.659973
2016-05-17 695.27002
2016-05-18 697.450012
2016-05-19 698.52002
2016-05-20 702.799988
2016-05-23 696.75
2016-05-24 704.200012
2016-05-25 708.349976
2016-05-26 714.909973
2016-05-27 712.23999
2016-05-31 722.789978
2016-06-01 719.440002
2016-06-02 728.23999
2016-06-03 725.539978
2016-06-06 726.72998
2016-06-07 723.73999
2016-06-08 726.640015
2016-06-09 727.650024
2016-06-10 717.909973
2016-06-13 715.23999
2016-06-14 719.299988
2016-06-15 714.26001
2016-06-16 717.51001
2016-06-17 706.390015
2016-06-20 714.01001
2016-06-21 715.820007
2016-06-22 710.599976
2016-06-23 722.080017
2016-06-24 698.960022
2016-06-27 691.359985
2016-06-28 707.950012
2016-06-29 715.599976
2016-06-30 715.619995
2016-07-01 725.679993
2016-07-05 728.099976
2016-07-06 737.609985
2016-07-07 736.570007
2016-07-08 745.809998
2016-07-11 753.780029
2016-07-12 748.210022
2016-07-13 742.630005
2016-07-14 741.200012
2016-07-15 735.440002
2016-07-18 736.070007
2016-07-19 739.950012
2016-07-20 745.719971
2016-07-21 744.429993
2016-07-22 744.859985
2016-07-25 739.609985
2016-07-26 735.590027
2016-07-27 736.669983
2016-07-28 752.609985
2016-07-29 758.809998
2016-08-01 767.73999
2016-08-02 760.580017
2016-08-03 754.640015
2016-08-04 760.77002
2016-08-05 765.97998
2016-08-08 766.559998
2016-08-09 768.309998
2016-08-10 768.559998
2016-08-11 771.23999
2016-08-12 772.559998
2016-08-15 768.48999
2016-08-16 764.039978
2016-08-17 764.630005
2016-08-18 764.460022
2016-08-19 757.309998
2016-08-22 759.47998
2016-08-23 762.450012
2016-08-24 757.25
2016-08-25 759.219971
2016-08-26 769.0
2016-08-29 771.289978
2016-08-30 767.580017
2016-08-31 769.159973
2016-09-01 770.619995
2016-09-02 772.440002
2016-09-06 788.869995
2016-09-07 784.47998
2016-09-08 784.059998
2016-09-09 760.140015
2016-09-12 771.48999
2016-09-13 761.01001
2016-09-14 761.090027
2016-09-15 769.690002
2016-09-16 778.52002
2016-09-19 775.099976
2016-09-20 780.219971
2016-09-21 789.73999
2016-09-22 804.700012
2016-09-23 805.75
2016-09-26 799.159973
2016-09-27 816.109985
2016-09-28 828.719971
2016-09-29 829.049988
2016-09-30 837.309998
2016-10-03 836.73999
2016-10-04 834.030029
2016-10-05 844.359985
2016-10-06 841.659973
2016-10-07 839.429993
2016-10-10 841.710022
2016-10-11 831.0
2016-10-12 834.090027
2016-10-13 829.280029
2016-10-14 822.960022
2016-10-17 812.950012
2016-10-18 817.650024
2016-10-19 817.690002
2016-10-20 810.320007
2016-10-21 818.98999
2016-10-24 838.090027
2016-10-25 835.179993
2016-10-26 822.590027
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: Futura;
font-size: 12px;
}
.area {
fill: url(#area-gradient);
clip-path: url(#clip);
}
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}
.axis text {
font-family: Futura;
font-size: 0.8em;
}
.axis path {
stroke: none;
}
.axis line {
stroke: #ccc;
stroke-dasharray: 1px 1px;
}
</style>
<body>
<div class="g-chart-container">
<h2> Zoom and Brush: 2016 AMZN Stock Market Close </h2>
</div>
</body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 110, left: 40},
margin2 = {top: 430, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
height2 = +svg.attr("height") - margin2.top - margin2.bottom;
var parseTime = d3.timeParse("%Y-%m-%d");
var x = d3.scaleTime().range([0, width]),
x2 = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
y2 = d3.scaleLinear().range([height2, 0]);
var xAxis = d3.axisBottom(x),
xAxis2 = d3.axisBottom(x2),
yAxis = d3.axisLeft(y);
var brush = d3.brushX()
.extent([[0, 0], [width, height2]])
.on("brush end", brushed);
var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
// var x = d3.scaleTime().range([0, width]);
// var y = d3.scaleLinear().range([height, 0]);
var area = d3.area()
.curve(d3.curveCardinal)
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.close); });
var area2 = d3.area()
.curve(d3.curveMonotoneX)
.x(function(d) { return x2(d.date); })
.y0(height2)
.y1(function(d) { return y2(d.close); });
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
d3.csv("amazon.csv", type, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
x2.domain(x.domain());
y2.domain(y.domain());
var colours = ["#700961","#B80D57","#E03E36","#FF7C38"];
svg.append("linearGradient")
.attr("id", "area-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("spreadMethod", "reflect")
.style("mix-blend-mode","overlay")
.selectAll("stop")
.data(colours)
.enter().append("stop")
.attr("offset", function(d,i) { return i/(colours.length-1); })
.attr("stop-color", function(d) { return d; });
focus.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
focus.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
context.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area2);
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, x.range());
svg.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
});
function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;
var s = d3.event.selection || x2.range();
x.domain(s.map(x2.invert, x2));
focus.select(".area").attr("d", area);
focus.select(".axis--x").call(xAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (s[1] - s[0]))
.translate(-s[0], 0));
}
function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return;
var t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
focus.select(".area").attr("d", area);
focus.select(".axis--x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}
function type(d) {
d.date = parseTime(d.date);
d.close = +d.close;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment