Comments (5)
There isn't a way to do that currently, but how would you expect it to work? Like Google Analytics where they show a big bubble, and then when you click you zoom and see the smaller bubbles?
Offsetting currently needs to be done by adjusting the LONG/LAT, which isn't ideal. I'm curious to see some examples of how it should work, though.
from datamaps.
Something I had came across the other day when looking at mapping solution options, was a method to alter a map created with the d3 solution to combine like Google does. http://vis4.net/blog/posts/clean-your-symbol-maps/
That would be 1 option which would probably be best for most. I think for what I am trying to accomplish would need something more similar to an adjustment to the LONG/LAT to put the bubbles close to each other, but not on top of one another. Maybe something similar to the first step of the link (" Finding intersecting symbols") but instead of merging them in step 2, setting a +/- offset to the Long/Lat to slightly move the bubble. Since I am dealing with actual locations and not statistical data as in the example, merging the bubbles wouldn't exactly accomplish the desired affect.
from datamaps.
The opacity is a nice trick, you can set the opacity of datamaps bubbles, but yeah, it doesn't work in every situation.
Merging is another workable option, but it adds a few layers of complexity. For instance, now you have to zoom and provide some generic logic for merging.
Opacity + LONG/LAT offset seems like the decent 80% solution. Merging/zooming the 20% solution.
from datamaps.
I am making a variation of the bombs datamap and I would like to add a label to the bubbles instead of the popups. Is that possible?
from datamaps.
Yes! I wrote up a custom plugin for you that puts a label inside the circle. It's working but not totally pretty, so I'll leave it to you to finish. This isn't part of the core library itself, it just uses the Datamap's plugin system.
Checkout it out:
http://jsbin.com/ociMiJu/1/edit?html,output
It's at the bottom.
Repeating here:
//standard plugin interface. Function takes 3 params - a layer ('<g>', data, and the options object)
function handleBombLabels ( layer, data, options ) {
var self = this;
options = options || {};
d3.selectAll(".datamaps-bubble")
.attr("data-foo", function(datum) {
//convert lat/lng into x/y
var coords = self.latLngToXY(datum.latitude, datum.longitude)
layer.append("text")
.attr("x", coords[0] - 10) //this could use a little massaging
.attr("y", coords[1])
.style("font-size", (options.fontSize || 10) + 'px')
.style("font-family", options.fontFamily || "Verdana")
.style("fill", options.labelColor || "#000")
.text( datum[options.labelKey || 'fillKey']);
return "bar";
});
}
//register the plugin to datamaps
d.addPlugin('bombLabels', handleBombLabels);
//call the plugin. The 2nd param is options and it will be sent as `options` to the plugin function.
//Feel free to add to these options, change them, etc
d.bombLabels(bombs, {labelColor: '#FFF', labelKey: 'fillKey'});
from datamaps.
Related Issues (20)
- Some of Countries missing in DataMap HOT 1
- I want to draw lines/paths on india map? Can someone please guide?
- get lat lng somehow from click event
- Missing Nantucket and Marthas Vineyard in Datampas.usa.js HOT 1
- Is it possible to change border colour of specific countries using updateChoropleth?
- Unrecognizable src script HOT 3
- Function to use custom map data HOT 1
- choropleth map color not updating when highlight on hover set to true
- React Native
- Custom-map-data-multi-layer example no longer works
- Text on bubbles
- Part of Russia is coming to the left of America HOT 1
- unable to import datamaps in angular app HOT 2
- How to have 2 maps using the same source, but with different information on hover tooltip? HOT 1
- Zoom to specified latitude and longitude
- Adding datamap to Vue 3
- `animationEnd` and `animationStart` as a configurable option for `map.arcConfig`
- rendering issues in safari 16.3
- Simple installation question
- Map for switzerland (swz?) not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from datamaps.