Skip to content

Instantly share code, notes, and snippets.

@hashimkey

hashimkey/.block

Last active December 7, 2016 23:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hashimkey/7662b86ebe7b99346cf0035bee547195 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hashimkey/7662b86ebe7b99346cf0035bee547195 to your computer and use it in GitHub Desktop.
Download ZIP
First-Test-MO-1
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
bisectDate = d3.bisector(function(d) { return d.date; }).left; // **
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Set the ranges
var x = d3.time.scale()
.domain([new Date(2014, 0, 1), new Date(2015, 11, 31)])
.range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var color = d3.scale.category10();
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
.ticks(5)
.ticks(d3.time.months)
//.tickSize(16, 0)
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
var svg = d3.select("body")
.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 + ")");
var lineSvg = svg.append("g"); // **********
var focus = svg.append("g") // **********
.style("display", "none"); // **********
// Get the data
d3.csv("test.csv", function(error, data) { // **********
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
lineSvg.append("path") // **********
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// append the circle at the intersection // **********
focus.append("circle") // **********
.attr("class", "y") // **********
.style("fill", "none") // **********
.style("stroke", "Black") // **********
.attr("r", 4); // **********
// append the rectangle to capture mouse // **********
svg.append("rect") // **********
.attr("width", width) // **********
.attr("height", height) // **********
.style("fill", "none") // **********
.style("pointer-events", "all") // **********
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove); // **********
function mousemove() { // **********
var x0 = x.invert(d3.mouse(this)[0]), // **********
i = bisectDate(data, x0, 1), // **********
d0 = data[i - 1], // **********
d1 = data[i], // **********
d = x0 - d0.date > d1.date - x0 ? d1 : d0; // **********
focus.select("circle.y") // **********
.attr("transform", // **********
"translate(" + x(d.date) + "," + // **********
y(d.close) + ")"); // **********
} // **********
});
</script>
</body>
Raw
test.csv
date close
1-Nov-14 0
8-Nov-14 0
9-Nov-14 0
10-Nov-14 0
11-Nov-14 0
12-Nov-14 0
13-Nov-14 0
14-Nov-14 0
15-Nov-14 0
16-Nov-14 0
17-Nov-14 0
18-Nov-14 0
19-Nov-14 0
20-Nov-14 0
21-Nov-14 0
22-Nov-14 0
23-Nov-14 0
24-Nov-14 0
25-Nov-14 0
26-Nov-14 0
27-Nov-14 0
28-Nov-14 0
29-Nov-14 0
30-Nov-14 0
1-Dec-14 0
2-Dec-14 0
3-Dec-14 0
4-Dec-14 0
5-Dec-14 0
6-Dec-14 0
7-Dec-14 0
8-Dec-14 0
9-Dec-14 0
10-Dec-14 0
11-Dec-14 0
12-Dec-14 0
13-Dec-14 0
14-Dec-14 0
15-Dec-14 0
16-Dec-14 0
17-Dec-14 0
18-Dec-14 0
19-Dec-14 0
20-Dec-14 0
21-Dec-14 0
22-Dec-14 0
23-Dec-14 0
24-Dec-14 0
25-Dec-14 0
26-Dec-14 0
27-Dec-14 0
28-Dec-14 0
29-Dec-14 0
30-Dec-14 0
31-Dec-14 0
1-Jan-15 0
2-Jan-15 0
3-Jan-15 0
4-Jan-15 0
5-Jan-15 0
6-Jan-15 0
7-Jan-15 0
8-Jan-15 0
9-Jan-15 0
10-Jan-15 0
11-Jan-15 0
12-Jan-15 0
13-Jan-15 0
14-Jan-15 0
15-Jan-15 0
16-Jan-15 0
17-Jan-15 0
18-Jan-15 0
19-Jan-15 0
20-Jan-15 0
21-Jan-15 0
22-Jan-15 0
23-Jan-15 0
24-Jan-15 0
25-Jan-15 0
26-Jan-15 0
27-Jan-15 0
28-Jan-15 0
29-Jan-15 0
30-Jan-15 0
31-Jan-15 0
1-Feb-15 0
2-Feb-15 0
3-Feb-15 0
4-Feb-15 0
5-Feb-15 0
6-Feb-15 0
7-Feb-15 0
8-Feb-15 0
9-Feb-15 0
10-Feb-15 0
11-Feb-15 0
12-Feb-15 0
13-Feb-15 0
14-Feb-15 0
15-Feb-15 0
16-Feb-15 0
17-Feb-15 0
18-Feb-15 0
19-Feb-15 0
20-Feb-15 0
21-Feb-15 0
22-Feb-15 0
23-Feb-15 0
24-Feb-15 0
25-Feb-15 0
26-Feb-15 0
27-Feb-15 0
28-Feb-15 0
1-Mar-15 0
2-Mar-15 0
3-Mar-15 0
4-Mar-15 432333.3333
5-Mar-15 384833.3333
6-Mar-15 409833.3333
7-Mar-15 410583.3333
8-Mar-15 396500
9-Mar-15 408000
10-Mar-15 458916.6667
11-Mar-15 405916.6667
12-Mar-15 258166.6667
13-Mar-15 0
14-Mar-15 0
15-Mar-15 0
16-Mar-15 0
17-Mar-15 0
18-Mar-15 6416.666667
19-Mar-15 303666.6667
20-Mar-15 403333.3333
21-Mar-15 402833.3333
22-Mar-15 452250
23-Mar-15 427083.3333
24-Mar-15 471833.3333
25-Mar-15 403583.3333
26-Mar-15 419083.3333
27-Mar-15 447500
28-Mar-15 511333.3333
29-Mar-15 440250
30-Mar-15 390333.3333
31-Mar-15 352666.6667
1-Apr-15 182333.3333
2-Apr-15 367166.6667
3-Apr-15 359083.3333
4-Apr-15 383750
5-Apr-15 473166.6667
6-Apr-15 416333.3333
7-Apr-15 480416.6667
8-Apr-15 420750
9-Apr-15 486333.3333
10-Apr-15 461666.6667
11-Apr-15 512416.6667
12-Apr-15 419500
13-Apr-15 423916.6667
14-Apr-15 413000
15-Apr-15 529000
16-Apr-15 512166.6667
17-Apr-15 539500
18-Apr-15 493166.6667
19-Apr-15 554416.6667
20-Apr-15 500083.3333
21-Apr-15 542583.3333
22-Apr-15 477250
23-Apr-15 473333.3333
24-Apr-15 435750
25-Apr-15 483333.3333
26-Apr-15 376000
27-Apr-15 422916.6667
28-Apr-15 144666.6667
29-Apr-15 184500
30-Apr-15 394000
1-May-15 452833.3333
2-May-15 499166.6667
3-May-15 481916.6667
4-May-15 452833.3333
5-May-15 501666.6667
6-May-15 539666.6667
7-May-15 574333.3333
8-May-15 489416.6667
9-May-15 396250
10-May-15 497166.6667
11-May-15 500250
12-May-15 470250
13-May-15 541083.3333
14-May-15 528000
15-May-15 526916.6667
16-May-15 480916.6667
17-May-15 525333.3333
18-May-15 548333.3333
19-May-15 588500
20-May-15 566916.6667
21-May-15 574333.3333
22-May-15 574666.6667
23-May-15 568250
24-May-15 491583.3333
25-May-15 568083.3333
26-May-15 441666.6667
27-May-15 533333.3333
28-May-15 547000
29-May-15 549916.6667
30-May-15 574083.3333
31-May-15 588666.6667
1-Jun-15 587000
2-Jun-15 566750
3-Jun-15 565750
4-Jun-15 221916.6667
5-Jun-15 0
6-Jun-15 0
7-Jun-15 0
8-Jun-15 0
9-Jun-15 0
10-Jun-15 2083.333333
11-Jun-15 104000
12-Jun-15 418416.6667
13-Jun-15 458666.6667
14-Jun-15 537333.3333
15-Jun-15 551833.3333
16-Jun-15 549833.3333
17-Jun-15 534000
18-Jun-15 532000
19-Jun-15 511666.6667
20-Jun-15 516916.6667
21-Jun-15 502833.3333
22-Jun-15 497916.6667
23-Jun-15 476750
24-Jun-15 485833.3333
25-Jun-15 511166.6667
26-Jun-15 530250
27-Jun-15 523083.3333
28-Jun-15 523083.3333
29-Jun-15 505083.3333
30-Jun-15 515250
1-Jul-15 516833.3333
2-Jul-15 513416.6667
3-Jul-15 507166.6667
4-Jul-15 495916.6667
5-Jul-15 503166.6667
6-Jul-15 488083.3333
7-Jul-15 463416.6667
8-Jul-15 458416.6667
9-Jul-15 489000
10-Jul-15 523416.6667
11-Jul-15 494000
12-Jul-15 512250
13-Jul-15 489666.6667
14-Jul-15 480666.6667
15-Jul-15 491500
16-Jul-15 502416.6667
17-Jul-15 498000
18-Jul-15 526083.3333
19-Jul-15 521583.3333
20-Jul-15 515166.6667
21-Jul-15 500333.3333
22-Jul-15 527333.3333
23-Jul-15 524416.6667
24-Jul-15 548000
25-Jul-15 524500
26-Jul-15 538166.6667
27-Jul-15 492666.6667
28-Jul-15 537583.3333
29-Jul-15 470750
30-Jul-15 514333.3333
31-Jul-15 501500
1-Aug-15 532583.3333
2-Aug-15 479500
3-Aug-15 516833.3333
4-Aug-15 470416.6667
5-Aug-15 488416.6667
6-Aug-15 499583.3333
7-Aug-15 491000
8-Aug-15 500333.3333
9-Aug-15 513833.3333
10-Aug-15 493500
11-Aug-15 521666.6667
12-Aug-15 484666.6667
13-Aug-15 505333.3333
14-Aug-15 472333.3333
15-Aug-15 505000
16-Aug-15 503333.3333
17-Aug-15 494333.3333
18-Aug-15 456666.6667
19-Aug-15 494166.6667
20-Aug-15 500166.6667
21-Aug-15 509583.3333
22-Aug-15 480083.3333
23-Aug-15 521250
24-Aug-15 496833.3333
25-Aug-15 484750
26-Aug-15 409250
27-Aug-15 428166.6667
28-Aug-15 537666.6667
29-Aug-15 557333.3333
30-Aug-15 461083.3333
31-Aug-15 534000
1-Sep-15 308416.6667
2-Sep-15 393416.6667
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment