turinBudget

<!DOCTYPE html>
<html>

<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>

//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 () {

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 () {

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>

<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