1

I'm following the canonical "Let’s Make a Map" tutorial- but to spice things up I'm melding it with one about Germany- so I'm working with slightly different data.

Things are so far working out- barring this minor hiccup- but now I've come to the section "#Displaying Places" which is where you're supposed to show the names of the cities on the map.

The problem is happening in the following line:

   .text(function(d) {
        if (d.properties.name!=="Berlin" &&
            d.properties.name!=="Bremen"){

                //for some reason this is undefined
                console.log(d.properties.name);
                return d.properties.name;
        }
    })

The value of that console.log(d.properties.name); is always undefined and I can't figure out why!

I suppose it's because name is out of scope for d- but I don't know how to fix it. Is that right? If so- how to fix it? if not- what is the real problem?

Here is what my code looks like- it's pretty concise:

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.subunit{fill:#fff;}
.subunit.Nordrhein-Westfalen{ fill: #aba; }
.subunit.Baden-Württemberg{ fill: #bab; }
.subunit.Hessen{ fill: #bcb; }
.subunit.Niedersachsen{ fill: #cbc; }
.subunit.Thüringen{ fill: #cdc; }
.subunit.Hamburg{ fill: #dcd; }
.subunit.Schleswig-Holstein{ fill: #ded; }
.subunit.Rheinland-Pfalz{ fill: #ede; }
.subunit.Saarland{ fill: #efe; }
.subunit.Sachsen-Anhalt{ fill: #fef; }
.subunit.Brandenburg{ fill: #aaa; }
.subunit.Mecklenburg-Vorpommern{ fill: #bbb; }
.subunit.Bayern { fill: #ccc; }
.subunit.Sachsen { fill: #ddd; }
.subunit.Bremen { fill: #eee; }
.subunit.Berlin { fill: #fff; }

.subunit-boundary {
  fill: none;
  stroke: #777;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}


.place,
.place-label {
  fill: #444;
  font-size:14px;
}

text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  pointer-events: none;
}


</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 1160;

var projection = d3.geo.mercator()
    .center([10.5, 51.35])
    .scale(3000)
    .translate([width / 2, height / 2]);

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

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


d3.json("de.json", function(error, de) {

    //colouring the different subunits
    svg.selectAll(".subunit")
       .data(topojson.feature(de, de.objects.subunits).features)
       .enter().append("path")
       .attr("class", function(d) {
        // console.log(d.properties.name);
        return "subunit " + d.properties.name;
       })
       .attr("d", path);

    //adding a border to the states
    svg.append("path")
        .datum(topojson.mesh(de, de.objects.subunits, function(a,b) {
            if (a!==b ||
                a.properties.name === "Berlin"||
                a.properties.name === "Bremen"){
                    var ret = a;
                }
                    return ret;
                }))
        .attr("d", path)
        .attr("class", "subunit-boundary");

    // add small black dots for populated places
    svg.append("path")
       .datum(topojson.feature(de, de.objects.places))
       .attr("d", path)
       .attr("class", "place");



    //trying to display names of cities
    svg.selectAll(".place-label")
       .data(topojson.feature(de, de.objects.places).features)
       .enter().append("text")
       .attr("class", "place-label")
       .attr("transform", function(d) {

            //small test
            //console.log( "translate(" + projection(d.geometry.coordinates) + ")" );

            return "translate(" + projection(d.geometry.coordinates) + ")";
        })
       .attr("dy", ".35em")
       .text(function(d) {
            if (d.properties.name!=="Berlin" &&
                d.properties.name!=="Bremen"){

                    //for some reason this is undefined
                    console.log(d.properties.name);
                    return d.properties.name;
            }
        })
       .attr("x", function(d) {
            return d.geometry.coordinates[0] > -1 ? 6 : -6;
        })
       .style("text-anchor", function(d) {
            return d.geometry.coordinates[0] > -1 ? "start" : "end";
       });



});

</script>

Here is the data file.

EDIT

expected

enter image description here

actual

enter image description here

3
  • Look at this answer: stackoverflow.com/questions/37635547/…
    – Klaujesi
    Jun 12, 2016 at 20:51
  • @Klaujesi that wasn't really very helpful- the answer to that question is long and seems very general- is there a specific part that you think I should look at? Jun 12, 2016 at 21:01
  • You has no name on your topojson 'places' just the coordinate of the point. topojson.feature(de, de.objects.places).features <- don't give you a .name just the coordinate of the point
    – Klaujesi
    Jun 12, 2016 at 21:19

2 Answers 2

3

Inside your .topojson you have two section:

  • properties: names of your counties and polygons
  • places: coordinates of the points

You access the first collection with:

de.objects.subunits

And the second collection through:

de.subunits.places

After file is loaded sepearte into two different variables to use it:

d3.json("de.json", function(error, de) {
    var counti = topojson.feature(de, de.objects.subunits)
    var places = topojson.feature(de, de.objects.places)

then referenciate the content adding .features

   .data(counti.features)   // <-- to draw your paths and get the .name: München

or

   .data(places.features)  // <-- to draw the circles for the cities: "coordinates": [11.573039376427117, 48.131688134368815]

Mike's topojson has:

{
  "type": "Feature",
  "properties": {
    "name": "Ayr"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      -4.617021378468872,
      55.44930882146421
    ]
  }

and you has:

 {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Point",
    "coordinates": [
      11.573039376427117,
      48.131688134368815
    ]
  }

Mike's point properties looks like this:

enter image description here

and point coordinates

enter image description here

Your point properties:

enter image description here

Solution:

The right way

  • Open your map on GIS software (ArcGIS-pay, Q-GIS-free) edit and correct paths and points properties and export as TopoJSON again.-

Easy way

  • Go to: geojson.io load your json and add propertie name to your point (16 points, easy cake) and save as TopoJSON again.-

enter image description here

Now you're there correct countie info deleting one column (you has duplicate info)

enter image description here

7
  • I still don't understand how to apply this insight to the function labelled //trying to display names of cities, should I change the line return d.properties.name;? Jun 13, 2016 at 7:58
  • what do you think about this question Jun 13, 2016 at 9:15
  • ah! I just undeleted it :) Jun 13, 2016 at 12:13
  • Did you get your map?
    – Klaujesi
    Jun 13, 2016 at 12:21
  • not really- all the labels are wrong- anyway- I'm not just trying to get a map- I'm trying to get the knowledge of why this mess is happening and how to fix it Jun 13, 2016 at 12:34
1

@Klaujesi has explained the reason pretty well.

I am just going to solve the issue by a work around.

Since there is no property inside the Feature, so you can get the property from de.objects.subunits, like below.

.text(function(d, i) {
//here i is the index of the place.
//de.objects.subunits.geometries[i].properties will give you the name that you are looking for.
            d.properties = de.objects.subunits.geometries[i].properties;
            if (d.properties.name!=="Berlin" &&
                d.properties.name!=="Bremen"){

                    //for some reason this is undefined
                    console.log(d);
                    return d.properties.name;
            }
        })

working code here

3
  • hmm- so then- you just changed the meaning of what that d represents? this is a clever solution certainly- but I the names of the states are actually incorrect for some reason- they display- but not in the right place Jun 13, 2016 at 10:57
  • the names of the cities are associated with Polygon as opposed to the states which are associated with MultiPolygon, right now the names of states are appearing near the circle which represents the capital cities in a kind of random way Jun 13, 2016 at 11:01
  • Not really d.properties was blank i just set its value from de.objects.subunits the reason is that properties inside the feature is blank. May be you can put a screen shot of what you are expecting i don't see any thing coming up randomly. Jun 13, 2016 at 11:02

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.