xxxxxxxxxx<html> <head> <meta charset="utf-8"> <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div id="tooltip" class="hidden"> <p> <strong><span id="voce"></span></strong> </p> <p> <span class="tooltipTitle">Importo</span><br><span id="value"></span> </p> <p> <span class="tooltipTitle">Percentuale</span><br><span id="percent"></span> </p> <p> <span class="tooltipTitle">Procapite</span><br><span id="procapite"></span> </p> </div><form> <label><input id="change2014" type="radio" name="dataset" value="val2015" checked> 2014</label> <label><input id="change2013" type="radio" name="dataset" value="val2013"> 2013</label></form> <script type="text/javascript"> //LOAD DATA d3.json("data.json", function(error, json) { if (error) { console.log(error); } else { console.log(json); dataset=json; drawInner(); draw(); interactivity (); } }) //LAYOUT var dataset; var h = 500; var w = 500; var padding = 5; var outerRadius = (w / 2)-padding; var innerRadius = w / 3; var innerRadiusInner = w / 4; var greenRange = ["rgb(199,233,192)", "rgb(0,68,27)"]; var redRange = ["rgb(252,187,161)", "rgb(103,0,13)"]; var blueRange = ["rgb(198,219,239)", "rgb(8,48,107)"]; var colorInner = d3.scale.ordinal() .domain(["funzioni", "rimborso prestiti", "altro"]) .range(["rgb(0,68,27)", "rgb(203,24,29)" , "rgb(33,113,181)"]); var arc = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); var arcInner = d3.svg.arc() .innerRadius(innerRadiusInner) .outerRadius(innerRadius); var pie = d3.layout.pie() .value(function(d) { return d.val2015; }) .sort(null); var pieInner = d3.layout.pie() .value(function(d) { return d.values; }) .sort(null); function arcTween(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arc(i(t)); }; } function drawInner () { var nestCategoria = d3.nest() .key(function (d) {return d.categoria;}) .rollup(function(d) {return d3.sum(d, function(g) {return g.val2015;});}) .entries(dataset) chartInner = d3.select("#container") .append("svg") .attr("id", "visualizationInner") .attr("width", w) .attr("height", h) .append("g") .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")"); var pathInner = chartInner.datum(nestCategoria).selectAll("path") .data(pieInner) .enter() .append("path") .attr("fill", function(d, i) { return colorInner(i); }) .style("fill-opacity", 0.75) .attr("d", arcInner) .each(function (d) { this._current = d; }); d3.select("#change2013").on("click", function () { var nestCategoria = d3.nest() .key(function (d) {return d.categoria;}) .rollup(function(d) {return d3.sum(d, function(g) {return g.val2013;});}) .entries(dataset) pieInner.value(function (d) { return d.values; }); // change the value function pathInner.data(pie); // compute the new angles path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs }) } function draw () { var countFunzioni=0; dataset.forEach (function (d) {if (d.categoria=="funzioni" && d.val2015>0) { countFunzioni += 1; d.catIndex = countFunzioni;}}) var countRimborso=0; dataset.forEach (function (d) {if (d.categoria=="rimborso prestiti" && d.val2015>0) { countRimborso += 1; d.catIndex = countRimborso;}}) var countAltro=0; dataset.forEach (function (d) {if (d.categoria=="altro" && d.val2015>0) { countAltro += 1; d.catIndex = countAltro;}}) colorFunzioni = d3.scale.linear() .domain([0, countFunzioni]) .range(greenRange); colorRimborso = d3.scale.linear() .domain([0, countRimborso]) .range(redRange); colorAltro = d3.scale.linear() .domain([0, countAltro]) .range(blueRange); chart = d3.select("#visualizationInner") .append("svg") .attr("id", "visualization") .attr("width", w) .attr("height", h) .append("g") .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")"); colorMap = { "funzioni": colorFunzioni, "altro": colorAltro, "rimborso prestiti": colorRimborso } var path = chart.datum(dataset).selectAll("path") .data(pie) .enter() .append("path") .attr("fill", function (d, i) { var scale = colorMap[d.data.categoria]; if (scale) return scale(d.data.catIndex); }) .style("fill-opacity", 0.75) .attr("d", arc) .each(function (d) { this._current = d; }); d3.select("#change2013").on("click", function () { pie.value(function (d) { return d.val2013; }); // change the value function path.data(pie); // compute the new angles path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs }) } function interactivity () { d3.selectAll("path").on("mouseover", function (d) { var total = d3.sum(dataset.map(function(d) { return d.val2015;})); var percent = Math.round(1000 * d.value / total) / 10; //highlight d3.select(this) .style("fill-opacity", 1) //update tooltip text d3.select("#tooltip") .select("#voce") .text(d.data.key); d3.select("#tooltip") .select("#value") .text(d.value + " €"); d3.select("#tooltip") .select("#percent") .text(percent + " %"); //display tooltip d3.select("#tooltip") //.style("left", w/2 + "px") .style("top", h/2 + "px") .classed("hidden", false) }) d3.selectAll("path").on("mouseout", function () { //remove highlihgt d3.select(this) .style("fill-opacity", 0.75) //hide tooltip d3.select("#tooltip") .classed("hidden", true) }) d3.selectAll("path").on("click", function (d) { //remove previous tooltip //update tooltip title d3.select("#descrTitle") .text(d.data.descrTitle) //update tooltip text d3.select("#descrText") .html(d.data.descrText) //update tooltip image descrImg = d3.select("#descrImg"); descrImg.select("svg").remove(); //removes previous image d3.selectAll("path").attr("stroke-width", 0); descrImgURI = d.data.descrImg; fillColor = d3.select(this).attr("fill"); d3.select(this).attr("stroke", fillColor); d3.select(this).attr("stroke-width", 3); d3.xml(descrImgURI, "image/svg+xml", function(error, xml) { if (error) throw error; var svg= xml.documentElement; descrImg.node().appendChild(svg); var a = document.getElementById("Ebene_1"); var b = a.getElementsByTagName("circle")[0]; var c = a.getElementsByTagName("path"); // d3.select(b).attr("fill", function (d, i) { // var scale = colorMap[d.data.categoria]; // if (scale) return scale(d.data.catIndex); // }) d3.select(b).attr("fill", fillColor); d3.selectAll(c).attr("fill", "white"); }); // var innerSVG = main_chart_svg.select("svg"); // innerSVG.transition().duration(1000).delay(1000) // .select("circle") // .attr("r", 100); //show tooltip }) } // function changeYear () { // function arcTween(a) { // var i = d3.interpolate(this._current, a); // this._current = i(0); // return function(t) { // return arc(i(t)); // }; // } // d3.select("#change2013").on("click", function () { // var value = this.value; // //clearTimeout(timeout); // pie.value(function(d) { return d.data.val2013; }); // change the value function // path = path.data(pie); // compute the new angles // path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs // }) // } </script> <!-- Descriptions --> <div class="description hidden" id="funzioni"> <span id="descrImg"></span> <p><strong><span id="descrTitle">Instruzioni</strong></span></p> <p><span id="descrText">Clicca sulla fetta di torta per ottenere maggiori informazioni riguardo alla funzione governativa.<span></p> </div> </div> </body></html> https://d3js.org/d3.v3.min.js