plot.geo map turns upside down

Community Help
1

Hello,

I am trying to show a few cities on the map of India. The moment I do that, the map turns upside down. What is happening?

Thanks in advance for any help,
Rini

2

It’s because you are passing longitude and latitude values that are strings, and so Plot assumes that these are ordinal values rather than quantitative values. You can fix that by setting the typed option to true when you load the CSV:

cities = FileAttachment("cities.csv").csv({typed: true})

You can also explicitly tell Plot that x and y should be quantitative, but it’s generally better to fix your data on load.

Plot.plot({
  marks: [
    Plot.geo(states, { fill: "skyblue", stroke: "#e2e2e2" }),
    Plot.dot(cities, { x: "longitude", y: "latitude", r: 5 })
  ],
  x: { type: "linear" },
  y: { type: "linear" },
  height: 800, // Update canvas height
  width: 800, // Update canvas width
  margin: 50 // Update margins
})

Yet another way to fix this problem is to apply a map projection. That way you can choose a suitable projection instead of treating it as abstract planar coordinates (which could have a weird aspect ratio). This also disables the axes.

untitled - 2024-02-14T193404.888
untitled - 2024-02-14T193404.8881664Ă—1664 147 KB

Plot.plot({
  projection: {
    type: "mercator",
    domain: states
  },
  marks: [
    Plot.geo(states, { fill: "skyblue", stroke: "#e2e2e2" }),
    Plot.dot(cities, { x: "longitude", y: "latitude", r: 5 })
  ],
  height: 800, // Update canvas height
  width: 800, // Update canvas width
  margin: 50 // Update margins
})

But I’d add the {typed: true} so that your data has good types in any case.

1 Like
3

@mbostock

Thanks so much!
I understand the importance of {typed:true} now.

On an unrelated note, I can really use some help with my other questionhttps://talk.observablehq.com/t/network-graph-of-selection/8766. Whenever you get a chance. Thanks in advance…