Last active
August 17, 2017 08:10
-
-
Save erikhazzard/d52decb877ed83e38eb8 to your computer and use it in GitHub Desktop.
wiggly chart
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
| license: mit |
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> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <style> | |
| html, body { | |
| background: #ffffff; | |
| font-family: Helvetica, Arial, Tahoma, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #343434; | |
| } | |
| .result { | |
| fill: none; | |
| stroke: #343434; | |
| stroke-width: 4px; | |
| } | |
| h1,h2,h3 { | |
| padding-left: 200px; | |
| padding-top: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h3>New Users</h3> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" height=300 width=850> | |
| <defs> | |
| <filter id="filter-wavy" color-interpolation-filters="sRGB"> | |
| <feTurbulence result="result91" baseFrequency="0.04" type="turbulence" seed="0" numOctaves="3" id="feTurbulence5437" /> | |
| <feDisplacementMap in2="result91" scale="6.6" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" id="feDisplacementMap5439" /> | |
| </filter> | |
| </defs> | |
| </svg> | |
| <script src='//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js'></script> | |
| <script> | |
| var height = 300; | |
| var width = 850; | |
| var margin = {top: 20, right: 140, bottom: 60, left: 90}; | |
| var svg = d3.select("svg").attr({ | |
| width: width + margin.left + margin.right, | |
| height: height + margin.top + margin.bottom | |
| }); | |
| var chart = svg.append("g") | |
| .attr({ | |
| transform: "translate(" + margin.left + "," + margin.top + ")" | |
| }); | |
| // setup groups | |
| var axesGroup = chart.append('g').attr({ 'class': 'axes' }); | |
| var xAxisGroup = axesGroup.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")"); | |
| var yAxisGroup = axesGroup.append("g") | |
| .attr("class", "y axis"); | |
| // setup data and labels | |
| var serverData = [ | |
| "1501632000000", | |
| "3", | |
| "1501718400000", | |
| "540", | |
| "1501804800000", | |
| "1417", | |
| "1502928000000", | |
| "5703", | |
| "1501891200000", | |
| "5824", | |
| "1502841600000", | |
| "15597", | |
| "1502668800000", | |
| "15631", | |
| "1502582400000", | |
| "15807", | |
| "1502496000000", | |
| "15867", | |
| "1502755200000", | |
| "16537", | |
| "1502150400000", | |
| "18841", | |
| "1502409600000", | |
| "21105", | |
| "1502236800000", | |
| "26292", | |
| "1502323200000", | |
| "27667", | |
| "1501977600000", | |
| "28215", | |
| "1502064000000", | |
| "33833" | |
| ] | |
| var dataSorted = []; for(i = 0; i < serverData.length; i += 2) { dataSorted.push([+serverData[i+1], +serverData[i]]); } | |
| dataSorted.sort((a, b) => { if (a[1] > b[1]) { return 1; } if (a[1] < b[1]) { return -1; } return 0; }) | |
| var data = []; var labels = []; | |
| dataSorted.forEach((d) => { data.push(d[0]); labels.push(new Date(d[1]).toDateString()); }) | |
| // Setup scales | |
| var xScale = d3.scale.ordinal() | |
| .domain(d3.range(data.length)) | |
| .rangePoints([0, width], 0.5) | |
| var yScale = d3.scale.linear() | |
| .domain([ 0, (d3.max(data) + 5) ]) | |
| .range([height, 0]); | |
| // Setup axes | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .ticks(5) | |
| .tickFormat(function(d,i){ | |
| return labels[i]; | |
| }) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .tickSize(-width) | |
| .orient("left"); | |
| // Draw labels on axes | |
| yAxisGroup.call(yAxis) | |
| .append("text") | |
| .attr({ | |
| "class": "axisLabel", | |
| "transform": "translate(" + [ | |
| -70, (height - (margin.top + margin.bottom) + 50) / 2 | |
| ] + ") rotate(-90)", | |
| "y": 6, | |
| "dy": ".71em" | |
| }) | |
| .style({ | |
| "text-anchor": "middle" | |
| }) | |
| .text("Data"); | |
| xAxisGroup.call(xAxis) | |
| .append("text") | |
| .attr({ | |
| "class": "axisLabel", | |
| "transform": "translate(" + [width / 2.3, 36] + ")", | |
| "y": 6, | |
| "dy": ".71em" | |
| }) | |
| .style("text-anchor", "begin") | |
| .text("Time"); | |
| // setup the line | |
| var line = d3.svg.line() | |
| .x(function(d,i) { return xScale(i); }) | |
| .y(function(d) { return yScale(d); }) | |
| // use a basis interpolation to add a little ambiguity | |
| .interpolate("basis"); | |
| // Draw the line | |
| chart.append("path") | |
| .datum(data) | |
| .attr({ | |
| 'class': 'result', | |
| 'd': line, | |
| // To apply a filter, just give the element a filter property | |
| filter: 'url(#filter-wavy)' | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment