D3 choropleth state map data update on button click

Question

I have created a choropleth state map using the d3,datamaps and topojson. I am having issues changing the original map's data based on a button click. The preferred way is to just refresh the original map's data inside the change function. Instead, I have the button execution functions eliminate the div containing the map, then recreate the div, and then completely generate a new map (see my code below). This works, but I am thinking that there is a much easier and sophisticated way of refreshing the data. Any help would be appreciated.

<!DOCTYPE HTML>
<html>
<head>
      <script src='js/d3.min.js'></script>
      <script src='http://d3js.org/topojson.v1.min.js'></script>
      <script src='js/datamaps.all.min.js'></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <style>
          #map{height:400px; width: 600px; border-style: solid; border-color:white;} 

                 #floating-panel1 {
              position: absolute;
              top: 10px;
              left: 1%;
              z-index: 5;
              /*background-color: #fff;*/
              padding: 5px;
              border: 1px solid #999;
              text-align: center;
              font-family: 'Roboto','sans-serif';
              line-height: 30px;
              padding-left: 1px;
            }
    </style>

    <script>

        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%'}};



//initialize map with cost data
var map;
   $(document).ready(function(){
         map = new Datamap({
        scope: 'usa',
        element: document.getElementById('map'),
        geographyConfig: {
            highlightBorderColor: '#bada55',
            popupTemplate: function(geography, data) {
                return "<div class='hoverinfo'>" + geography.properties.name + ' %:' +  data.Percentage + ' '
            },
            highlightBorderWidth: 3
        },
        fills: {
            'light': '#ffad99',
            'medium': '#ff704d',
            'heavy': '#ff3300',
            defaultFill: '#ffebe6'
        },
        data:costChange

    });
        map.labels();

});


//button click removes map and recreated with cost data
    function cstchng(){
        $("#map").remove();
        $("#title").after("<div id='map'></div>");
         map = new Datamap({
            scope: 'usa',
            element: document.getElementById('map'),
            geographyConfig: {
                highlightBorderColor: '#bada55',
                popupTemplate: function(geography, data) {
                    return "<div class='hoverinfo'>" + geography.properties.name + ' %:' +  data.Percentage + ' '
                },
                highlightBorderWidth: 3
            },
            fills: {
                'light': '#ffad99',
                'medium': '#ff704d',
                'heavy': '#ff3300',
                defaultFill: '#ffebe6'
            },
            data:costChange

        });
        map.labels();
    }

//button click removes map and recreated with rate data
   function rtchng(){
         $("#map").remove();
        $("#title").after("<div id='map'></div>");
         map = new Datamap({
            scope: 'usa',
            element: document.getElementById('map'),
            geographyConfig: {
                highlightBorderColor: '#bada55',
                popupTemplate: function(geography, data) {
                    return "<div class='hoverinfo'>" + geography.properties.name + ' %:' +  data.Percentage + ' '
                },
                highlightBorderWidth: 3
            },
            fills: {
                'light': '#ffad99',
                'medium': '#ff704d',
                'heavy': '#ff3300',
                defaultFill: '#ffebe6'
            },
            data:rateChange

        });
       map.labels();
    }

        </script>
</head>

<body>
     <div id="floating-panel1">
    <button type="button" onclick = "cstchng()">Cost Change</button>
    <button type="button" onclick = "rtchng()">Range Change</button>
     </div>
    <div id="title"></div>
    <div id="map"></div>

</body>
</html>

score 1 · Accepted Answer · edited May 23 '17 at 10:28

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>
      <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
      <script src='datamaps.all.min.js'></script>
</head>

<body>
<button id="costChange" onclick='updateCost(costChange)'>Cost Change</button>
<button id="rateChange" onclick='updateCost(rateChange)'>Range Change</button>
<div id="container" style="position: relative; width: 500px; height: 300px;">
</div>
<script>

var election = new Datamap({

  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%'}
      };

  function updateCost(arg) {
    election.updateChoropleth(null, {reset: true});
    election.updateChoropleth(arg);
  }

</script>
</body>
</html>

Hopefully this helps, let me know if you have any questions :)

D3 choropleth state map data update on button click

1 Answers1

Linked