Built with blockbuilder.org
Created
January 5, 2018 04:25
-
-
Save timelyportfolio/b21fed9fd5696417c0d08e50828b260f to your computer and use it in GitHub Desktop.
alternate version of market quilt
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
| license: mit | |
| height: 600 |
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <script src="https://unpkg.com/d3"></script> | |
| </head> | |
| <body style="background-color:white;"> | |
| <script> | |
| var data = [ | |
| { | |
| "idx": "A", | |
| "date": "2000-12-31", | |
| "perf": -4.5761 | |
| }, | |
| { | |
| "idx": "A", | |
| "date": "2001-12-31", | |
| "perf": -15.0073 | |
| }, | |
| { | |
| "idx": "A", | |
| "date": "2002-12-31", | |
| "perf": -17.911 | |
| }, | |
| { | |
| "idx": "A", | |
| "date": "2003-12-31", | |
| "perf": 18.5215 | |
| }, | |
| { | |
| "idx": "A", | |
| "date": "2004-12-31", | |
| "perf": -15.0506 | |
| }, | |
| { | |
| "idx": "A", | |
| "date": "2005-12-31", | |
| "perf": -18.6963 | |
| }, | |
| { | |
| "idx": "A", | |
| "date": "2006-12-31", | |
| "perf": -8.8435 | |
| }, | |
| { | |
| "idx": "A", | |
| "date": "2007-12-31", | |
| "perf": -8.6675 | |
| }, | |
| { | |
| "idx": "A", | |
| "date": "2008-12-31", | |
| "perf": -6.3162 | |
| }, | |
| { | |
| "idx": "A", | |
| "date": "2009-12-31", | |
| "perf": -4.4992 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2000-12-31", | |
| "perf": -15.469 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2001-12-31", | |
| "perf": 15.4334 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2002-12-31", | |
| "perf": 9.1245 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2003-12-31", | |
| "perf": 17.9742 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2004-12-31", | |
| "perf": -8.7123 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2005-12-31", | |
| "perf": 4.4175 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2006-12-31", | |
| "perf": -9.2237 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2007-12-31", | |
| "perf": -8.1461 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2008-12-31", | |
| "perf": 14.835 | |
| }, | |
| { | |
| "idx": "B", | |
| "date": "2009-12-31", | |
| "perf": -14.0465 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2000-12-31", | |
| "perf": -4.4291 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2001-12-31", | |
| "perf": -3.4441 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2002-12-31", | |
| "perf": 1.7558 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2003-12-31", | |
| "perf": -5.0047 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2004-12-31", | |
| "perf": -14.5759 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2005-12-31", | |
| "perf": 6.6994 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2006-12-31", | |
| "perf": -1.5583 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2007-12-31", | |
| "perf": -13.2864 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2008-12-31", | |
| "perf": -7.2503 | |
| }, | |
| { | |
| "idx": "C", | |
| "date": "2009-12-31", | |
| "perf": 15.2747 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2000-12-31", | |
| "perf": 13.9626 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2001-12-31", | |
| "perf": 3.243 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2002-12-31", | |
| "perf": -13.3865 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2003-12-31", | |
| "perf": 15.8711 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2004-12-31", | |
| "perf": -6.6842 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2005-12-31", | |
| "perf": 6.5636 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2006-12-31", | |
| "perf": 11.7851 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2007-12-31", | |
| "perf": -19.8014 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2008-12-31", | |
| "perf": 15.0866 | |
| }, | |
| { | |
| "idx": "D", | |
| "date": "2009-12-31", | |
| "perf": 19.3894 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2000-12-31", | |
| "perf": -18.8695 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2001-12-31", | |
| "perf": -14.0828 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2002-12-31", | |
| "perf": 18.333 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2003-12-31", | |
| "perf": -14.6408 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2004-12-31", | |
| "perf": 19.4939 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2005-12-31", | |
| "perf": -16.546 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2006-12-31", | |
| "perf": -14.883 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2007-12-31", | |
| "perf": -5.0652 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2008-12-31", | |
| "perf": -8.3776 | |
| }, | |
| { | |
| "idx": "E", | |
| "date": "2009-12-31", | |
| "perf": -15.234 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2000-12-31", | |
| "perf": -3.273 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2001-12-31", | |
| "perf": -19.6255 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2002-12-31", | |
| "perf": 7.7506 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2003-12-31", | |
| "perf": -16.6891 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2004-12-31", | |
| "perf": 2.3649 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2005-12-31", | |
| "perf": -9.3366 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2006-12-31", | |
| "perf": -2.0149 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2007-12-31", | |
| "perf": -7.6408 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2008-12-31", | |
| "perf": 1.4748 | |
| }, | |
| { | |
| "idx": "F", | |
| "date": "2009-12-31", | |
| "perf": -7.5252 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2000-12-31", | |
| "perf": -9.9526 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2001-12-31", | |
| "perf": 18.2518 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2002-12-31", | |
| "perf": -17.8075 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2003-12-31", | |
| "perf": 2.4835 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2004-12-31", | |
| "perf": -10.259 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2005-12-31", | |
| "perf": 14.1983 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2006-12-31", | |
| "perf": 19.1988 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2007-12-31", | |
| "perf": 3.6613 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2008-12-31", | |
| "perf": 11.9808 | |
| }, | |
| { | |
| "idx": "G", | |
| "date": "2009-12-31", | |
| "perf": -19.6471 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2000-12-31", | |
| "perf": 15.8034 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2001-12-31", | |
| "perf": -13.0795 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2002-12-31", | |
| "perf": 16.4691 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2003-12-31", | |
| "perf": -17.0362 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2004-12-31", | |
| "perf": -12.3088 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2005-12-31", | |
| "perf": 4.455 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2006-12-31", | |
| "perf": 18.8401 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2007-12-31", | |
| "perf": -15.571 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2008-12-31", | |
| "perf": 11.0688 | |
| }, | |
| { | |
| "idx": "H", | |
| "date": "2009-12-31", | |
| "perf": -0.7543 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2000-12-31", | |
| "perf": 19.4466 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2001-12-31", | |
| "perf": -10.4479 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2002-12-31", | |
| "perf": -18.4353 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2003-12-31", | |
| "perf": 9.3312 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2004-12-31", | |
| "perf": 13.7115 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2005-12-31", | |
| "perf": -18.4976 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2006-12-31", | |
| "perf": -3.3736 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2007-12-31", | |
| "perf": 4.9811 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2008-12-31", | |
| "perf": -19.9589 | |
| }, | |
| { | |
| "idx": "I", | |
| "date": "2009-12-31", | |
| "perf": 19.8707 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2000-12-31", | |
| "perf": 14.8278 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2001-12-31", | |
| "perf": -10.8594 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2002-12-31", | |
| "perf": -4.0786 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2003-12-31", | |
| "perf": 18.2823 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2004-12-31", | |
| "perf": 8.9381 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2005-12-31", | |
| "perf": -11.6092 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2006-12-31", | |
| "perf": 17.0184 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2007-12-31", | |
| "perf": 0.5828 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2008-12-31", | |
| "perf": -7.9249 | |
| }, | |
| { | |
| "idx": "J", | |
| "date": "2009-12-31", | |
| "perf": -1.397 | |
| } | |
| ] | |
| var height = 600, width = 900 | |
| var margin = { | |
| top: 20, | |
| bottom: 50, | |
| left: 50, | |
| right: 20 | |
| } | |
| var color = d3.scaleOrdinal(d3.schemeCategory10) | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| var g_plot = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
| var sc_x = d3.scaleBand() | |
| .domain(data.map(d => (d.date))) | |
| .range([0,width - margin.left - margin.right]) | |
| var sc_y = d3.scaleLinear() | |
| .domain(d3.extent(data.map(d => d.perf))) | |
| .range([height - margin.top - margin.bottom, 0]) | |
| var line = d3.line() | |
| .curve(d3.curveMonotoneX) | |
| var horiz_smooth = 50 | |
| var nested = d3.nest().key(d => d.idx).entries(data) | |
| var highlight = function() { | |
| svg.selectAll(".line").style("opacity", 0.25) | |
| d3.select(this).style("opacity", 1) | |
| } | |
| var unhighlight = function() { | |
| svg.selectAll(".line").style("opacity", 0.5) | |
| } | |
| nested.map(function(d) { | |
| points = [] | |
| d.values.forEach(function(dd, i) { | |
| if(i > d.values.length - 2) { | |
| points.push([sc_x(dd.date) + horiz_smooth, sc_y(dd.perf)]) | |
| return | |
| } | |
| if(i === 0) { | |
| points.push([sc_x(dd.date), sc_y(dd.perf)]), | |
| points.push([sc_x(dd.date) + horiz_smooth, sc_y(dd.perf)]) | |
| points.push([sc_x(dd.date) + sc_x.bandwidth(), sc_y(d.values[i+1].perf)]) | |
| return | |
| } | |
| points.push([sc_x(dd.date) + horiz_smooth, sc_y(dd.perf)]) | |
| points.push([sc_x(dd.date) + sc_x.bandwidth(), sc_y(d.values[i+1].perf)]) | |
| }) | |
| g_plot.append("path") | |
| .classed("line", true) | |
| .attr("d", line(points)) | |
| .style("fill", "none") | |
| .style("stroke", color(d.key)) | |
| .style("stroke-width", 10) | |
| .style("opacity", 0.5) | |
| .on("mouseover", highlight) | |
| .on("mouseout", unhighlight) | |
| }) | |
| g_plot.append("g") | |
| .call(d3.axisBottom().scale(sc_x)) | |
| .attr("transform", "translate(" + (-sc_x.bandwidth()/2 + horiz_smooth/2) + "," + (+height - margin.top - margin.bottom) + ")") | |
| g_plot.append("g") | |
| .call(d3.axisLeft().scale(sc_y)) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment