Last active
March 7, 2017 10:42
-
-
Save diggetybo/4750f9cac36c112184a5df77393464e5 to your computer and use it in GitHub Desktop.
Save Visual as File
This file contains 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> | |
| <title>Coefficient Analysis</title> | |
| <style type="text/css"> | |
| </style> | |
| <meta charset="utf-8"> | |
| </head> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script> | |
| <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script> | |
| <body> | |
| <div> | |
| <button id='saveButton'>Export my D3 visualization to PNG</button> | |
| </div> | |
| <script> | |
| var graphWidth = 700, graphHeight = 300; | |
| var margins = { left: 100, top: 100, right: 200, bottom: 100 }; | |
| var axisPadding = 2; | |
| var totalHeight = graphHeight + margins.top + margins.bottom-axisPadding; | |
| var totalWidth = graphWidth + margins.left + margins.right; | |
| //var parseDate = d3.time.format() | |
| var xScale = d3.scale.linear().range([0, graphWidth]); | |
| var x2Scale = d3.time.scale().range([0,(graphWidth+axisPadding)]); | |
| x2Scale.domain([new Date('2012-01-01'), new Date('2017-01-01')]); | |
| var yScale = d3.scale.linear().range([graphHeight, 0]); | |
| //var xAxis = d3.svg.axis().scale(xScale).orient('bottom').ticks(5); | |
| var x2Axis = d3.svg.axis().scale(x2Scale).orient('bottom').tickFormat(d3.time.format('%Y')).tickValues(x2Scale.ticks(4).concat(x2Scale.domain()[0])); | |
| var yAxis = d3.svg.axis().scale(yScale).orient('left').ticks(5); | |
| var valueLine = d3.svg.line() | |
| .x(function(d,i) {return xScale(i);}) | |
| .y(function(d) {return yScale(d.Y)}); | |
| var svg = d3.select('body') | |
| .append('svg') | |
| .attr('width', totalWidth) | |
| .attr('height', totalHeight); | |
| var url = "oil_rr.csv"; | |
| d3.csv(url, function (error, rawData) { | |
| var data = rawData.map(function (d,i) { | |
| return { X: i, Y: +d.coefs, CIL: +d.ci_lower, CIU: +d.ci_upper} | |
| }); | |
| xScale.domain([0,122]); | |
| yScale.domain([-.8,2.4]); | |
| var yGridlinesAxis = d3.svg.axis().scale(yScale).orient("left"); | |
| var yGridlineNodes = svg.append('g') | |
| .attr('transform', 'translate(' + (margins.left + graphWidth) + ',' + margins.top + ')') | |
| .call(yGridlinesAxis.tickSize(graphWidth + axisPadding, 0, 0).tickFormat("")); | |
| styleGridlineNodes(yGridlineNodes); | |
| var xGridlinesAxis = d3.svg.axis().scale(x2Scale).orient("bottom"); | |
| var xGridlineNodes = svg.append('g') | |
| .attr('transform', 'translate(' + (margins.left) + ',' + (totalHeight - margins.bottom + axisPadding) + ')') | |
| .call(xGridlinesAxis.tickSize(-graphHeight - axisPadding, 0, 0).tickFormat("")); | |
| styleGridlineNodes(xGridlineNodes); | |
| var yAxisNodes = svg.append('g') | |
| .attr('transform', 'translate(' + (margins.left - axisPadding) + ',' + margins.top + ')') | |
| .call(yAxis);//.attr("class", "x axis"); | |
| styleAxisNodes(yAxisNodes); | |
| var xAxisNodes = svg.append('g') | |
| .attr('transform', 'translate(' + (margins.left) + ',' + (totalHeight - margins.bottom + axisPadding) + ')') | |
| .call(x2Axis); | |
| styleAxisNodes(xAxisNodes); | |
| var graphGroup = svg.append('g') | |
| .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); | |
| var ciArea = d3.svg.area() | |
| .x0(function(d,i) {return xScale(i);}) | |
| .x1(function(d,i) {return xScale(i);}) | |
| .y0(function(d) {return yScale(d.CIL)}) | |
| .y1(function(d) {return yScale(d.CIU)}); | |
| graphGroup.append('path') | |
| .attr('fill','none') | |
| .attr('stroke','gray') | |
| .attr('stroke-width','2px') | |
| .attr('stroke-dasharray',3,3) | |
| .attr('d', ciArea(data)); | |
| graphGroup.append('path') | |
| .attr('stroke', '#28B99D') | |
| .attr('stroke-width','3px') | |
| .attr('fill','none') | |
| .attr('d', valueLine(data)); | |
| svg.append('text') | |
| .text('Rolling Regression: Crude Brent | SLB') | |
| .attr('transform', 'translate(' + 90 + ',' + 60 + ')') | |
| .attr('font-size','48px') | |
| .attr('font-family','Play'); | |
| svg.append('text') | |
| .attr('x', 0-(totalHeight)/2) | |
| .attr('y', 50) | |
| .style('text-anchor', 'middle') | |
| .attr('transform', 'rotate(-90)') | |
| .attr('font-size','18px') | |
| .attr('font-family','Play') | |
| .html('Beta Space'); | |
| // Set-up the export button | |
| d3.select('#saveButton').on('click', function(){ | |
| var svgString = getSVGString(svg.node()); | |
| svgString2Image(svgString, 2*totalWidth, 2*totalHeight, 'png', save ); // passes Blob and filesize String to the callback | |
| function save(dataBlob,filesize){ | |
| saveAs(dataBlob,'D3 vis exported to PNG.png'); // FileSaver.js function | |
| } | |
| }); | |
| // Below are the function that handle actual exporting: | |
| // getSVGString (svgNode ) and svgString2Image( svgString, width, height, format, callback ) | |
| function getSVGString( svgNode ) { | |
| svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink'); | |
| var cssStyleText = getCSSStyles( svgNode ); | |
| appendCSS( cssStyleText, svgNode ) | |
| var serializer = new XMLSerializer(); | |
| var svgString = serializer.serializeToString(svgNode); | |
| svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink=') // Fix root xlink without namespace | |
| svgString = svgString.replace(/NS\d+:href/g, 'xlink:href') // Safari NS namespace fix | |
| return svgString; | |
| function getCSSStyles( parentElement ) { | |
| var selectorTextArr = []; | |
| // Add Parent element Id and Classes to the list | |
| selectorTextArr.push( '#'+parentElement.id ); | |
| for (var c = 0; c < parentElement.classList.length; c++) | |
| if ( !contains('.'+parentElement.classList[c], selectorTextArr) ) | |
| selectorTextArr.push( '.'+parentElement.classList[c] ); | |
| // Add Children element Ids and Classes to the list | |
| var nodes = parentElement.getElementsByTagName("*"); | |
| for (var i = 0; i < nodes.length; i++) { | |
| var id = nodes[i].id; | |
| if ( !contains('#'+id, selectorTextArr) ) | |
| selectorTextArr.push( '#'+id ); | |
| var classes = nodes[i].classList; | |
| for (var c = 0; c < classes.length; c++) | |
| if ( !contains('.'+classes[c], selectorTextArr) ) | |
| selectorTextArr.push( '.'+classes[c] ); | |
| } | |
| // Extract CSS Rules | |
| var extractedCSSText = ""; | |
| for (var i = 0; i < document.styleSheets.length; i++) { | |
| var s = document.styleSheets[i]; | |
| try { | |
| if(!s.cssRules) continue; | |
| } catch( e ) { | |
| if(e.name !== 'SecurityError') throw e; // for Firefox | |
| continue; | |
| } | |
| var cssRules = s.cssRules; | |
| for (var r = 0; r < cssRules.length; r++) { | |
| if ( contains( cssRules[r].selectorText, selectorTextArr ) ) | |
| extractedCSSText += cssRules[r].cssText; | |
| } | |
| } | |
| return extractedCSSText | |
| function contains(str,arr) { | |
| return arr.indexOf( str ) === -1 ? false : true; | |
| } | |
| } | |
| function appendCSS( cssText, element ) { | |
| var styleElement = document.createElement("style"); | |
| styleElement.setAttribute("type","text/css"); | |
| styleElement.innerHTML = cssText; | |
| var refNode = element.hasChildNodes() ? element.children[0] : null; | |
| element.insertBefore( styleElement, refNode ); | |
| } | |
| } | |
| function svgString2Image( svgString, totalWidth, totalHeight, format, callback ) { | |
| var format = format ? format : 'png'; | |
| var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to dataurl | |
| var canvas = document.createElement("canvas"); | |
| var context = canvas.getContext("2d"); | |
| canvas.width = totalWidth; | |
| canvas.height = totalHeight; | |
| var image = new Image; | |
| image.onload = function() { | |
| context.clearRect ( 0, 0, width, height ); | |
| context.drawImage(image, 0, 0, width, height); | |
| canvas.toBlob( function(blob) { | |
| var filesize = Math.round( blob.length/1024 ) + ' KB'; | |
| if ( callback ) callback( blob, filesize ); | |
| }); | |
| }; | |
| image.src = imgsrc; | |
| } | |
| }); | |
| function styleGridlineNodes(axisNodes) { | |
| axisNodes.selectAll('.domain') | |
| .attr({ | |
| fill: 'none', | |
| stroke: 'none' | |
| }); | |
| axisNodes.selectAll('.tick line') | |
| .attr({ | |
| fill: 'none', | |
| 'stroke-width': 1, | |
| stroke: 'lightgray', | |
| opacity:.15 | |
| }); | |
| } | |
| function styleAxisNodes(axisNodes) { | |
| axisNodes.selectAll('.domain') | |
| .attr({ | |
| fill: 'none', | |
| 'stroke-width': 2, | |
| stroke: 'black' | |
| }); | |
| axisNodes.selectAll('.tick line') | |
| .attr({ | |
| fill: 'none', | |
| 'stroke-width': 2, | |
| stroke: 'black' | |
| }); | |
| axisNodes.selectAll("text") | |
| .attr({ | |
| fill: 'black', | |
| 'font-family': 'play' | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| coefs | ci_lower | ci_upper | |
|---|---|---|---|
| 2.017187999165746 | 1.8799688818924792 | 2.1544071164390132 | |
| 2.3656951189260668 | 2.2032836756774356 | 2.528106562174698 | |
| 2.3619752439054444 | 2.1536705139226072 | 2.5702799738882816 | |
| 1.758578317307679 | 1.5904906687317016 | 1.9266659658836564 | |
| 1.637595585244595 | 1.5261756173710618 | 1.749015553118128 | |
| 1.5176639204237452 | 1.408438867958325 | 1.6268889728891654 | |
| 1.5176369985249798 | 1.4331672830438306 | 1.602106714006129 | |
| 1.6462582274595516 | 1.5805832103068572 | 1.7119332446122462 | |
| 1.7801341743224506 | 1.7030620702939506 | 1.8572062783509508 | |
| 1.5602518835559524 | 1.4641127341050686 | 1.6563910330068364 | |
| 1.1677074101418178 | 1.0527486025962882 | 1.2826662176873476 | |
| 0.91929962874514144 | 0.80053249633152208 | 1.0380667611587606 | |
| 0.91289116980853456 | 0.80043559025619184 | 1.0253467493608772 | |
| 0.78529842321752624 | 0.67508704133620656 | 0.89550980509884576 | |
| 0.73263985427701824 | 0.62489657388879104 | 0.84038313466524544 | |
| 0.54300307300821512 | 0.44654264450082784 | 0.63946350151560248 | |
| 0.61451552245614552 | 0.55115626443645536 | 0.6778747804758356 | |
| 0.7228051750926752 | 0.67659382910581248 | 0.76901652107953808 | |
| 0.6303089682747248 | 0.57921552640320376 | 0.68140241014624592 | |
| 0.51262742343854496 | 0.4395659973085236 | 0.5856888495685664 | |
| 0.53770394795758616 | 0.44858207469717936 | 0.62682582121799288 | |
| 0.66854493686993776 | 0.5288476222714484 | 0.80824225146842704 | |
| 1.160075200683939 | 0.98674532188743232 | 1.3334050794804458 | |
| 1.738748183850757 | 1.5619953618093048 | 1.9155010058922092 | |
| 1.9947238543558692 | 1.8235822095365088 | 2.1658654991752296 | |
| 1.698374963097389 | 1.5288277443062692 | 1.8679221818885088 | |
| 1.1196229825976412 | 0.9649737282751296 | 1.2742722369201526 | |
| 0.7985085016981784 | 0.65776248005867864 | 0.93925452333767808 | |
| 0.69352261804261376 | 0.59169580798755248 | 0.79534942809767488 | |
| 0.70953841852228584 | 0.64267128026101496 | 0.77640555678355664 | |
| 0.7492049118157 | 0.68871746000696888 | 0.8096923636244312 | |
| 0.85347364081714464 | 0.78258997378852608 | 0.92435730784576336 | |
| 0.71330880395975928 | 0.65457152776817984 | 0.77204608015133872 | |
| 0.4962902983293144 | 0.44070585075427152 | 0.55187474590435736 | |
| 0.35097002283550988 | 0.29677650074214436 | 0.40516354492887544 | |
| 0.065905051815071256 | 0.012836955324231798 | 0.11897314830591072 | |
| -0.23912393276140704 | -0.29431487003024408 | -0.18393299549257004 | |
| -0.31542234273014004 | -0.37407421110345976 | -0.25677047435682032 | |
| -0.45280726197386344 | -0.5101295128884844 | -0.39548501105924256 | |
| -0.65607737517886392 | -0.71715122246167784 | -0.59500352789604992 | |
| -0.52156443240858928 | -0.6089478105860984 | -0.43418105423108024 | |
| -0.35385611830319736 | -0.44016312099165376 | -0.267549115614741 | |
| -0.29076724829313976 | -0.37755130833427032 | -0.20398318825200924 | |
| -0.30798412542203384 | -0.39398886736092192 | -0.22197938348314576 | |
| -0.27615206027135048 | -0.3678075096693508 | -0.18449661087335008 | |
| -0.05208398473031476 | -0.14248021143353346 | 0.038312241972903928 | |
| -0.28638350927490308 | -0.34754666481483076 | -0.2252203537349754 | |
| -0.15626673023612994 | -0.20101320543670348 | -0.1115202550355564 | |
| -0.018666405944200228 | -0.054017382379314008 | 0.016684570490913548 | |
| 0.0036952833221026352 | -0.027530115129866152 | 0.034920681774071428 | |
| 0.049243084783781536 | 0.016802794156919736 | 0.081683375410643328 | |
| 0.078778341955452944 | 0.045999458858743304 | 0.11155722505216258 | |
| 0.25465148999801184 | 0.22145343219110324 | 0.28784954780492052 | |
| 0.17039804457942178 | 0.14002893082539188 | 0.20076715833345168 | |
| 0.058154278205654672 | 0.018372550964339596 | 0.097936005446969744 | |
| -0.0396152399708774 | -0.086835715154213568 | 0.007605235212458768 | |
| -0.11849686338791512 | -0.18781786194553924 | -0.049175864830291016 | |
| -0.13556716824592974 | -0.22173700411379976 | -0.049397332378059696 | |
| 0.1254214469430312 | 0.0084869947867974032 | 0.242355899099265 | |
| 0.65578552799566728 | 0.54249799500512944 | 0.76907306098620512 | |
| 0.90208159851795632 | 0.8339419347986608 | 0.97022126223725184 | |
| 0.96936686785378512 | 0.93617206078086336 | 1.002561674926707 | |
| 1.1036823061214542 | 1.0517947092254078 | 1.1555699030175006 | |
| 1.2977228088228368 | 1.225536954011302 | 1.3699086636343716 | |
| 1.345169552824683 | 1.2842045941876074 | 1.4061345114617584 | |
| 1.491380788097567 | 1.4224108236309902 | 1.5603507525641436 | |
| 1.80472268295655 | 1.7174507652520152 | 1.8919946006610848 | |
| 1.9595380088358068 | 1.8672352490067772 | 2.0518407686648364 | |
| 2.0659246419237856 | 1.9536533293930092 | 2.1781959544545616 | |
| 1.9846067873491828 | 1.8855825340133236 | 2.0836310406850424 | |
| 1.8171584012219352 | 1.7128586510688258 | 1.9214581513750448 | |
| 1.6417329969381968 | 1.5103210134441088 | 1.773144980432285 | |
| 1.3855116709844512 | 1.162039882845975 | 1.6089834591229276 | |
| 0.90371401901986176 | 0.7581878502709016 | 1.049240187768822 | |
| 0.97966056851775568 | 0.8859809405525296 | 1.0733401964829816 | |
| 1.0443148920921934 | 0.96169064178426976 | 1.1269391424001172 | |
| 0.93608114778720688 | 0.8555410034938384 | 1.0166212920805752 | |
| 0.782096923141872 | 0.72427302715816592 | 0.83992081912557808 | |
| 0.7577627510738288 | 0.70148121749642656 | 0.81404428465123088 | |
| 0.79641173050942512 | 0.74331437986469968 | 0.84950908115415056 | |
| 0.82096138691986624 | 0.76430667286843904 | 0.87761610097129344 | |
| 0.94030112698430832 | 0.87320577829445552 | 1.0073964756741614 | |
| 1.206019747569426 | 1.1239077465395792 | 1.288131748599273 | |
| 1.162581147625437 | 1.1005035581094976 | 1.2246587371413766 | |
| 1.034613690039585 | 0.97455037306958 | 1.0946770070095902 | |
| 0.85251188359158752 | 0.79390217335922992 | 0.91112159382394512 | |
| 0.74371697226226896 | 0.67923693277318288 | 0.80819701175135504 | |
| 0.62819479769159472 | 0.55566863961131288 | 0.70072095577187656 | |
| 0.463650290012206 | 0.39355411705637808 | 0.53374646296803384 | |
| 0.20920112023034512 | 0.1323093561175252 | 0.28609288434316504 | |
| 0.11548989089326024 | 0.02778626582363672 | 0.20319351596288376 | |
| 0.54508941588318464 | 0.41572826034833712 | 0.67445057141803208 | |
| 0.75304428394038464 | 0.62715631857183216 | 0.87893224930893728 | |
| 1.0372441155577088 | 0.94112551305143952 | 1.133362718063978 | |
| 1.1817613271819942 | 1.1056369238451078 | 1.2578857305188806 | |
| 1.1528543759329178 | 1.0955190865914238 | 1.2101896652744118 | |
| 1.0429788415512716 | 0.98299886556894928 | 1.1029588175335936 | |
| 0.90509424489408736 | 0.8421371706604096 | 0.96805131912776528 | |
| 0.86980537745981312 | 0.7992397155912256 | 0.94037103932840064 | |
| 0.84298867565218368 | 0.77313505731706848 | 0.91284229398729888 | |
| 0.91498383728668704 | 0.86201581067383696 | 0.96795186389953696 | |
| 1.0169458873371206 | 0.9534114789780816 | 1.0804802956961596 | |
| 1.1902041096222282 | 1.0701393738927334 | 1.310268845351723 | |
| 1.3808499066448476 | 1.2309484647466428 | 1.5307513485430524 | |
| 1.2715345055797028 | 1.1040744122992116 | 1.4389945988601938 | |
| 1.0093760758535688 | 0.85959336670405952 | 1.159158785003078 | |
| 0.78264696517826256 | 0.643033394878038 | 0.9222605354784872 | |
| 0.28756381125266868 | 0.14425405492805112 | 0.43087356757728624 | |
| -0.20265472281846576 | -0.31730243085464048 | -0.08800701478229104 | |
| -0.046647179695550704 | -0.15512775369938164 | 0.061833394308280224 | |
| -0.18562657273265924 | -0.30178337943173256 | -0.069469766033585968 | |
| -0.043956355239300168 | -0.17442718513365038 | 0.086514474655050048 | |
| 0.18127098211477792 | 0.04771887547245532 | 0.31482308875710052 | |
| 0.383826803983182 | 0.24863441211934064 | 0.51901919584702336 | |
| 0.44645712290914392 | 0.29854596837425696 | 0.59436827744403088 | |
| 0.42277189973748912 | 0.27058920022752008 | 0.57495459924745816 | |
| 0.59777114979693128 | 0.48748696236341016 | 0.70805533723045232 | |
| 0.8390154998137152 | 0.760625605966136 | 0.9174053936612944 | |
| 0.94448175737016656 | 0.86753676503530592 | 1.0214267497050272 | |
| 1.0058525530776146 | 0.93306491047949152 | 1.0786401956757376 | |
| 1.2977296972416768 | 1.2077665623029554 | 1.387692832180398 | |
| 0 | 0 | 0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment