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

Problems with Custom Fill #216

Closed vibrantlife closed 8 years ago

vibrantlife commented 9 years ago

Hi there,

Firstly, love datamaps. This is my second time using it for a project.

I'm having some problems with a custom map. I am drawing a map of Texas with its counties. Each county has a letter grade and i'm attempting to assign the fill based on the county FIPS code (which is a number). Here's the code I'm working with. https://code.stypi.com/2teiuyh0

I use the function at the bottom to generate a new json in the correct format for the data section for the fill. I was following the example you provided here: http://bl.ocks.org/markmarkoh/11331459

I'm currently getting an error: Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': '.48001' is not a valid selector.

I haven't been successful solving this quite yet. I know this selector is on the map and is in the json i'm serving up, so I don't know what the problem is. Suggestions? Thoughts? Ideas?

adrianbj commented 9 years ago

Hi @vibrantlife - my guess would be that it is due to the numeric FIPS code. If you can add a letter to the front of each one, I expect it will work.

vibrantlife commented 9 years ago

@adrianbj It's really weird, that's what I thought initially, but when I move the json from a separate file to the data selector in datamaps it works. My code is gargantuan and it takes a little longer than I want to code, but the map renders fine. I need for the json to remain remote however. This is a fast quick fix, but I am building this for a client and they'll be uploading an updated file quarterly.

markmarkoh commented 9 years ago

@vibrantlife that actually sounds right.

There is an old bug that in the initial draw I use class selectors, which can't start with a number, but in later updates I use data-attr, which can start with a number. It's an inconsistency (a bug). Both approaches should use the data-attr selection, which might not be as performant but will allow for ids with numbers.

pabloem commented 9 years ago

Hi @markmarkoh I took a look at the code and I guess this change is not in yet. Do you think you could add it? I'm also having trouble with number-only ids : ) I could add it too, if you let me see an example with the data-attr selection.