# Plot \[Longitude,Latitude\] points on top of a chloropeth/spike map

**URL:** <https://talk.observablehq.com/t/plot-longitude-latitude-points-on-top-of-a-chloropeth-spike-map/4635>\
**Category:** Show and tell\
**Created:** [February 14, 2021, 5:41am UTC](https://talk.observablehq.com/t/plot-longitude-latitude-points-on-top-of-a-chloropeth-spike-map/4635 "2021-02-14T05:41:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chonghorizons](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/chonghorizons/32/4172_2.png) [@chonghorizons](https://talk.observablehq.com/u/chonghorizons)\
**Post date:** [February 14, 2021, 5:41am UTC](https://talk.observablehq.com/t/plot-longitude-latitude-points-on-top-of-a-chloropeth-spike-map/4635/1 "2021-02-14T05:41:04Z")

</div>

[I’m new to d3 and ObservableHQ. Posting this just to share in case someone has the same task]

REMAINING QUESTION: Is there an easier way to get the scale and translate parameters from the map or pre-set topoJSON? Or, do we just need to know that `counties-albers-10m.json` needs

```auto
d3.geoAlbersUsa().scale(1300).translate([487.5, 305])

```

* * *

GOAL: I wanted to take the spike map from mbostock and overlay some extra points, where I just have the Longitude and Latitude.

INTERMEDIATE STEP: I needed a way to covert the [long,lat] coordinates to the x,y coordinates in the USA map. I just didn’t know the right command.

ANSWER:  
This didn’t work: `projection = d3.geoAlbersUsa() // cities are off a few inches`  
This **does** work: `projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])` which is well documented here: [U.S. Map / D3 / Observable](https://observablehq.com/@d3/u-s-map) and here: [GitHub - topojson/us-atlas: Pre-built TopoJSON from the U.S. Census Bureau.](https://github.com/topojson/us-atlas)

See the Code:

> **[Spike Map FORK - direct Longitude and Latitude plotting](https://observablehq.com/d/d56a029f54521440)**
>
> GOAL: Trying to figure out how to overlay some \[long,lat\] points. Can't figure out the projection. ANS: d3.geoPath(d3.geoAlbers().scale(1300).translate(\[487.5, 305\])) was the magic code to convert from longitude and latitude to the xy coordinates on...

Once I set it correctly, `projection.centroid(GeoJSONObject)` returned the x,y coordinates in the right pixel viewport for the [Choropleth / D3 / Observable](https://observablehq.com/@d3/choropleth) and [Spike Map / D3 / Observable](https://observablehq.com/@d3/spike-map)

Time spent: About 1.5hrs of happy learning and reading the d3-geo docs.

---

<div class="post-metadata">

**Author:** ![chonghorizons](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/chonghorizons/32/4172_2.png) [@chonghorizons](https://talk.observablehq.com/u/chonghorizons)\
**Post date:** [March 3, 2021, 2:47am UTC](https://talk.observablehq.com/t/plot-longitude-latitude-points-on-top-of-a-chloropeth-spike-map/4635/2 "2021-03-03T02:47:22Z")

</div>

I’m kinda confused now about the projections.

I think the `counties-albers-10m.json` is right as above, but now I see some people using this:

```auto
us = d3.json('https://pbogden.com/mapping/data/topojson/us-10m.json')
projection = d3.geoAlbersUsa().scale(1280).translate([480, 300])

```

from here: [My U.S. Map (Canvas) / pbogden / Observable](https://observablehq.com/@pbogden/my-u-s-map-canvas)

OR

```auto
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@1/us/10m.json")

```

from [Have you heard of Hunt Brothers Pizza? / Robert Lesser / Observable](https://observablehq.com/@rlesser/have-you-heard-of-hunt-brothers-pizza)

So, it seems like sometimes we use the (487.5, 305), and sometimes the (480,300).

## Figured it out:

the `us-10m.json` is an older version of `npm/us-atlas` that (presumably) uses that projection.  
See

- [us-atlas - npm](https://www.npmjs.com/package/us-atlas/v/1.0.2)
- [GitHub - topojson/us-atlas at 29a7e6ae50dbb323e5dad5428475673a8bca0dcd](https://github.com/topojson/us-atlas/tree/29a7e6ae50dbb323e5dad5428475673a8bca0dcd)

Confusing, but normal version change issues.

---

<div class="post-metadata">

**Author:** ![chonghorizons](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/chonghorizons/32/4172_2.png) [@chonghorizons](https://talk.observablehq.com/u/chonghorizons)\
**Post date:** [March 3, 2021, 2:54am UTC](https://talk.observablehq.com/t/plot-longitude-latitude-points-on-top-of-a-chloropeth-spike-map/4635/3 "2021-03-03T02:54:41Z")

</div>

Found this notebook that also uses the `d3.geoAlbers().scale(1300).translate([487.5, 305])`

> **[Finding Latitude and Longitude on Projected TopoJSON](https://observablehq.com/@christophermanning/finding-latitude-and-longitude-on-projected-topojson)**
>
> You can find the latitude and longitude of a point on states-albers-10m.json (or any preprojected TopoJSON file) by using a separate projection with the same settings as the projected TopoJSON. This is necessary because us/10m.json is already...

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [March 3, 2021, 3:07am UTC](https://talk.observablehq.com/t/plot-longitude-latitude-points-on-top-of-a-chloropeth-spike-map/4635/4 "2021-03-03T03:07:54Z")

</div>

The scale/translation is a bit of an arbitrary choice. You should look at the source details of a specific map to be sure about it.

Be warned also that these are a spherical-earth version of a conic equal-area projection. They are not quite equal-area for an ellipsoid of revolution, and won’t precisely match ellipsoidal projections used in other software.
