CODEWITHSUNDEEP
javascriptd3.jstopojson
Dinosaurius
Dinosaurius

Reputation: 8628

How to change the names of provinces on the map?

I have a map created using D3 and JavaScript. I want to translate the names of Spain's provinces to another language, for example, to English. By default it is Spanish. I would prefer to make these changes manually, however, I don't know which file should I edit. I tried to edit hdi.json and provincias.json, but it does not work (I get the provinces colored in black without any title, like it is not recognized). Any help is highly appreciated.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.nombre{
  stroke: #000;
  stroke-width: 0.5px
}
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.provinceNames
{
  font-size: 0.9em;
  font-family: "Lato";
}

.legendLinear
 {
  font-family: "Lato";
  fill:#000000;
}

.legendTitle {
  font-size: 1em;
}
#tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 10px;
  width: 200px;
  height: 70px;
  color: white;
  font-family: sans-serif;
  font-size: 1.0em;
  font-weight: bold;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  border-radius:5px;
  transition: .2s;
}

</style>
<body>
<div id="container">
  <div id="tooltip">
  </div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.7.0/d3-legend.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.3.5/conicConformalSpain-proj.min.js"></script>
<script>

var width = 1000,
    height = 800;

var projection = d3.geo.conicConformalSpain().scale(width*5).translate([200+width/2, 100+height/2]);
var graticule = d3.geo.graticule().step([2, 2]);

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

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


    svg.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", path);

//var g = svg.append("g");

d3.json("provincias.json", function(error, provincias) {
  d3.json("hdi.json", function(error, hdi) {
  var land = topojson.feature(provincias, provincias.objects.provincias);

  var color = d3.scale.threshold()
              .domain([1, 10, 100, 1000, 10000, 100000, 300000])
              .range(["#feebe2","#e5d1ff","#ba93ef", "#8D4CE5","#6100E5","#4d00b7","#C94D8C"]); 

    svg.selectAll(".nombre")
      .data(land.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("class","nombre")
      .style("fill",function(d){ return color(hdi[d.properties.nombre]) })
      .on("mouseover", function(d){
        //Show the tooltip
        var x = d3.event.pageX;
        var y = d3.event.pageY - 40;

        d3.select("#tooltip")
          .style("left", x + "px")
          .style("top", y + "px")
          .style("opacity", 1)
          .text( "... " + d.properties.nombre + " ... " + hdi[d.properties.nombre]);
      })
      .on("mouseout", function(){
        //Hide the tooltip
        d3.select("#tooltip")
          .style("opacity", 0);
      });

    svg
      .append("path")
        .style("fill","none")
        .style("stroke","#000")
        .attr("d", projection.getCompositionBorders());

    svg.append("g")
      .attr("class", "provinceNames")
      .selectAll("text")
      .data(land.features)
      .enter()
      .append("svg:text")
      .text(function(d){
        return d.properties.nombre;
      })
      .attr("x", function(d){
          return path.centroid(d)[0];
      })
      .attr("y", function(d){
          return  path.centroid(d)[1];
      })
      .attr("text-anchor","middle")
      .attr('fill', 'black');


    d3.select("svg").append("g")
      .attr("class", "legendLinear")
      .attr("transform", "translate(240,700)");

   var logLegend = d3.legend.color()
       .title("...")
       .shapeHeight(20)
       .shapeWidth(90)
       .shapeRadius(10)
       .labels([0, 10, 100, 1000, 10000, 100000, 300000])
       .orient("horizontal")
       .labelFormat(d3.format(".00f"))
       .labelAlign("start")
       .scale(color);

    svg.select(".legendLinear")
      .call(logLegend);

    });
});


</script>

Upvotes: 1

Views: 113

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

It seems that you're using this JSON for the provinces in Spain.

If that's correct, the file is "provincias.json" and this is the path for the names:

provincias.objects.provincias.geometries[index].properties.nombre

Where index is the index you want in the geometries array.

Check this demo:

d3.json("https://cdn.rawgit.com/rveciana/5919944/raw//provincias.json", function(provincias) {
  provincias.objects.provincias.geometries.forEach(function(d) {
    console.log(d.properties.nombre)
  })
})
<script src="https://d3js.org/d3.v4.min.js"></script>

Upvotes: 1

Related Questions