Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3.slider.js"></script>
<style>
body {
margin:0;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}
.textoAno{
position: relative;
z-index=0;
fill:black;
font-family: "Courier New", Courier, monospace;
font-size: 58px;
font-weight: bold;
font-variant: small-caps;
}
.TextoSetores{
fill:slategray;
font-family: "Times New Roman", Times, serif;
font-size: 48px;
font-weight: bold;
font-variant: small-caps;
}
.TextoLegend{
fill:black;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
}
.slider{
position: relative;
width:400px;
z-index=1;
}
.buttonPlay{
position: relative;
z-index=10;
}
.Tooltip{
fill:black;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
font-variant: small-caps;
}
</style>
</head>
<body >
<div id="Visualization" style="margin:0px"></div>
<div id="SliderContainer" style=" position: relative; left: 45px; top:-25;">
<input type="range" name="points" min="1" max="63" step="1" value="1" id="Slider" class="slider">
</div>
<script>
var width = 1300; //maximum width
var height = 660; //height of the SVG
var N_Meses = 64; //number os iterations, months;
var CirclesLegend=[5000, 2500, 1000, 100];//value fot the legends circles
var TextoTooltip = "";
var trianglePoints = [08,02,//triangle for the play button
18,12,
08,22,
08,02];
var Text_Datas=['jan/12','fev/12','mar/12','abr/12','mai/12','jun/12','jul/12','ago/12','set/12','out/12','nov/12','dez/12','jan/13','fev/13','mar/13','abr/13','mai/13','jun/13','jul/13','ago/13','set/13','out/13','nov/13','dez/13','jan/14','fev/14','mar/14','abr/14','mai/14','jun/14','jul/14','ago/14','set/14','out/14','nov/14','dez/14','jan/15','fev/15','mar/15','abr/15','mai/15','jun/15','jul/15','ago/15','set/15','out/15','nov/15','dez/15','jan/16','fev/16','mar/16','abr/16','mai/16','jun/16','jul/16','ago/16','set/16','out/16','nov/16','dez/16','jan/17','fev/17','mar/17','abr/17'] ;
var MAPA_Path="M25.2 52c2-2.6 7.5-6.5 10.3-5.3 1 .4 4.8.8 8 .8 3.5 0 6.4.3 7 .5 1.6.8 1.4-2.8-.4-4.4-2-2.7.3-3.3 1-5.7 0-1 0-1 2 0 3.3 1 5.7 1 9.4-.3 4-1.3 7.2-.7 10.4 2 6 3 10.7 4 13.7-1 .8 2.7 2.6 3 4.2 2.7 2.5-.5 3-.3 4 .5 3 3.8 8.7 0 12-8.7 1.4-9.7 14-18 14.5-26.7 0-8 8.2 5.7 9.2 15.6 1.7 13.4 5 19.7 13.8 26.6 4 0 5.7 9.5 2.7 15.3-2.8 5.2-2 9.2 2 9.2 5 1 5 5 9.8 7.4 2 1.2 4 2 6.2 2 4.3 0 6 1 6 3s2.7 4.2 5 4.2c1.2 0 2.2-.3 2.2-.6 0-.6 3-1.3 4-.7 2.5.7 4.8.5 7.3 1.3.6.5 6.3 2.4 12.5 4.4 9 3.2 11.6 4.2 11.6 5 0 1 .4 1 2.3 1 2.3-.2 4.2 1 3.5 2.8-.7 1.6.4 1.6 1.7 0 1-1.5 1.4-1.6 2-.8.3.5 1.5.8 2.3.8 1.3 0 1.6.2 1.4 1.4 0 1 1 3 3.4 6 2 3.2 3.5 5.6 3.5 6.8 0 1.7.2 1.8 2.4 1.4 1.4-.2 3 0 3.3.3.4.2 1.3 0 2.4-1.5 2-2 4-2.7 4.7-1.6 0 .2 1.5.6 3.3 1 1.4 0 5 1.3 7.8 2.8 4 2 6.4 2.6 10 3 2.6 0 6 1 8.7 2 4.4 1.8 4.6 1.8 10.5 1 8.8-1 16.3-1 18.7.4 8 4 23 15 28.5 21 3.2 3.5 6.5 6.5 7.3 6.8 3.2 1.7 5.2 4.7 8.6 6 .6 0 1.7.6 2.7 1 1.3 1 3.7 1.4 10.8 1.7 15 .5 15.2.7 20 25.6 3 14.6 1.7 21.2-5.7 36.5-1.5 3-3.7 6-10.2 12.2l-10.3 10.7c-1.2 1.8-3.8 3.6-6 4.8-5.2 2.8-9.8 7.8-16 17.3-7.4 12.2-14.4 19.7-17.2 18.7-7.2.7-6.6 9.3-7.6 15-1.5 8-1.8 17.8-1 23.5l.8 4.2c-2.3 7.6-6 16-6 23.2-.7 5.4-1.5 9-2.4 9-4 0-7.6 7.4-7.6 16 0 8-.4 8.6-5.4 13.7-1.7 2-3 4.4-3 5.2-1.4 4-4.2 8.8-8 10.4-2.4 1.6-6 9.6-5.3 13.3.3 4-.5 5-6.5 7.2-7 2.6-10.4 6-7.4 7 .6 1.3-1 2.3-1.3 4 0 1-.5 1-1 .7-2.8-1-16.8-1.6-19.5-.7-2.7 1-3 1-4.6-.3-2-1.6-4.4-1.8-6-.7-1 .8-1.7.8-3 0-3.6-1.4-7.6 1-4.4 2.6 2.2 1 .5 2.5-2.6 2.5-3 0-7.7 2.8-8.8 5-.8 1.7-2 2-5.7 1-4.8.7-12.5 3.5-15.8 6.6-9 4.6-13 12.7-19.4 17.7-6.4 5.4-3 10.4-5.3 15.4-1 2.8-.6 9.2.8 10.5 1 .7 1 2 0 2.5 1.7 6 1.5 5.8-1 11-2.4 9.6-2 9-8 14-7.2 6.3-10.2 10.2-12.2 16.3-4 12-9.8 20.3-20.2 30.8-8.6 8.6-8 8.6-8 3.4 0-4-.2-2.4 1.4-3.3 1.6 1 9.2-6 9.2-8 0-1 1-2.7 2.8-4.5 2.3-2.2 3-3.4 3.6-6 .3-1.8.8-3.7 1-4-.4-.8-2 .3-3.3.6l-1.8 1.2c-1 1.2-1.7 1-1.7 2.7 0 1.4-.4 2.2-1.4 2.8-1 .4-1.3 1.4-1.3 2.5 0 1.6-3.4 5.7-5 5.7-.4 0-1.2 1-1.5 1.8l-2.2 3.7c-.8 1.3-1 2.7-1 5 .5 10.7-14.6 34.4-18.3 29.6-3.8-1.6-2.7-10.4-.4-12 1-1 2.4-2.4 2.7-3.5.8-2 2.4-2.7 3.2-1.5 1.5 2.5 3.6 0 3.6-4v-2.7l-2 2.3c-4.2 4.3-9.5 2.3-12.3-4.8-4-5.5-10-10-16-13.5-2.8-1.5-5-2.7-6.3-4.7-2-3.2-2.2-3.2-5-1.3-2.2 2-3.7 2.2-3.7.4 0-6.5-11.5-16-15.5-12.5s-9 .3-5-3.3c2.2-2 10.7-12.8 13.5-17.3 4.8-6.4 9.6-12 14.5-16.8 3.6-3 11.5-10.2 14.2-10.4.5.2 1.5-.2 2.2-.8.7-1 2-2 3.7-3 3.8-3 4.7-13 2.6-17-1-4.4-3-8.6-6.8-6.7-4 2.2-5.7-1-3.7-6.5 5-14.6 3.2-22.7-4.6-20-8.2 3.4-9.3 2-11.7-17.2-.7-5.8-2.4-8-6-8-2.4 0-3-1-4.2-2.7l-2.3 1.5c-2.7 1.8-7.8 2-13.2.4-2-.5-4-.8-4.7-.5-2 .6-3.6-2.2-2.8-5 .4-3.2.3-6.6 1-9.4 1-3-.2-4-.7-6.2 0-.6-1-3.2-2-6-2-5-2-5.5 1-6.4.2-.2 0-1-.6-2.6-1.7-3.3-1.5-5 .7-8.2 1.6-2 2.3-3.8 3-8 .4-3.4 1.3-6.6 2-7.2 1-1.8 1-2-1-6-1-2.2-2-4.3-2-5-.5-.6-2-.7-2.7-1.5l-2.6-2.7";
//////////////////////////////////////////////////////////////////////////////////
// load the data
d3.json("DadosJson7.json", function(error, data) {
data.forEach(function(d) {
d.CX = d.CX;
d.CY = d.CY;
TestData=d.Ind1;
for(i=1;i<N_Meses;i++){
//divided by two is arbitrary to get a good circle size on the map
eval('d.Mes' + i + ' =d.Ind' + i + '/2');
};
});
var svgContainer = d3.select("#Visualization").append("svg")//the visualization container
.attr("width", width)
.attr("height", height);
for(i=0;i<3;i++){ // enter three maps with "i*400" distance between them
svgContainer.append("svg:path")
.attr("d",MAPA_Path)
.style("stroke-width", 1)
.style("stroke", "gray")
.style("fill", "none")
.attr("transform", "translate(" + i*410 + ",20)scale(1.00)");
};
var circles = svgContainer.selectAll("circle")//create the point on the map
.data(data)
.enter()
.append("circle");
var circleAttributes = circles//atributes of the map´s dots
.attr("class", "PontosnoMapa")
.attr("cx", function (d) { return d.CX; })
.attr("cy", function (d) { return d.CY; })
.attr("transform", "translate(0,-7)")
.attr("r", function (d) { return Math.abs(Math.sqrt(d.Mes1));})
.style("stroke", "black")
.attr("fill",function(d){
if(d.Mes1>0){
return "#23aafe" }else{
return "#ff0a12"
};
})
.on("mouseover", function(d){//mouse over the circles of data
return tooltip
.style("visibility", "visible")
.text(d.Nome);
})
.on("mousemove", function(){
return tooltip
.style("top", (event.pageY-10)+"px")
.style("left",(event.pageX+10)+"px");
})
.on("mouseout", function(){
return tooltip
.style("visibility", "hidden");
});
var LegendContainer = svgContainer.append("g")//container of the legend
.attr("transform", "translate(1160,460)");
var Legend = LegendContainer.selectAll("Legends")//circles of the legend
.data(CirclesLegend)
.enter()
.append("circle")
.attr("cx", 0)
.attr("cy", function (d){ return Math.abs(Math.sqrt(d)) ;})
.attr("r", function (d) { return Math.abs(Math.sqrt(d));})
.style("stroke", "black")
.style("stroke-width", 1)
.attr("fill","none");
var LegendText = LegendContainer.selectAll("LegendText")//text of the legend circles
.data(CirclesLegend)
.enter()
.append("text")
.attr("x", -10)
.attr("y", function (d){ return Math.abs(Math.sqrt(d)*2)+10 ;})
.text(function (d) { return d;})
.attr("class","TextoLegend");
var Texto = svgContainer.append("text") //Creats the text of the date
.attr("id", "TextodoAno")
.attr("x", 230)
.attr("y", 630)
.text("jan/12")
.attr("class","textoAno");
var Text_Setor1 = svgContainer.append("text") //Creats text Sectors
.attr("x", 15)
.attr("y", 40)
.text("Indústria")
.attr("class","TextoSetores");
var Text_Setor2 = svgContainer.append("text") //Creats text Sectors
.attr("x", 425)
.attr("y",40)
.text("Serviços e Com.")
.attr("class","TextoSetores");
var Text_Setor3 = svgContainer.append("text") //Creats text Sectors
.attr("x", 835)
.attr("y", 40)
.text("Construção Civil")
.attr("class","TextoSetores");
//////////////////////////////////////////////////////////////////////////////////
//Transitions: change the colour of the circles, and of the text
var DuracaoDaTransicao = 300;
var DelayDaTransicao=300;
function Muda(){//select all the circles and gives them new colors and sizes
for(i=1; i<N_Meses;i++){
svgContainer.selectAll(".PontosnoMapa")
.data(data)
.transition()
.delay(DelayDaTransicao * i)
.duration(DuracaoDaTransicao)
.attr("r", function (d) { return Math.sqrt(Math.abs(eval('d.Mes' + i)));})
.attr("fill",function(d){//red if negative, blue if positive
if(eval('d.Mes' + i)>0){
return "#23aafe"; }else{
return "#ff0a12";
};
});
svgContainer.selectAll("#TextodoAno")//change the date
.transition()
.duration(DuracaoDaTransicao)
.delay(DelayDaTransicao*i)
.text(Text_Datas[i]);
d3.select("#Slider")//try to give the slider the i value
.property("value", i);
};
};
function MudaSlider(Slider){//select all the circles and gives them new colors and sizes based on the slider value
svgContainer.selectAll(".PontosnoMapa")
.data(data)
.transition()
.duration(DuracaoDaTransicao/2)
.attr("r", function (d) { return Math.sqrt(Math.abs(eval('d.Mes' + Slider)));})
.attr("fill",function(d){//red if negative, blue if positive
if(eval('d.Mes' + Slider)>0){
return "#23aafe"; }else{
return "#ff0a12";
};
});
svgContainer.selectAll("#TextodoAno")//change the date
.transition()
.text(Text_Datas[Slider]);//gives the name of the date as date[i]
};
//get the new value of the slider and call the above function with that
d3.select("#Slider").on("input", function() {
MudaSlider(+this.value);
});
//////////////////////////////////////////////////////////////////////////////////
//just for the play button
var ButtonPlay=svgContainer.append("g")
.attr("class","buttonPlay")
.attr("transform", "translate(15,635)");
ButtonPlay.append("rect")
.attr("width","25")
.attr("height","25")
.attr("fill","lightgray")
.on("click",Muda);
ButtonPlay.append('polyline')
.attr('points', trianglePoints)
.attr("fill","steelblue")
.style("stroke", "black")
.style("stroke-width", 1)
.on("click",Muda);
//////////////////////////////////////////////////////////////////////////////////
//Tooltip
var tooltip = d3.select("#Visualization")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.attr("class","Tooltip")
.text(TextoTooltip);
//////////////////////////////////////////////////////////////////////////////////
//bar graph on selection
/*
var BarGraphContainer = svgContainer.append("g")//container of the legend
.attr("transform", "translate(100,100)");
var BarGraph = BarGraphContainer.selectAll("bars")//circles of the legend
.data(data)
.enter()
.append("rect")
.attr("width","1")
.attr("height",function (d){
return Math.abs(d.Mes60) ;
})
.attr("x", function (d, i){ return i *1 ;})
.style("stroke", "black")
.style("stroke-width", 0)
.attr("fill","red")
.on("mouseover", function(d){alert(d);
return tooltip
.style("visibility", "visible")
.text(d.Mes60);
});
*/
});//end of the D3 function with data
</script>
</body>