Skip to content

Instantly share code, notes, and snippets.

@gtato
Last active May 26, 2016 12:27
Show Gist options
  • Save gtato/8e5ce94a7fc83a2a163f5cc6a797bc00 to your computer and use it in GitHub Desktop.
Save gtato/8e5ce94a7fc83a2a163f5cc6a797bc00 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<meta charset="utf-8" xmlns="http://www.w3.org/1999/html">
<html>
<head>
<title>Scatter plot coordinates</title>
<style>
.content {
/*text-align:center */
}
.main text {
font: 10px sans-serif;
-webkit-user-select: none;
/* Chrome/Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.axis line,
.axis path {
shape-rendering: crispEdges;
stroke: black;
fill: none;
}
circle {
fill: lightsteelblue;
stroke: steelblue;
stroke-width: 1.5px;
}
div.tooltip {
position: absolute;
text-align: center;
width: 80px;
height: 15px;
font: 12px sans-serif;
/* border: 1px solid black; */
pointer-events: none;
}
svg {
z-index: 500
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<img id="map" src="https://www.renater.fr/IMG/png/carte-RENATER-2.png" / style="width:830px; position:absolute; top:-80px; left:0px; z-index:-2; display:none">
<div id='content' style="float:left">
</div>
Double-click on the chart to add nodes, drag and drop, double-click on the node to remove it
<br>
<br>
<input id="show_map" type="checkbox">Show map
<br>
<button id="show_cords"> Write coordinates </button>
<button id="clear"> Clear </button>
<div id="cords" style="padding-top:20px; height:470px; width:200px overflow-y: scroll;">
</div>
<script>
var data = [];
var margin = {
top: 20,
right: 15,
bottom: 20,
left: 60
},
width = 600 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var div = d3.select("#content").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var drag = d3.behavior.drag()
.origin(function(d) {
return dotcord(d);
})
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
var x = d3.scale.linear().domain([0, 1]).range([0, width]);
var y = d3.scale.linear().domain([0, 1]).range([height, 0]);
var ax = d3.scale.linear().domain([0, width]).range([0, 1]);
var ay = d3.scale.linear().domain([height, 0]).range([0, 1]);
var svg = d3.select('#content')
.append('svg')
.on('dblclick', function() {
cx = d3.event.layerX - margin.left - 8;
cy = d3.event.layerY - margin.top - 8;
sx = ax(cx)
sy = ay(cy)
data.push({
x: sx,
y: sy
});
showCircles();
dots.selectAll('circle').each(function(d) {
if (d.x == sx && d.y == sy)
d3.select(this).attr("cx", cx).attr("cy", cy);
});
})
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
var main = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
var xAxis = d3.svg.axis().scale(x).orient('bottom');
var yAxis = d3.svg.axis().scale(y).orient('left');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
dots = main.append("g")
showCircles();
function showCircles() {
dots.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d, i) {
return x(d.x);
})
.attr("cy", function(d) {
return y(d.y);
})
.attr("r", 5)
.on('dblclick', function(d) {
d3.event.stopPropagation();
ndata = []
rdata = []
for (i = 0; i < data.length; i++) {
if (data[i].x != d.x || data[i].y != d.y)
ndata.push(data[i])
else
rdata.push(data[i])
}
div.transition().style("opacity", 0);
data = []
dots.selectAll("circle").data(data).exit().remove()
data = ndata
showCircles()
})
.on("mouseover", function(d) {
if (d3.select(this).classed('dragging'))
return
div.transition()
.duration(500)
.style("opacity", .9);
div.html(mround(d.x) + ", " + mround(d.y))
.style("left", (x(d.x) + margin.left - 30) + "px")
.style("top", (y(d.y) + margin.top - 15) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(200)
.style("opacity", 0);
})
.call(drag);
}
function dotcord(d) {
return {
x: x(d.x),
y: y(d.y)
};
}
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("dragging", true);
div.style("opacity", 0);
}
function dragged(d) {
d.x = ax(d3.event.x)
d.y = ay(d3.event.y)
d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
}
function dragended(d) {
d3.select(this).classed("dragging", false);
}
function mround(num) {
return Math.round(num * 1000) / 1000
}
d3.select("#show_cords").on('click', function() {
cords = ''
dots.selectAll('circle').each(function(d) {
cords += mround(d.x) + ', ' + mround(d.y) + '<br>'
});
d3.select('#cords').html(cords)
if (cords.length == 0)
d3.select('#cords').html('Empty')
});
d3.select("#clear").on('click', function() {
data = []
dots.selectAll("circle").data(data).exit().remove()
});
d3.select("#show_map").on('click', function() {
if (d3.selectAll("#show_map").property('checked'))
d3.selectAll("#map").style('display', 'block')
else
d3.selectAll("#map").style('display', 'none')
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment