1

I'm trying to create a circle in my us map. But it's a little bit off. So I tried to translate it with the value from my us.json file. But it's still not correct.

 async svgModifications(svgID) {
    try {
        const projection = d3.geoAlbersUsa();
        const translate = this.us.transform.translate;
        const scale = this.us.transform.scale;
        const states = topojson.feature(this.us, this.us.objects.states);
        const nation = topojson.feature(this.us, this.us.objects.nation);
        const counties = topojson.feature(this.us, this.us.objects.counties);
        const svg = d3.select("svg");
        const path = svg.append("path");
        //map
        path.datum(states).attr("class", "states").attr("d", d3.geoPath());

        //points

        //points
        //const x = this.myData[0].coordinates[0] * scale[0] + translate[0];
        //const y = this.myData[0].coordinates[1] * scale[1] + translate[1];

        svg.append("circle")
            .data(this.myData)
            .attr("r", 10)
            .attr("cx", projection(this.myData[0].coordinates)[0])
            .attr("cy", projection(this.myData[0].coordinates)[1])
            .attr("transform", "translate(-56.77775821661018,12.469025989284091)");

    } catch (e) {
        console.log(e);
    }
}

As you see i tried different approaches, but i don't quite understand, how i should do it.

Let me know if you need anything else

Edit: The US Json

https://d3js.org/us-10m.v1.json

Kira
  • 147
  • 1
  • 13
  • You appear to be using coordinates that are already projected (`states`) and coordinates that are not projected (the circle) - this is why you apply a projection only to the circle. To properly overlay these you need to know what projection the already projected data uses (what coordinate space it is in), otherwise you will have to manually eyeball each circle. See [this](https://stackoverflow.com/q/45067554/7106086) answer for a better explanation, *which probably uses the same `states` data*, or [this](https://stackoverflow.com/q/58035696/7106086) answer on aligning projections. – Andrew Reid Oct 09 '19 at 16:48
  • Thanks I'll check it out. The map is in a json file. i tried to aply it to the circle but it's not working – Kira Oct 09 '19 at 18:08
  • 1
    Without seeing your topojson/geojson, I'm assuming it could be the one used in the linked questions - otherwise, you'll need to source out what projection it uses to be able to align things: it might be easier to source an unprojected geojson/topojson to project with the circle (where topojson/geojson and circle both use lat/longs as their coordinate space). – Andrew Reid Oct 09 '19 at 18:23
  • I added the link to the us json. – Kira Oct 09 '19 at 18:45
  • 1
    Yeah, this is the same topojson used in the linked questions, it's a preprojected US Albers - you need to use the projection used in the first link above ([here](https://stackoverflow.com/a/45067890/7106086)) to align your circle with the proper location on the topojson. But, if you want to resize the map, it'll be better to use an unprojected topojson, such as this [one](https://bl.ocks.org/mbostock/raw/4090846/us.json) and use the same projection for both the circle and the geoPath (`d3.geoPath().projection(projection)`). – Andrew Reid Oct 09 '19 at 18:48
  • Perfect and thanks a lot. Especially for the link – Kira Oct 09 '19 at 18:51
  • 1
    I suggest the use of the unprojected topojson because then you are ensured your features will always align because they share the same coordinate system and the same projection - this will make any panning/zooming/scaling/sizing/etc much easier than trying to work with two different coordinate systems: resizing preprojected features is a bit of a pain, but [doable](https://stackoverflow.com/q/42430361/7106086). – Andrew Reid Oct 09 '19 at 18:52

0 Answers0