app-mpt/app/www/scatterplot.js

Shiny.addCustomMessageHandler("scatterplot_values", function(message) {

    var dataset = message[0];
    var info = message[1];

    // for dropdown
    var filters = ["regiao", "uf", "mesorregiao", "microrregiao",
		   "ds_grupo_agcausadores", "cnae_secao", "ds_natureza_lesao",
		   "cbo_grande_grupo", "agrupamento_parte_do_corpo",
		   "ds_tipo_acidente", "ds_tipo_local_acidente", "turno"];

    var current_grouping = "regiao";

    var margin = {top: 20, right: 50, bottom: 20, left: 50},
        width = (window.innerWidth * 0.8) - margin.right - margin.left,
        height =  (window.innerHeight * 0.95) - margin.top - margin.bottom;

    // Create the scatterplot canvas
    var scatterplot = d3.select("#scatterplot_area")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var xScale = d3.scaleLinear()
        .domain(d3.extent(dataset, function(d) { return d[0]; }))
        .range([0, width]);

    var yScale = d3.scaleLinear()
        .domain(d3.extent(dataset, function(d) { return d[1]; }))
        .range([height, 0]);

    /*var colorScale = d3.scaleSequential()
	.domain(info[current_grouping].filter(onlyUnique))
	.interpolator(d3.interpolateRainbow);*/

    var colorScale = d3.scaleOrdinal()
	.domain(info[current_grouping].filter(onlyUnique))
	.range(d3.range(info[current_grouping].filter(onlyUnique).length)
	       .map(d3.scaleSequential()
		    .domain([0, info[current_grouping].filter(onlyUnique).length])
		    .interpolator(d3.interpolateRainbow)));

    var saved_selections = [];

    var brush = d3.polybrush()
    //Polybrush goes against convention and ignores the previous translation?
        .x(d3.scaleLinear().range([-margin.left, width]))
        .y(d3.scaleLinear().range([height, -margin.top]))
        .on("start", function() {
    	    scatterplot.selectAll(".selected").classed("selected", false);
	    tooltip.style("visibility", "hidden");
        })
        .on("brush", highlightBrushedPoints)
        .on("end", displayTable);
    scatterplot.append("g")
        .attr("class", "brush")
        .call(brush);

    // functions
    function clearTableRows() {

        hideTableColNames();
        d3.selectAll(".row_data").remove();
    }

    function hideTableColNames() {
        d3.select("table").style("visibility", "hidden");
    }

    function showTableColNames() {
        d3.select("table").style("visibility", "visible");
    }

    function highlightBrushedPoints() {

        scatterplot.selectAll(".point").classed("selected", function(d) {

            if (brush.isWithinExtent(xScale(d[0]), yScale(d[1]))) {
                return true;
            } else {
                return false;
            }
        });
    }

    function displayTable() {

	// Save and unsave selections
	// Still don get why this only works with body
	d3.select("body").on("keydown", function() {
	    var key = d3.event.key;

	    switch(key) {
	    case "s":
		save_selection();
		break;
	    case "c":
		unsave_selection();
		break;
	    default:
		break;
	    }

	});

    }

    var points = scatterplot.append("g").attr("id", "points");

    // Criar círculos
    points.selectAll("circle")
        .data(dataset)
	.enter()
	.append("circle")
	.attr("class", "point")
        .attr("id", function(d, i) {
	    return i;
        })
        .attr("r", 3)
        .attr("cx", function(d) {
    	    return xScale(d[0]);
        })
        .attr("cy", function(d) {
    	    return yScale(d[1]);
        })
	.style("fill", function(d, i) {
	    return colorScale(info[current_grouping][i]);
	})
	.on("mouseover", function(d) {
	    var id = d3.select(this).attr('id');
	    if(d3.select(this).attr('class') == "point saved") {
		t_text = "";
		d3.selectAll(".saved").each(function() {
		    id = d3.select(this).attr('id');
		    t_text += info.municipio[id] + ", " + info.uf[id] + "<br/>";
		});
	    } else {
		t_text = info.municipio[id] + ", " + info.uf[id];
	    }

	    tooltip.html(t_text);
	    return tooltip.style("visibility", "visible");
	})
	.on("mouseout", function(d) {
	    return tooltip.style("visibility", "hidden");
	})
	.on("mousemove", function() {
	    return tooltip.style("top", (d3.event.pageY-10) + "px").style("left", (d3.event.pageX+10) + "px");
	});

    // Save a selection
    function save_selection() {
	s = d3.selectAll(".point.selected");

	s.classed("saved", true);

	saved_selections.push(s);

	// highlight on map
	s.each(function() {
	    id = d3.select(this).attr('id');
	    var town = info.municipio[id].replace(/[\s']/g,'');
	    var state = info.uf[id].replace(/\s/g,'');
	    d3.select("."+town+"."+state)
		.style("stroke", "red")
		.style("stroke-width", 3);
	});
    }

    // this might be used in the future
    /*function unsave_selection(i) {
	s = saved_selections.splice(i, 1);
	s.classed("saved", false);
    }*/

    // temporary
    function unsave_selection() {
	saved_selections = [];
	var s = d3.selectAll(".point.saved")
	    .classed("saved", false);

	// Remove highligh on map
	s.each(function() {
	    id = d3.select(this).attr('id');
	    var town = info.municipio[id].replace(/[\s']/g,'');
	    var state = info.uf[id].replace(/\s/g,'');
	    d3.select("."+town+"."+state).style("stroke", "black")
		.style("stroke-width", 0.5);
	});
    }

    // Update circle colors based on grouping
    function updateColors() {
	points.selectAll("circle")
	    .style("fill", function(d,i) {
		return colorScale(info[current_grouping][i]);
	    });
    }

    // Select or deselect a group colouring
    function toggleGroupColor() {
	var selectValue = d3.select('select').property('value');

	points.selectAll("circle")
	    .filter(function(d, i) {
		return info[current_grouping][i] == selectValue;
	    })
	    .style("fill", function(d, i) {

		if(d3.select(this).style('fill') == "black") {
		    return colorScale(selectValue);
		} else {
		    return "black";
		}
	    });
    }

    function toggleAllColors() {
	cb = d3.select(this);

	if(cb.property("checked")) {
	    d3.selectAll('.checkbox').property('checked', true);
	    points.selectAll("circle")
	    	.style("fill", function(d, i) {
		    return colorScale(info[current_grouping][i]);
		});
	} else {
	    d3.selectAll('.checkbox').property('checked', false);
	    points.selectAll("circle")
	    	.style("fill", "black");
	}

    }

    // Create a dropdown menu
    var select = d3.select("#sct_dropdown_area")
	.append('select')
  	.attr('class', 'filters_select')
	.on('change', onchange);

    var options = select
	.selectAll('option')
	.data(filters)
	.enter()
	.append('option')
	.text(function (d) { return d; });

    function onchange() {
	var selectValue = d3.select('.filters_select')
	    .property('value');

	for(var i = 0; i < filters.length; i++) {
	    if(selectValue == filters[i]) {
		current_grouping = selectValue;
		colorScale.domain(info[current_grouping].filter(onlyUnique))
		    .range(d3.range(info[current_grouping].filter(onlyUnique).length)
			   .map(d3.scaleSequential()
				.domain([0, info[current_grouping].filter(onlyUnique).length])
				.interpolator(d3.interpolateRainbow)));
	    }
	}

	updateColors();
	create_categories_menu();
    };

    // Create a menu to select grouping categories
    function create_categories_menu() {
	var categories = info[current_grouping].filter(onlyUnique);

	categories.sort();

	d3.select('.categories_select').remove();

	var select = d3.select("#sct_checkbox_area")
	    .append('div')
	    .attr('class', 'categories_select')
	    .append('select')
	    .on('change', 0);//on change does nothing, except enable to click on options

	var options = select
	    .selectAll('option')
	    .data(categories)
	    .enter()
	    .append('option').attr("class", "non-picked")
	    .text(function (d) { return d; })
	    .on("click", function(d){
		if(d3.select(this).attr("class") == "picked") {
		    d3.select(this).attr("class", "non-picked");
		    toggleGroupColor();// Allows recolouring the points without selection of other categorie.
		} else {
		    d3.select(this).attr("class", "picked");
		    toggleGroupColor();

		}
	    });
    }

    // Create a toggle all checkbox
    var all_box = d3.select("#sct_checkboxall_area")
	.append("div")
	.attr("class", "checkbox");

    all_box.append("input")
	.attr("type", "checkbox")
	.attr("checked", "true")
	.attr("id", "cb_all")
	.on("change", toggleAllColors);

    all_box.append("label")
	.attr("for", "cb_all")
	.text("tudo");

    create_categories_menu();

    // filter function to get only unique values in array
    function onlyUnique(value, index, self) {
	return self.indexOf(value) === index;
    }

    // tooltip code

    var tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.style("opacity", 1)
	.style("color", "white")
	.style("padding", "8px")
	.style("background-color", "rgba(0, 0, 0, 0.75)")
	.style("border-radius", "6px")
	.style("font", "12px sans-serif")
	.text("tooltip");

    var t_text = "";

    // MAP code

    var projection = d3.geoEquirectangular();
	//.translate([width, height/3])
	//.scale(1000);

    var path = d3.geoPath()
	.projection(projection);

    var static_map =  d3.select("#map_area")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

    var zooming = function(o) {
	var offset = [d3.event.transform.x, d3.event.transform.y];

	var newScale = d3.event.transform.k * 2000;

	projection.translate(offset)
	    .scale(newScale);

	static_map.selectAll("path")
	    .style("stroke", "black")
	    .style("stroke-width", 0.5)
	    .attr("d", path);

	// highlight again after zoom
	var s = d3.selectAll(".point.saved");
	s.each(function() {
	    id = d3.select(this).attr('id');
	    var town = info.municipio[id].replace(/[\s']/g,'');
	    var state = info.uf[id].replace(/\s/g,'');
	    d3.select("."+town+"."+state)
		.style("stroke", "red")
		.style("stroke-width", 3);
	});
    };

    var zoom = d3.zoom()
	.on("zoom", zooming);

    map = static_map.append("g")
	.attr("id", "towns")
	.call(zoom)
	.call(zoom.transform, d3.zoomIdentity
	      .translate(width, height/3)
	      .scale(0.25));

    d3.json("municipio.json").then(function(json) {

	map.selectAll("path")
	    .data(json.features)
	    .enter()
	    .append("path")
	    .attr("d", path)
	    .attr("class", function(d) {
		return d.properties.UF.replace(/\s/g,'') + " " + d.properties.NOME.replace(/[\s']/g,'');
	    })
	    .style("stroke", "black")
	    .style("stroke-width", 0.5)
	    .style("fill", function(d) {
		switch(d.properties.REGIAO) {
		case "Centro-Oeste":
		    return "#6e40aa";
		case "Nordeste":
		    return "#fe4b83";
		case "Norte":
		    return "#e2b72f";
		case "Sudeste":
		    return "#52f667";
		case "Sul":
		    return "#23abd8";
		default:
		    return "#ccc";
		}
	    })
	    .on("mouseover", function(d) {
		tooltip.html(d.properties.NOME + " - " + d.properties.UF);
		return tooltip.style("visibility", "visible").style("opacity", 1);
	    })
	    .on("mouseout", function(d){
		return tooltip.style("visibility", "hidden").style("opacity", 1);
	    }).on("mousemove", function() {
		return tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
	    });
    });

});