Before I blow my brains out, is there a simple D3 map template

Nat

Joined
Nov 18, 2014
Messages
555
Likes
345
Degree
2
I swear I've downloaded and messed around with 15 D3 Map templates from Github and I can't figure them out. I figured I would be able to find a template and start tweaking it and be able to swap out a state data csv file, but that doesn't seem to be the case. Half the stuff isn't even rendering and the other stuff keeps breaking as soon as I start changing things.

I'll admit, my javascript knowledge is below bare-minimum, but I can usually hack something together.
 
I've used jVectorMap: http://jvectormap.com along with HighCharts: http://www.highcharts.com

Have fun. Neither was a walk in the park if you want to get really interactive, which I did. Not sure it'll be any better than the D3 stuff.
 
  • Like
Reactions: Nat
Yes there is: US State Map

Screen_Shot_2017_02_20_at_8_49_38_PM.png


The trick on that one is you have to remove the random numbers being generated and then associate the state with the high,lows,medium weather or whatever. Example:

Code:
sampleData['FL']={low:12, high:50, avg:999, color: '#ff0099'};
^^ For Florida. Don't quote me, I haven't tested this I'm just eyeballing it.

--
Here is the whole gallery: D3 Gallery
 
I've used jVectorMap: http://jvectormap.com along with HighCharts: http://www.highcharts.com

Have fun. Neither was a walk in the park if you want to get really interactive, which I did. Not sure it'll be any better than the D3 stuff.

Thanks :smile: I may look into it... after I log a few more hours on D3 :D

Yes there is: US State Map

Screen_Shot_2017_02_20_at_8_49_38_PM.png


The trick on that one is you have to remove the random numbers being generated and then associate the state with the high,lows,medium weather or whatever. Example:

Code:
sampleData['FL']={low:12, high:50, avg:999, color: '#ff0099'};
^^ For Florida. Don't quote me, I haven't tested this I'm just eyeballing it.

--
Here is the whole gallery: D3 Gallery

Awesome... I've got that exact one downloaded twice. I think I broke it the first time trying to convert the random generation function to loop through a csv file and a second time trying to make it responsive.

I'll re-focus my efforts on this one. Your Florida code works, but only if the foreach function is left in and it is added afterward. My intuition thought it could render one value at a time, but I guess not. Worst comes to worse I can plug in 50 values and somehow hack in a social share button.
 
I'll re-focus my efforts on this one. Your Florida code works, but only if the foreach function is left in and it is added afterward. My intuition thought it could render one value at a time, but I guess not. Worst comes to worse I can plug in 50 values and somehow hack in a social share button.

From my logical you most likely have to do all 50 states first and then can remove the loop, otherwise you'll have places with no data.
 
From my logical you most likely have to do all 50 states first and then can remove the loop, otherwise you'll have places with no data.

I was thinking I've got 50 baskets and I dump #FF9900 data into 1 of them and then display the bundle, I'm expecting to see one basket with color. I was equating this with pretty printing a partially filled object.

--

Alright, I've a super lame hacky version working. It's something, and better than nothing.

I really had an epiphany the other day about next level content vs "content." It's such an interesting contrast when the beginner's advice is "keep pushing out content and eventually you'll start getting winners." And marketing gods like the SERPWoo team produce a handful of blog posts/podcasts because they reach such a high-quality level it's impossible to churn it out any faster.

I'm going to keep learning more and more about this interactive stuff and figure out new ways I can incorporate it into pages.
 
Second vote for highcharts here.

Dead simple to use, saved my butt in a huuuuge project last year.
D3 is nice, but can be a bit much.
 
  • Like
Reactions: Nat
Back