Built with blockbuilder.org
Last active
December 11, 2016 00:19
-
-
Save matt-erhart/cc3b1916bd4bd9da051a5474e4d2489b to your computer and use it in GitHub Desktop.
click
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 |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var point_history = new Array(); | |
| var width = 500; | |
| var height = 600; | |
| var svg = d3.select("body").append('div').append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append('g') | |
| var count = 0; | |
| var margin = {top:50, bottom: 50, left: 50, right: 50} | |
| var innerWidth = width-margin.left-margin.right; | |
| var innerHeight = height-margin.top-margin.bottom; | |
| var results_svg = d3.select("body").append('div').append("svg") | |
| .attr("width", height) | |
| .attr("height", width) | |
| .append('g').attr('transform',`translate(${margin.left},${margin.top})`) | |
| date1 = new Date(); | |
| timeScale = d3.scaleLinear().domain([0, 3000]).range([innerHeight, 0]) | |
| timeAxisFunc = d3.axisLeft(timeScale); | |
| timeAxis = results_svg.append('g').call(timeAxisFunc) | |
| distScale = d3.scaleLinear().domain([0, 500]).range([0, width]); | |
| distAxisFunc = d3.axisBottom(distScale); | |
| distAxis = results_svg.append('g').attr('transform', `translate(0,${innerHeight})`).call(distAxisFunc); | |
| var data = d3.range(200).map(d => [Math.random()*d,Math.random()*d ]) | |
| var xScale = d3.scaleLinear().domain(d3.extent(data.map(row=>row[0]))).range([0,width]) | |
| var yScale = d3.scaleLinear().domain(d3.extent(data.map(row=>row[1]))).range([height,0]) | |
| d3.select('svg').append('circle') | |
| .attr('cx',100) | |
| .attr('cy',100) | |
| .attr('r', 11) | |
| .attr('fill', 'black') | |
| .on('click', function(){ | |
| //get a clicked element attribute | |
| var elem = d3.select(this); | |
| var cx = Number(elem.attr('cx')); | |
| var cy = Number(elem.attr('cy')); | |
| if (point_history.length > 1) { | |
| var prev_xy = point_history[point_history.length-2] | |
| var vector = new paper.Point(Math.abs(prev_xy[1]-cy),Math.abs(prev_xy[0]-cx)); | |
| var time_diff = new Date() - date1; | |
| console.log(vector.length) | |
| results_svg.append('circle') | |
| .attr('cx', distScale(vector.length)) | |
| .attr('cy',timeScale(time_diff)) | |
| .attr('r', 4) | |
| distAxis = results_svg.append('g').attr('transform', `translate(100,200)`).call(distScale); | |
| } | |
| var new_cy = (cy < height/2)? d3.randomUniform(cy, height)() : d3.randomUniform(0, cy)(); | |
| var new_cx = (cx < width/2)? d3.randomUniform(cx, width)() : d3.randomUniform(0, cx)(); | |
| point_history.push([new_cx,new_cy]) | |
| elem.transition().duration(80).attr('cx',new_cx).attr('cy',new_cy).attr('r',10) | |
| date1 = new Date(); | |
| }) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment