markmarkoh / datamaps Goto Github PK

Hello !

Great job!
Exactly what I needed, easy customization and nice render.
I was very satisfied until... don't understand how... map disappeared...
No error, just an empty #container1...
I'm close to go back search another solution. Sadly...
Maybe u can 'throw an eye' on my page in case i missed something evident?

Thx for answer, I will send you the address by mail if you agree

regards,

rE

Hi,

I've been following the examples on the main page, and can get them all working. However, if I modify the bubbles map to use: dataUrl: '/data/uk.topo.json' (and create some bubbles over the UK), the bubbles appear beneath the map. Is there any reason for this, and is there any way and can get them to appear above the map?

Thanks,

Ian

When you add a legend, the fill names are used. I want to see custom labels in the legend.

var map = new Datamap({
  element: document.getElementById("map"),
  scope: 'world',
  projection: 'mercator',
  geographyConfig: {
    highlightOnHover: false,
    popupOnHover: true
  },
  fills: {
    you: "red",
    spouse: "green",
    together: "blue",
    separately: "yellow",
    defaultFill: "#EFEFEF",
  },
  data: world
});

var l = {
  legendTitle: "Where Have We Been",
  defaultFillName: "Whats left",
  labels: {
     you: "Fred",
     spouse: "Wilma",
     together: "Together",
     separately: "Separately",
  },
};
map.legend(l);

Hi,

I'm really struggling to follow your custom maps documentation. If you could include a fully working example of a custom map, that would be amazing.

Thanks

please

I'm very new to D3 and relatives (as well as Javascript), so bear with me...

Using the following imports in the head block of my html:

<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="http://d3js.org/topojson.v1.min.js" type="text/javascript"></script>
<script src="http://datamaps.github.com/scripts/datamaps-all.js"></script>

I cannot seem to create a Datamap object using new Datamap. I'm however successful using new Map. In this case though I have to substitute the element key for el and geographyConfig for geography_config etc. Thus I suspect something is very wrong in how I import Datamaps, but I can't seem to figure it out - Any suggestions would be very welcome...

best

Thomas

Hi, I'm trying to implement the map with bootstrap (to make it responsive) but without success so far, any idea?

<div class="container">
   <h2>Interactive Map</h2>
<div class="row">

<div class="span12">
<div id="container1">

</div>
</div>
</div>
</div>

Add a plugin to render a simple map legend based on your fill data.

Team,

I have got so far in creating a world map http://jsfiddle.net/turbowars/8J9mG/22
Can we have a zoom feature in the jsfiddle similar to this: http://bl.ocks.org/mbostock/2206590

hey Mark,

DataMaps is awesome, thanks so much for building. Was looking to either add or bring back latitude and longitude lines that Mike Bostock usually includes with d3.geo http://bl.ocks.org/mbostock/3682698 -- was looking for a way to add them in datamaps.all.js but just kept breaking things. Is this an easy addition?

let me know, thanks!

I want to add "Iran" to geoJSON,I wonder if there is a simple way to add countries to
this component, the js size will be too large if I add it by code.
thanks in advance

Impressive work. It would be a hit if it could be extended to other countries.

Is there any provision to add custom code in onclick event trigger, like zoom into country map while clicking on it.

I added code to be triggered on click event but how to zoom in or redraw the map as country map

I am new to the D3 mapping. I am trying to figure out how to set up a map for New York State and then show data either by county of congressional district.

I would like to see an example of plotting individual points/markers and then overlaying a heatmap -- maybe https://github.com/mourner/simpleheat or http://www.patrick-wied.at/static/heatmapjs/ ? Maybe this is out of scope?

maybe in the data input structure, allow arrays of countries with the associated fillkeys.

Rendering {radius: 10, latitude: 39.0, longitude: -70.0} on the usa map works just fine. However, if I try to render {radius: 10, latitude: 39.0, longitude: 70.0}, then I receive the following JS error, Uncaught TypeError: Cannot read property '0' of null.

When we update new data on .bubbles([]) all the previous bubble disappears immediately. Can we make the bubble remain there for some time and then remove them from the map using jquery animation and also display a new bubbles at certain time periods?

I'm trying to map a companies locations and was wondering if it is it possible to have a US map that also displays Puerto Rico and the US Virgin Islands? I thought this might be the listing on the main page saying a build is available for "USA & Countries w/ dependencies" but I see no documentation on how to access this.

Any plans to allow the map to redraw automatically when the browser is resized?

I am working on a hexbin plugin for datamaps. Here is my work so far. It is still work-in-progress, but I thought I would share it with you to see if you had any early comments/feedback. Once, the plugin is complete, I will submit a pull request, if you think this would be an interesting feature for datamaps.

Hi, to put it in another way:
how could I easily update the map's data?

Unable to use the legend to toggle elements in an nvd3 chart if datamaps.js is loaded in the head of the doc. Seems to be intercepting the state change and shooting this error:

New State: {"disabled":[false,true]} nv.d3.min.js:1 Uncaught TypeError: Cannot read property '1' of undefined datamaps.js:21 xn.transition datamaps.js:21 (anonymous function) nv.d3.min.js:2 r datamaps.js:21 (anonymous function) nv.d3.min.js:2 u

To reproduce:

1. Go to http://nvd3.org/livecode/
2. Click "Line Plus Bar Chart" example.
3. In Markup(HTML/CSS) tab, add <script src="https://raw.github.com/markmarkoh/datamaps/master/dist/datamaps.js" type="text/javascript"></script>
4. Click "Quantity (left axis) in the legend at the top of the chart (or price)
5. Error will show in console.
6. Sob deeply. ;)

Hi again, I have been playing a lot with the plugin and it works great on Firefox and Chrome but not on IE (all versions).. when I mouseover a region on the map the region disappears.. any idea? is not supported on IE?

Thanks!

Hi guys,

Have a look at: http://jsfiddle.net/turbowars/8J9mG/

Can anyone suggest me a way to enable the hover effect only on selected countries of the world map?

says on the tin.

Hi,

I know for a fact that I have to modify the world.js file to add new countries.
I am unable to figure out what the "arcs" attributes do? how to set attributes for a new country like singapore?

{
"type": "Polygon",
"id": "AFG",
"arcs": [
[0, 1, 2, 3, 4, 5]
],
"properties": {
"name": "Afghanistan"
}
}

Bubble color appears to default to the fill color of the map tile. In the bubble data hash I've tried setting fillKey. fill, and fillColor in hopes of setting the bubble color. Is it even possible?

Datamaps Countries are reacting on Hover, but doesn't come back to original color on MouseOut.
Tested on IE 11.

Is it possible to add links so you can click bubbles and go to a url?

The library is fantastic and I'm using it a lot right now! It would make my work much easier if it was possible to read the data from a .csv file. Did anybody try this before? What am I doing wrong?

I would build a jsfiddle but I don't know how to use a csv file in these IDEs. Sorry about that.

What I'm trying to do is the following:

The csv file looks like this:

ISO,Rate,fillKey
SLE,181.6,>100
HTI,75.6,50-100
ZAF,44.6,20-50
NPL,41.6,20-50
BOL,41.4,20-50

And then I'm trying to use the following:

var data;

d3.csv("data.csv", function (error, csv) {
  if (error) return console.log("error loading the csv: " + error);
  console.log("there are " + csv.length + " elements in my csv set");

  var nestFunction = d3.nest().key(function(d){return d.ISO;});

  data = nestFunction.entries(
                      csv.map(function(d){ 
                                     d.Rate = +d.Rate;  
                                     d.fillKey = d.fillKey;  
                                     return d;  
                                 })

                    ); 

  console.log("there are " + data.length + " elements in my data");

});


var myMap = new Datamap({
    element: document.getElementById('map'),
    scope: 'world',
    geographyConfig: {
        popupOnHover: false,
        highlightOnHover: false
    },
    fills: {
        '>100': '#1f77b4',
        '50-100': '#9467bd',
        '20-50': '#ff7f0e',
        defaultFill: '#EDDC4E'
    }
});

I am digging datamaps and find it to be the perfect solution to quickly generate choropleths and bubble maps. I came across this post on responsive maps with d3.js. Is it possible to adapt some of the ideas from this post to make the maps made with datamaps responsive?

A second issue / question -- if using bubbles to mark locations, is there a way to offset if 2 markers occupy the same space (example; a company has different divisions each represented by a different color marker, but more than 1 division serves the same city. Currently the last one in the backbone collection is on top and the other is not seen.)

I would like to take out the possibility of user error in overlooking multiple locations and having to adjust LONG/LAT coordinates to display both.

Great work.

Thought I'd ask, is it possible to include the datamaps.js file as a script in the latest d3.js (v3) examples, and then use the functionality that it provides? For instance, I have d3 rendering a geojson file and I would like to have datamaps colouring that map as a chloropeth. Is this possible at all? I have a feeling it isn't as yet as the datamaps library is tightly coupled to the data - hence world and usa.

Hi mate,
Impressive work. Could you please point out if there a sample that could help me with following scenario.
I have custom financial regions, Americas, EMEA and APAC. Within these regions I have custom regions for an e.g. Americas has South, East, West and central; APAC has Philippines, India, Australia and New Zealand. Within these sub-regions I have country/state and then individual stores within a country.
What i would like to do is to create one layout for each main region, so when plotting out the Americas, it should not plot the US and Canada with in it - just one region.
Hope I am making sense.
Thanks for your help :)

hi ,how can i add labels directly on the map instead of displaying them as a tooltip?thx!

Now the legend is displayed like this: 1-12 ▒ 13-450 ▓

Would it be possible to have this:
1-12 ┈ 13-450
┈ ▒ ┈┈ ▓
so that the color boxes and the labels are in two rows rather than in one?

An issue with the current design is that if you limit the width in which the legend is shown (to display the legend vertically instead of horizontally) you end up with something like this:
1-12 ▒
13-450 ▓
the color boxes are not aligned horizontally.

(A quick fix might be to swap the color boxed and the text label. i.e.: ▒ 1-12 ▓ 13-450 . That way the color boxes are always vertically aligned if you limit the width like before.
It would be:
▒ 1-12
▓ 13-450 )

Thank you for the great datamaps!

Hi, is there any way to rename or assign an alias name to the "fillKey"? I'm creating a table based on the data shown in the map but I don't want to display the header as "fillkey"

Thanks always for your help and support!

Hey, I noticed that when trying to include datamaps in some sort of AMD pattern, there is an error triggered that I can't seem to figure out

Here is a picture of the network requests showing that all libraries are loading in the intended order:

And here is my RequireJS settings:

app.js:

requirejs.config({
  'baseUrl': 'js/lib',
  'paths': {
    'app': '../app',
    'jquery': 'jquery',
    'd3': 'd3',
    'topojson': 'topojson',
    'domReady': 'domReady',
    'datamaps': 'datamaps'
  },
  shim: {
    d3: {
      exports: 'd3'
    },
    topojson: {
      deps: ['d3'],
      exports: 'topojson'
    },
    datamaps: {
      deps: ['d3', 'topojson']
    }
  }

});

/** Load main module to start app **/
requirejs(["app/main"]);

And here is the main app that is being run:

main.js:

define(function(require) {
  var $ = require('jquery');
  var d3 = require('d3');
  var topojson = require('topojson');
  var domReady = require('domReady');
  var Datamap = require('datamaps');

  domReady(function() {
    // Begin drawing for SVG map
   var map = new Datamap({element: $('#container')[0]});
    });

});

And here is the HTML:

<html>
  <head>
    <script data-main="js/app" src="js/lib/require.js"></script>
  </head>
  <body>
    <h1>Testing</h1>
    <p>Testing the page</p>
    <div id="container" style="position: relative; width: 500px; height: 300px;"></div>
  </body>
</html>

Every time it runs though I get the error:

Uncaught Error: Include d3.js (v3.0.3 or greater) and topojson on this page before creating a new map 

This is what happens when I add the lines:

console.log(d3);
console.log(topojson);

to main.js:

define(function(require) {
  var $ = require('jquery');
  var d3 = require('d3');
  var topojson = require('topojson');
  var domReady = require('domReady');
  var Datamap = require('datamaps');

  domReady(function() {
    // Begin drawing for SVG map
   console.log(d3);
   console.log(topojson);
   var map = new Datamap();
    });

});

which gives the result as follows:

Any ideas of what could be going wrong?

both d3 and topojson are clearly being loaded, been having a heart attack trying to work this out haha

A simple example would be where users can choose a color palette for the choropleth map. How can I modify the configuration for a datamap that has already been drawn?

I'm looking over the source code for the legend, and am trying to understand how custom label text should be specified. I've been able to set the legend title, and the default label, using

map.legend({
    legendTitle : "Total Downloads",
    defaultFillName: "No data",
})

However, the example that ronaldbradford gives in #39 isn't working? Here is how I'm calling the map

  var map = new Datamap({
    element: document.getElementById('map'),
    geographyConfig: {
      popupTemplate: function(geography, data) {
        return '<div class="hoverinfo"><strong>' + geography.properties.name + '<br>' + data.downloads.toLocaleString() + '</strong></div>';
      }
    },
    fills: {
      defaultFill: "#cccccc",
      q0: "rgb(242,242,242)",
      q1: "rgb(173,186,206)",
      q2: "rgb(132,152,181)",
      q3: "rgb(90,117,156)",
      q4: "rgb(49,83,132)",
      q5: "rgb(8,48,107)",
    },
    data: mapdata
  });

  map.legend({
    legendTitle : "Total Downloads",
    defaultFillName: "No data",
    labels: {
      q0: "one",
      q1: "two",
      q2: "three",
      q3: "four",
      q4: "five",
      q5: "six,"
    },
  });

Any pointers would be appreciated -

Is it possible to access the data associated with an element when using the done method to trigger an action. I see that geography is allowed, but wasn't able to get data working, just like in popupTemplate.

Hi all,
Is there any way that I could get it to work for IE 7 & IE 8.
Thanks :)

Hi,

I can't get the live update of arcs to work. I want to change the color of the arcs based on some external data, but the arcs don't update when a call .arc (same with bubbles). I got it to work if I first call .arc with the new options, and then call map.arc([]) to clear all arcs, then the arcs show up with the new colors. Am I missing something?

I had to change to:
"main": "dist/datamaps.all.js"

Once I changed this line the library was loaded correctly with the bower-install grunt task.

Guys,

I am consuming a WCF service which has the data linked to a 2 letter country codes("RU" instead of "RUS") as listed here: http://www.iso.org/iso/home/standards/country_codes/country_names_and_code_elements.htm

Can someone guide me in linking up this data?

If you need as me to use ISO two letters county code, then replace the worldTopo line with that line:

Ooops: the text is too long, so if someone needed it, just replay with email, and I'll send. it

I'd even pay a small fee for this. I'd love to use the data bubbled on a Canada only map (no US).

Thanks.

    <script src="http://datamaps.github.io/scripts/datamaps.world.js"></script>
    […]
    var map = new Datamap({
        element: document.getElementById('container'),
        projection: 'mercator',
        geographyConfig: {
            popupOnHover: false,
            highlightOnHover: false
        },
        arcConfig: {
            strokeColor: '#000000',
            strokeWidth: 10
        }
    });

    map.arc([{
        origin: { latitude: 10, longitude: 20 },
        destination: { latitude: 50, longitude: 90 },
    }])

Arcs are not black and 10px width!

Are there any plans to add mouse events for arcs and on map areas?

Many thanks for this great library!