<!--
Library     : d3blocks
Author      : E.Taskesen
Mail        : erdogant@gmail.com
Github      : https://github.com/d3blocks/d3blocks
License     : GPL3
-->

<!doctype html>
<html lang="en">
<svg width="{{ WIDTH }}" height="{{ HEIGHT }}"></svg>
<head>
    <meta charset="UTF-8">
    <title>{{ TITLE }}</title>

    <style>
      body { background: {{ COLOR_BACKGROUND }} }
    </style>

</head>
<body>

<script>
	{% include "d3.v4.min.js" %}
</script>


<form>
	<input type="radio" name="radio_states" value="radiobutton1" style="{{ RADIO_VISIBLE1 }}" checked="checked"> <label> {{ RADIO_LABEL1 }} </label>
	<input type="radio" name="radio_states" value="radiobutton2" style="{{ RADIO_VISIBLE2 }}"> <label> {{ RADIO_LABEL2 }} </label>
	<input type="radio" name="radio_states" value="radiobutton3" style="{{ RADIO_VISIBLE3 }}"> <label> {{ RADIO_LABEL3 }} </label>
</form>


<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- Circle are black when hovered-->
<style>
.myCircle:hover {
  stroke: black;
}
</style>



<script>
	var jsonData = {{ json_data }};

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg");

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height")-1;

var k = height / width,
    x0 = [{{MIN_X}}, {{MAX_X}}],
    y0 = [{{MIN_Y}}, {{MAX_Y}}],
    x = d3.scaleLinear().domain(x0).range([0, width]),
    y = d3.scaleLinear().domain(y0).range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

var xAxis = d3.axisTop(x).ticks(12),
    yAxis = d3.axisRight(y).ticks(12 * height / width);

var brush = d3.brush().on("end", brushended),
    idleTimeout,
    idleDelay = 350;


// create a tooltip with the box ****************************
var Tooltip = d3.select("#my_dataviz")
  .append("div")
  .style("opacity", 0)
  .attr("class", "tooltip")
  .style("background-color", "white")
  .style("border", "solid")
  .style("border-width", "2px")
  .style("border-radius", "5px")
  .style("padding", "5px")
  .style("position", "absolute")

// Three function that change the tooltip when user hover / move / leave a cell
var mouseover = function(d) {
Tooltip
  .style("opacity", 1);

// Increases size of the dot with 0.5
d3.select(this)
  .style("r",  d[3] + (0.5*d[3]))
  .style("opacity", 0.8);
}

var mousemove = function(d) {
Tooltip
  .html(d[6])
//  .html("Exact value: " + d[6])
  .style("left", (d3.mouse(this)[0]+70) + "px")
  .style("top", (d3.mouse(this)[1]) + "px")
}

var mouseleave = function(d) {
Tooltip
  .style("opacity", 0)
// Back to orignal dot-size
d3.select(this)
  .style("r",  d[3])
}

// ************************************************


// Add X axis
svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + (height - 10) + ")")
    .call(xAxis);

// Add Y axis
svg.append("g")
    .attr("class", "axis axis--y")
    .attr("transform", "translate(10,0)")
    .call(yAxis);

svg.append("g")
    .attr("class", "brush")
    .call(brush);

// initialize all points ***********************

var circles = svg.selectAll("circle")
  .data(jsonData)
  .enter().append("circle")
    .attr("class", "myCircle")                     // Edge-color turns black when when hovered
    .attr("cx", function(d) { return x(d[0]); })   // x-coordinates
    .attr("cy", function(d) { return y(d[1]); })   // y-coordinates
    .attr("fill", function(d) { return d[2]; })    // fill hexcolor
    .attr("r", function(d) { return d[3]; })       // dotsize
    .attr("opacity", function(d) { return d[4]; }) // opacity
    .attr("stroke", function(d) { return d[5]; })  // stroke color
    {{ MOUSEOVER }}
    {{ MOUSEMOVE }}
    {{ MOUSELEAVE }}


// Read checkboxes and create transition ****************************
const buttons = d3.selectAll('input');
buttons.on('change', function(d) 
{
	// console.log('button changed to ' + this.value);

	if (this.value == 'radiobutton1')
		circles.transition()
			.delay(0)                                     // Wait in ms to start transition
			.duration(2500)                               // Transition speed in ms for radio button
			.attr("cx", function(d) { return x(d[0]); })  // x-coordinates
			.attr("cy", function(d) { return y(d[1]); })  // y-coordinates
	else if (this.value == 'radiobutton2')
		circles.transition()
			.delay(0)                                     // Wait in ms to start transition
			.duration(2500)                               // Transition speed in ms for radio button
			.attr("cx", function(d) { return x(d[7]); })  // x1-coordinates
			.attr("cy", function(d) { return y(d[8]); })  // y1-coordinates
	else if (this.value == 'radiobutton3')
		circles.transition()
			.delay(0)                                     // Wait in ms to start transition
			.duration(2500)                               // Transition speed in ms for radio button
			.attr("cx", function(d) { return x(d[9]); })  // x1-coordinates
			.attr("cy", function(d) { return y(d[10]); })  // y1-coordinates
;})


// *************************************************

function brushended() {
  var s = d3.event.selection;
  if (!s) {
    if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);
    x.domain(x0);
    y.domain(y0);
  } else {
    x.domain([s[0][0], s[1][0]].map(x.invert, x));
    y.domain([s[1][1], s[0][1]].map(y.invert, y));
    svg.select(".brush").call(brush.move, null);
  }
  zoom();
}

function idled() {
  idleTimeout = null;
}

function zoom() {
  var t = svg.transition().duration(750);
  svg.select(".axis--x").transition(t).call(xAxis);
  svg.select(".axis--y").transition(t).call(yAxis);

	// console.log(d3.select('input[name="radio_states"]:checked').node().value);
    // Get correct coordinates for zooming
    if (d3.select('input[name="radio_states"]:checked').node().value == 'radiobutton1'){
        svg.selectAll("circle").transition(t)
            .attr("cx", function(d) { return x(d[0]); })
			.attr("cy", function(d) { return y(d[1]); });
	} else if (d3.select('input[name="radio_states"]:checked').node().value == 'radiobutton2') {
        svg.selectAll("circle").transition(t)
            .attr("cx", function(d) { return x(d[7]); })
			.attr("cy", function(d) { return y(d[8]); });
	} else if (d3.select('input[name="radio_states"]:checked').node().value == 'radiobutton3') {
        svg.selectAll("circle").transition(t)
            .attr("cx", function(d) { return x(d[9]); })
			.attr("cy", function(d) { return y(d[10]); });
			}

}


</script>
</body>
</html>