D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
loveice622
Full window
Github gist
GazeMap
Built with
blockbuilder.org
<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.min.js"></script> </head> <body> <script> var img = new Image(); var width,height; img.onload = function(){ width=img.naturalWidth ; height=img.naturalHeight ; }; img.src = "https://loveice622.github.io/11-50-56.jpg"; width =1261 height=4025 var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); svg.append("image") .attr("x",0).attr("y",0) .attr("width", width) .attr("height", height) .attr("xlink:href", "https://loveice622.github.io/11-50-56.jpg"); d3.csv("1.csv", function(d){ for(i = 1; i < d.length; i ++) { d[i].delay=Number(d[i].TimeStamp)-Number(d[0].TimeStamp) d[i].label=i.toString() if (i<d.length-1) { var r r=(Number(d[i+1].TimeStamp)-Number(d[i].TimeStamp))*0.3 if(r<1) d[i].r=1 else d[i].r=r //console.log(i,d[i].r, d[i].delay) } if(i < d.length-1){ svg.append("line") .attr("x1", Number(d[i].x)) .attr("y1", Number(d[i].y)) .attr("x2", Number(d[i+1].x)) .attr("y2", Number(d[i+1].y)) .style("stroke", "#8da0cb") .style("stroke-width", 0) .transition() .delay(d[i].delay) .duration(2000) .style('stroke-width', 2) svg.append("line") .attr("x1", Number(d[i].mouseX)) .attr("y1", Number(d[i].mouseY)) .attr("x2", Number(d[i+1].mouseX)) .attr("y2", Number(d[i+1].mouseY)) .style("stroke", "#8da0cb") .style("stroke-width", 0) .transition() .delay(d[i].delay) .duration(2000) .style('stroke-width', 2) svg.append("circle") .attr("cx", Number(d[i].mouseX)) .attr("cy", Number(d[i].mouseY)) .attr("r",0) .style("fill", "Lime") .style("opacity", 0.4) .transition() .delay(d[i].delay) .duration(2000) .attr('r', d[i].r) .style('opacity', 50) svg.append("circle") .attr("cx", Number(d[i].x)) .attr("cy", Number(d[i].y)) .attr("r", 0) .style("fill", "red") .style("opacity", 0.4) .transition() .delay(d[i].delay) .duration(2000) .attr('r', d[i].r) .style('opacity', 50) svg.append("text") .attr("x", Number(d[i].x-5)) .attr("y", Number(d[i].y+5)) .transition() .delay(d[i].delay) .duration(2000) .text(d[i].label) svg.append("text") .attr("x", Number(d[i].mouseX)) .attr("y", Number(d[i].mouseY)) .transition() .delay(d[i].delay) .duration(2000) .text(d[i].label) } } // var pulseCircles = svg.selectAll('circle') // .data(d) // .transition() // .delay(d=>d.delay) // .duration(2000) // .attr('r', d=>d.r) // .style('opacity', 50) }) </script> </body>
https://d3js.org/d3.v3.min.js