score:0

Here goes a brief description and an example of what you need to do to embed an SVG within an html page and make a d3 cloropleth out of it while reading the data from a csv file:

First add your SVG to the html page. Ideally it will be located within a div like the example below:

 <div class="map">
 <?xml version="1.0" enconding="UTF-8" standalone="no"?>
 <svg ...your svg data...>
 ...
 <path id="AngraDosReis"... class="fil3"...>
 <path id="Aperibe"... class="fil3"...>
 ...
 </svg>
 </div>

In my example the ids are not important but the "fil3" class and data order are important as my data is on the same order of the svg elements (In other words, the first line on the data.csv file corresponds to the data associated with the first path.fil3 element on my svg). Later on the code I'll be binding the data to the svg elements with d3.selectAll("svg.fil3"), so the class on each path element is really important: if a path do not represent a district then it does not belong to the fil3 class. With you SVG in place you just need to read your variables from the csv file:

var ready = false; // Tells if file has been read and variables are ready
var dsv = d3.dsv(";", "text/plain");
dsv("./data.csv",  function(dados) {
    return {
      indMed14: +dados.indMed14,
      densidades: +dados.densidades,
      gastos: +dados.gastos
    }; }, function(dados) {
    for ( i = 0; i < dados.length; i++) {
      indMed14.push(dados[i].indMed14);
      densidades.push(dados[i].densidades);
      gastos.push(dados[i].gastos);
    }
    ready = true;
  });

In this example I'm reading a csv and creating 3 arrays (indMed14, densidades and gastos) that will be passed to the painting routine later on the road. The ready variable is important because d3.dsv is asynchronous, so the cloropleth buttons will be active only when the data is ready.

Later on the html you have the calls to the painting routine:

<div class="col-md-4">
  <button onclick="pintaMapa('linear', apaga, [0,1], ['#ffffff', '#ffffff'], 'Rio de Janeiro', 'região', textoOriginal)">
    Limpa Mapa
  </button>
</div>
<div class="col-md-4">
  <button onclick="if (ready) pintaMapa( 'linear', indMed14, [d3.min(indMed14), d3.max(indMed14)], ['#a50f15', '#fee5d9'], 'Indicador de Saúde 2014', 'mapa', isaude)">
    Indicador Saude 2014
  </button>
  <button onclick="if (ready) pintaMapa( 'log', gastos, [d3.min(gastos),d3.max(gastos)], ['#eff3ff', '#08519c'], 'Gastos dos Públicos Totais', 'mapa', gpub)">
    Gastos Publicos
  </button>
  <button onclick="if (ready) pintaMapa( 'log', densidades, [d3.min(densidades), d3.max(densidades)], ['#feedde', '#a63603'], 'Densidade Demográfica', 'mapa', tdd)">
    Densidade Demografica
  </button>

At the end of the painting routine, after creatind the color function (cor(d)) you just bind the data you have [.data(variavel)] to the "path.fil3" elements that were created to paint your cloropleth.

// Binds data to the SVG map and paints the cloropleth
d3.selectAll("path.fil3").data(variavel)
  .transition()
  .duration(1000)
  .ease("cubic-in-out")
  .style("fill", function(d) {return cor(d)})
  .text(function(d,i) { return(nMunicipio(i) + ": " + d)});

The full code can be found at http://stelling.cc/svgExample The SVG embedded on this example was taken from Wikipedia and adapted to my needs (adding ids and classes to fit my requirements).


Related Query

More Query from same tag