datamaps
Customizable SVG map visualizations for the web in a single Javascript file using D3.js
DataMaps a jquery plugin for geographical map data visualizations using d3.js, svg.
if any knows how to use datamaps, can help me build a simple world map with only continents (so without states)? I need to only click continents.
Thank you!
Source: (StackOverflow)
I am using D3.js DataMaps for a Bubbles map. The problem of my map is that the biggest bubble is stacked on top of every other bubble. How do i get to sort these bubbles based on the radius??
Source: (StackOverflow)
I am following the datamaps docs and I am trying to set an onClick listener to the bubbles I am rendering on the svg. Now, the svg div has the following sub tags:
<svg>
<g id class="datamaps-subunits">..</g>
<g id class="bubbles">..</g>
</svg>
The docs say this should be done in the following way, for the countries listed on the map:
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunits').on('click', function() {
alert("hello");
});
}
And this works fine, while trying to click on particular regions on the map.
Trying to attach the same listener to bubbles class does nothing..
done: function(datamap) {
datamap.svg.selectAll('.bubbles').on('click', function() {
alert("hello");
});
}
Source: (StackOverflow)
I am creating US map using D3 , i have to implemented three level zooming , from nation map to state , from state to county and from county to zip boundaries.
I am already done with first two level , I used AngularJS directives.
GIST URL : D3 two level Zoom
Now I need to implement third level of getting in to county and showing all zip level area borders. I already did lot of search for zip level geometry , I found one helpful question in stackoverflow , but this data has only state name associated , I also need county name , since I only need to draw boundaries for particular county which was clicked, any clue how to get proper will be helpful. I found US Atlas project , though having hope it will help me, can't understand it properly.
Source: (StackOverflow)
This is a weird one.
I can do the following with a standard world map and it works on click of the change button:
$("#change").on("click", function() {
map.updateChoropleth({
"USA": "#ff0f00",
"IRQ": "#0fa0fa",
"FRA": "blue",
"UKR": "orange",
"MEX": "#00ffaf"
});
});
If I use my custom topojson file I can do this and the change is implemented when the map loads:
map.updateChoropleth({
"Choptank River": {fillKey: "Poor"}
});
But as soon as I try to wrap it in a click event handler (exactly as I have it for the world map example), it doesn't work:
$("#change").on("click", function() {
console.log("test");
map.updateChoropleth({
"Choptank River": {fillKey: "Poor"}
});
});
The test alert is triggered fine, but the map chloropleth is not updated.
Thanks for any ideas!
Source: (StackOverflow)
I'm working on a US map that's created with datamaps on d3. I want to place a marker on the selected states based on the mouse XY. The #map-bubble is the marker that I want to place on the map.
I'm not sure if I'm using the correct approach for doing this, but the way I've chosen - there doesn't seem to be a way to grab the mouse XY in the on click bind. The only alternative I've found is this way: Javascript - Track mouse position which seems cumbersome.
var map = new Datamap({
element: document.getElementById("map"),
scope: 'usa',
fills: {
defaultFill: "#ABDDA4",
win: '#0fa0fa'
},
geographyConfig: {
dataUrl: null, //if not null, datamaps will fetch the map JSON (currently only supports topojson)
hideAntarctica: true,
borderWidth: 1,
borderColor: '#FDFDFD',
popupTemplate: function(geography, data) { //this function should just return a string
return '';
},
popupOnHover: false, //disable the popup while hovering
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2
},
data: {
'TX': { fillKey: 'win' },
'FL': { fillKey: 'win' },
'NC': { fillKey: 'win' },
'CA': { fillKey: 'win' },
'NY': { fillKey: 'win' },
'CO': { fillKey: 'win' }
},
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(event, geography) {
console.log(event.pageY)
var bubbly = $("#map-bubble");
bubbly.css({
position:"absolute",
top: event.pageY,
left: event.pageX
});
console.log(bubbly)
bubbly.fadeIn("slow");
console.log(geography.properties.name);
});
}
});
Source: (StackOverflow)
How do I get a list of all countries supported by d3.js datamaps?
Following the example from the datamaps demo page, I am using this configuration for my map:
var basic = new Datamap({
element: document.getElementById("basic")
fills: {
defaultFill: "#ABDDA4",
authorHasTraveledTo: "#fa0fa0"
},
data: {
USA: { fillKey: "authorHasTraveledTo" },
JPN: { fillKey: "authorHasTraveledTo" },
ITA: { fillKey: "authorHasTraveledTo" },
CRI: { fillKey: "authorHasTraveledTo" },
KOR: { fillKey: "authorHasTraveledTo" },
DEU: { fillKey: "authorHasTraveledTo" },
}
});
How do I get a list of all countries included in datamaps (in addition to "USA", "JPN", "ITA", etc.)?
Source: (StackOverflow)
I read the guide->updating after initial drawing part at https://github.com/markmarkoh/datamaps but updating doesn't work using string values (it works fine using fillKey property instead). I read this closed issue too: markmarkoh/datamaps#118 but nothing.
This is my code:
v
ar map = new Datamap({
element: document.getElementById('world'),
geographyConfig: {
dataUrl: 'world-topo-min.json',
borderColor: 'black'
},
scope: 'countries',
fills: {
defaultFill: 'rgb(255,255,255)',
someKey: '#08306b'
},
data: {
'108': {fillKey: 'someKey'}
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([30, 34.4444])
.scale(170)
.translate([element.offsetWidth / 2 , element.offsetHeight/2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
}
});map.updateChoropleth({'57': {fillKey:'someKey'},'116': '#08306b'});
Country identificated by id=57 is ok, country 116 doesn't change
I pull data from a PHP-array like this:
myarray=[[57,32],[116,12]]
Country 57 has value 32, country 116 has value 12 and so on.
I ignore myarray right now because I want to solve updatechoropleth issue first
Obviously, I'm going to create a linear scale to put right colors into countries path but this is another thing.
Help me please
Thank you guys!
Source: (StackOverflow)
I use global map DataMaps.js. I want to implement Mouse Zoom, when mouse wheel moves. There is a example of static zoom:
var zoom = new Datamap({
element: document.getElementById("zoom_map"),
scope: 'world',
// Zoom in on Africa
setProjection: function(element) {
var projection = d3.geo.equirectangular()
.center([23, -3])
.rotate([4.4, 0])
.scale(400)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
.projection(projection);
return {path: path, projection: projection};
}
});
Also, I have event Mouse Wheel:
$('#zoom_map').bind('DOMMouseScroll mousewheel', function(e){
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
console.log("+");
e.preventDefault();
}
else{
console.log("-");
e.preventDefault();
}
});
I tried to concatenate these parts. Also, I tried to change datamaps.js. But, unfortunately, I get fail.
Source: (StackOverflow)
I want to enter the country name as a variable but I can't.
var interval_1=window.setInterval(function() {
var name = "USA";
map.updateChoropleth({
name : colors(Math.random() * 10),
});
}, 2000);
Source: (StackOverflow)
In DataMaps there exist event handlers (mouse-in, mouse-out) for the graphical subunits of the map. I would like to add another event handler that draws arcs on click event. With the existing "arc-plugin" you can draw arcs on another layer on top of the map by calling a function with the arc data from outside of DataMaps. What would be the best practice of adding an arc creation function within DataMaps that could be used by an event handler?
Source: (StackOverflow)
I am trying to create a dashbord and I have used choropleth datamap which I got from here.
My problem is that when I try to resize the datamap graph to fit into my container,it is not getting scaled properly.
So how to scale the map,to a container of
width=100% and height = 450px.
hope you can help me out here
Source: (StackOverflow)
I have a Datamap object map:
var map = new Datamap({
geographyConfig: { dataUrl: 'fr.json'},
...
});
map looks like this from the browser inspector:
console.log(map);
> Object { options: Object, svg: Array[1], path: n(), projection: t(), customTopo: Object }
I can get options, svg and path, but I can't get customTopo.
console.log(map.customTopo);
> undefined
Source: (StackOverflow)
I'm attempting to center the legend below a choropleth map of the United States (an example of a generic map similar to what I've created). I'm not very familiar with JS or CSS, but I poked around in the datamaps.all.min.js file located in the R-3.2.1\library\rMaps\libraries\datamaps\js directory hoping to be able to locate the tag for the legend and its default values. I found this:
.datamaps-legend dt, .datamaps-legend dd {
float: left;
margin: 0 3px 0 0;
} .datamaps-legend dd {
width: 20px;
margin-right: 6px;
border-radius: 3px;
} .datamaps-legend {
padding-bottom: 20px;
z-index: 1001;
position: absolute;
left: 4px;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
I changed it to this and included it in my header.html file:
.datamaps-legend dt, .datamaps-legend dd {
float: left;
margin: 0 3px 0 0;
} .datamaps-legend dd {
width: 20px;
margin-right: 6px;
border-radius: 3px;
} .datamaps-legend {
padding-bottom: 20px;
z-index: 1001;
position: absolute;
left: 40px;
font-size: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
It appears that these changes are either wrong or ineffective possibly because there is some other .css file taking precedence over these instructions. Currently, the relevant portion of the map looks like this:
The problems include 1) what to me seems like an inexplicable bold and italic treatment of the text edit: fixed that in my .css file and 2) although "position: absolute", the graphic flows over onto the tables below.
Source: (StackOverflow)
I need to get the datamap world graph added to the "maps-world" id in the div element as given below:
<div id="maps-world" class="clearfix map" style="position: relative; width: 80%; max-height: 450px;"></div>
Following are the dependencies Im adding (all the dependencies are made local)
<script src="js/twitter/maps/d3.v3.min.js"></script>
<script src="js/twitter/maps/datamaps.world.min.js"></script>
<script src="js/twitter/maps/topojson.v1.min.js"></script>
Following is the code which I am using to generate the world graph:
var map = new Datamap({
scope: 'world',
element: document.getElementById('maps-world'),
projection: 'mercator',
height: 500,
fills: {
defaultFill: '#f0af0a',
lt50: 'rgba(0,244,244,0.9)',
gt50: 'red'
},
data: {
USA: {fillKey: 'lt50' },
RUS: {fillKey: 'lt50' },
CAN: {fillKey: 'lt50' },
BRA: {fillKey: 'gt50' },
ARG: {fillKey: 'gt50'},
COL: {fillKey: 'gt50' },
AUS: {fillKey: 'gt50' },
ZAF: {fillKey: 'gt50' },
MAD: {fillKey: 'gt50' }
}
})
map.arc([
{
origin: {
latitude: 40.639722,
longitude: 73.778889
},
destination: {
latitude: 37.618889,
longitude: -122.375
}
},
{
origin: {
latitude: 30.194444,
longitude: -97.67
},
destination: {
latitude: 25.793333,
longitude: -0.290556
}
}
], {strokeWidth: 2});
map.bubbles([
{name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
{name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
{name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},
], {
popupTemplate: function(geo, data) {
return "<div class='hoverinfo'>It is " + data.name + "</div>";
}
});
I'm receiving the following error in my console.
Datamap is undefined
Since it was the example that was given in the datamap-github-page named Choropleth,it was expected to be working fine.
Can any body help me on this.
Source: (StackOverflow)