markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Bubbles from dataurl #323

Open PeteHockey opened 8 years ago

PeteHockey commented 8 years ago

I'm trying to map out a couple hundred locations on datamaps through the latitude and longitude properties in bubbles. Some of my attributes change every day and I want to change the bubble colors based on whether something is completed in that specific location or not.

Would there be a way to do this? Or is there a way to link the bubble data to a json or csv?

Thanks!

thesnakemittens commented 7 years ago

I've had success building the bubbles based on a JSON file this way:

d3.json("/api/data/map", function (error, mapdata) {
        map.bubbles( mapdata.map,{ 
        popupTemplate: function (geo, data) {
            return "<div class='hoverinfo'>" + data.city + ", " + data.country + "</div>";
        }
    })

Where the API endpoint contained a JSON file formatted like so:

{ "map": 
    [ "city": "New York City", 
      "country": "USA", 
      "latitude": "---", 
      "longitude": "---", 
      "radius": "48", 
      "fillKey": "usa" 
] }