gtato/maptoplot.html

## maptoplot.html
<!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>
	<!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>