D3 Choropleth State Map Data Update On Button Click
Solution 1:
I think I may be able to help. In cases like these when you have some redundant code, there is usually, as you mention, an easier way to accomplish things. If you look at the documentation and examples from datamaps you can go through them one by one to get a better understanding of how the map building process works, it should help for any future projects.
I took a look at their choropleth and state label examples to figure out how to do this. The way you have the onclick attribute defined is ok. You only need to render the map once though. To update it, you can use their .updateChoropleth() method as seen in the choropleth example. Also, it doesn't seem like you need jQuery. For some reason, I have had some issues in the past with trying to use jQuery and d3 together. In most cases you can accomplish what you need with d3. Here's a link to another question on SO about that: What is the difference between D3 and jQuery?
I created a plunker so that you can see the output to what I did. Let me know if this is what you were trying to do:
http://plnkr.co/edit/Uaau983AQUbMoknZoROf?p=preview
and here's the code I used for reference:
<!DOCTYPE HTML><html><head><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script><scriptsrc='datamaps.all.min.js'></script></head><body><buttonid="costChange"onclick='updateCost(costChange)'>Cost Change</button><buttonid="rateChange"onclick='updateCost(rateChange)'>Range Change</button><divid="container"style="position: relative; width: 500px; height: 300px;"></div><script>var election = newDatamap({
scope: 'usa',
element: document.getElementById('container'),
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
return'<div class="hoverinfo">' + geography.properties.name + 'Percentage:' + data.electoralVotes + ' '
},
highlightBorderWidth: 3
},
fills: {
'light': '#ffad99',
'medium': '#ff704d',
'heavy': '#ff3300',
defaultFill: '#ffebe6'
},
data:{}
});
election.labels();
var costChange = {
'AR':{'fillKey':'heavy','Percentage':'236%'},
'IL':{'fillKey':'light','Percentage':'5%'},
'IN':{'fillKey':'medium','Percentage':'20%'},
'KS':{'fillKey':'heavy','Percentage':'76%'},
'KY':{'fillKey':'heavy','Percentage':'289%'},
'MS':{'fillKey':'heavy','Percentage':'110%'},
'NC':{'fillKey':'heavy','Percentage':'261%'},
'TN':{'fillKey':'heavy','Percentage':'57%'},
'VA':{'fillKey':'heavy','Percentage':'57%'},
'WA':{'fillKey':'medium','Percentage':'18%'},
'WI':{'fillKey':'medium','Percentage':'18%'}
};
var rateChange = {'AL':{'fillKey':'medium','Percentage':'10%'},
'AR':{'fillKey':'medium','Percentage':'16%'},
'AZ':{'fillKey':'light','Percentage':'7%'},
'CO':{'fillKey':'heavy','Percentage':'44%'},
'CT':{'fillKey':'heavy','Percentage':'132%'},
'DE':{'fillKey':'light','Percentage':'6%'},
'FL':{'fillKey':'heavy','Percentage':'62%'},
'GA':{'fillKey':'medium','Percentage':'17%'},
'ID':{'fillKey':'heavy','Percentage':'66%'},
'IN':{'fillKey':'light','Percentage':'4%'},
'KS':{'fillKey':'medium','Percentage':'11%'},
'KY':{'fillKey':'medium','Percentage':'24%'},
'LA':{'fillKey':'medium','Percentage':'25%'},
'MA':{'fillKey':'heavy','Percentage':'55%'},
'MD':{'fillKey':'heavy','Percentage':'28%'}
};
functionupdateCost(arg) {
election.updateChoropleth(null, {reset: true});
election.updateChoropleth(arg);
}
</script></body></html>Hopefully this helps, let me know if you have any questions :)
Post a Comment for "D3 Choropleth State Map Data Update On Button Click"