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

Is There a Way to Add the Value as Part of the Labels #103

Closed rchaudhuri closed 10 years ago

rchaudhuri commented 10 years ago

Hello,

I just started looking at Datamaps and was very pleased with the flexibility and convenience. One question I had is can I easily show the data value as part of the US state label?

For example, if I have the data below, how can I show the "numberOfThings" with the State code without a user having to hover? I know I can use the map.labels() to show the State codes by themselves, but I also want to show the numberOfThings underneath.

    data: {
        NY: {
            fillKey: 'LOW',
            numberOfThings: 2002
        },
        CA: {
            fillKey: 'MEDIUM',
            numberOfThings: 10381
        }
    },

Thanks

markmarkoh commented 10 years ago

The labels plugin doesn't support that currently, however it is just a plugin and should be fairly straightforward to extend.

This gets tricky though. There isn't that much space in each state to put extra data.

Regardless, here is a quick plugin I made for you to achieve this: http://jsbin.com/uPOyuJU/1335/edit?html,output

Hope this helps, good luck!

rchaudhuri commented 10 years ago

Dude, thanks! Just what I needed, you're right, gets a little tricky for states such as California where the value would go into Nevada. I'll extend the plugin for each State as appropriate and send back to you in a couple of days.

Thanks bro!

fonziemedia commented 4 years ago

Hi @markmarkoh ,

Your plugin doesn't seem to be working anymore, or I might be missing something on jsbin you've linked..

Just wondering if this should still work or if perhaps, there's another way of doing this.

Cheers!

fonziemedia commented 4 years ago

Please disregard my previous comment @markmarkoh I forgot to initiate the plugin with map.labelsWithData() 🤦 Thanks a lot for this!