search

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

Responsive Maps and Continuous Legends #45

Closed ramnathv closed 8 years ago

ramnathv commented 10 years ago

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?

ramnathv commented 10 years ago

I managed to modify the legend plugin to achieve a continuous legend. It is a hack based on the article I linked to earlier. Here is a jsfiddle with code to reproduce it. I also like the threshold key legends by Mike, and think it will be useful to write more flexible legend plugins.

img

PS. The plugins idea is supercool. It makes it really easy to extend datamaps without having to dig into the core code base.

markmarkoh commented 10 years ago

I'm glad you were able to use the plugin system!

The technique used for the responsive map looks like listening for window.onresize and updating the geographies drawn. If I were to put that in the library, I'd probably have drawOnWindowResize boolean.

Typically the best way to make the map look good on mobile or desktop is using a % width and media queries for height for the container element. It would just break on window resizing.

ramnathv commented 10 years ago

Thanks for a prompt reply. I understand the technical challenges with making maps responsive. If you can provide me with an example of how you would make this work using media queries, I can try to see if I can send a pull request after implementing the same.

I am working on a blog post on how to use datamaps with bindings for rCharts to create interactive choropleths from R. I was able to hook it up with AngularJS to allow animation and more control for time-series choropleths. Here is a draft of the post. Please DO NOT share as it is still work-in-progress and I still need to add attributions, especially for datamaps. If you have any feedback/comments, I would appreciate that.

markmarkoh commented 10 years ago

That looks incredible. I'm very excited that you went with Datamaps for that portion of rCharts. Also glad you were able to use the new updateChoropleth function!

Let me know when this is finished and I'll add a link to rCharts from the Datamaps project page.

ramnathv commented 10 years ago

Thanks. I hope to complete the post this week and will then share. I will keep you posted.

ramnathv commented 10 years ago

Connected issue with the animated map. updateChoropleth allows me to update colors, but the hover data is still tied to the original data. Is there a way to update the hover data also dynamically?

hoprocker commented 9 years ago

Has this been resolved?