Created
June 22, 2015 16:16
-
-
Save jalapic/5e99a382077c53ac5e53 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> /* set the CSS */ | |
| body { font: 12px Arial;} | |
| path { | |
| stroke: steelblue; | |
| stroke-width: 2; | |
| fill: none; | |
| opacity: 0.2; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: grey; | |
| stroke-width: 1; | |
| opacity: 0.5; | |
| shape-rendering: crispEdges; | |
| } | |
| .legend { | |
| font-size: 16px; | |
| font-weight: bold; | |
| text-anchor: middle; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| width: 60px; | |
| height: 28px; | |
| padding: 2px; | |
| font: 12px sans-serif; | |
| background: lightsteelblue; | |
| border: 0px; | |
| border-radius: 8px; | |
| pointer-events: none; | |
| } | |
| </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: 70, left: 50}, | |
| width = 700 - margin.left - margin.right, | |
| height = 400 - margin.top - margin.bottom; | |
| // Parse the date / time | |
| var parseDate = d3.time.format("%b %Y").parse; | |
| // Set the ranges | |
| var x = d3.time.scale().range([0, width]); | |
| var y = d3.scale.linear().range([height, 0]); | |
| // Define the axes | |
| var xAxis = d3.svg.axis().scale(x) | |
| .orient("bottom").ticks(5); | |
| var yAxis = d3.svg.axis().scale(y) | |
| .orient("left").ticks(5); | |
| // Define the line | |
| var priceline = d3.svg.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.price); }); | |
| // 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 color = d3.scale.category10(); | |
| // Define the div for the tooltip | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| // Get the data | |
| d3.csv("stocks.csv", function(error, data) { | |
| data.forEach(function(d) { | |
| d.date = parseDate(d.date); | |
| d.price = +d.price; | |
| }); | |
| // 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.price; })]); | |
| // Nest the entries by symbol | |
| var dataNest = d3.nest() | |
| .key(function(d) {return d.symbol;}) | |
| .entries(data); | |
| // spacing for legend // ****** | |
| legendSpace = width/dataNest.length; | |
| // Loop through each symbol / key | |
| dataNest.forEach(function(d,i) { | |
| svg.append("path") | |
| .attr("class", "line") | |
| .style("stroke", function() { | |
| return d.color = color(d.key); }) | |
| .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID ** | |
| .attr("d", priceline(d.values)); | |
| // Add the Legend | |
| svg.append("text") | |
| .attr("x", (legendSpace/2)+i*legendSpace) | |
| .attr("y", height + (margin.bottom/2)+ 5) | |
| .attr("class", "legend") | |
| .style("fill", function() { | |
| return d.color = color(d.key); }) | |
| .on("click", function(){ // ************ | |
| // Determine if current line is visible | |
| var active = d.active ? false : true, // ************ | |
| newOpacity = active ? 1 : 0.2; // ************ | |
| // Hide or show the elements based on the ID | |
| d3.select("#tag"+d.key.replace(/\s+/g, '')) // ********* | |
| .transition().duration(100) // ************ | |
| .style("opacity", newOpacity); // ************ | |
| // Update whether or not the elements are active | |
| d.active = active; // ************ | |
| }) // ************ | |
| .text(d.key); | |
| }); | |
| // Add some datapoints | |
| svg.selectAll("dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("r", 1.5) | |
| .style("fill", "white") | |
| .style("opacity", .8) | |
| .style("stroke-width", 1) | |
| .attr("cx", function(d) { return x(d.date); }) | |
| .attr("cy", function(d) { return y(d.price); }) | |
| .style("stroke", function(d) { return color(d.symbol); }) | |
| .on("mouseover", function(d) { | |
| d3.select(this).attr("r", 10).style("fill", function(d) { return color(d.symbol); }); | |
| div.transition() | |
| .duration(200) | |
| .style("opacity", .9); | |
| div.html(formatTime(d.date) + "<br/>" + d.price) | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY-28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| d3.select(this).attr("r", 1.5).style("fill", "white"); | |
| div.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| // 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); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This won't work - it was for this StackOverflow question - http://stackoverflow.com/questions/30981646/multiple-arguments-in-mouseover-d3-js - however, I think I fixed it. It was missing this
var formatTime = d3.time.format("%e %B");