worldmap = { //var dropdownOptions = ["~25位", "~50位", "~100位", "~200位"]; var twntyfive = d3.select("#container").append('button'); var fifty = d3.select("#container").append('button'); var oneHundred = d3.select("#container").append('button'); var twoHundred = d3.select("#container").append('button'); twntyfive.text('~25位').attr('value', function(d) { return 'twntyfive'; }); fifty.text('~50位').attr('value', function(d) { return 'fifty'; }); oneHundred.text('~100位').attr('value', function(d) { return 'oneHundred'; }); twoHundred.text('~200位').attr('value', function(d) { return 'twoHundred'; }); var twentyFive_max = datas[0].value; var fifty_max = mapdata50[0].value; var oneHundred_max = mapdata100[0].value; var twoHundred_max = mapdata200[0].value; function generateMapping(max_val, num) { console.log(max_val); var map = {}; var colors = d3 .scaleLinear() .domain([0, max_val]) .range(['#BCE1DF', '#006660']); for (var i = 0; i < datacountries.length; i++) { map[datacountries[i].code] = { fillColor: '#dddddd' }; map[datacountries[i].code].tooltip = " "; } var words = []; if (num == 'a') { for (var i = 0; i < datas.length; i++) { map[datas[i].name] = { fillColor: colors(datas[i].value) }; words[i] = " "; for (var j = 0; j < dataAll.length; j++) { if (dataAll[j].code == datas[i].name) { words[i] = words[i] + "
" + dataAll[j].nameJp; } } map[datas[i].name].tooltip = datas[i].value + "校" + words[i]; } } if (num == 'b') { for (var i = 0; i < mapdata50.length; i++) { map[mapdata50[i].name] = { fillColor: colors(mapdata50[i].value) }; words[i] = " "; for (var j = 0; j < dataAll.length; j++) { if (dataAll[j].code == mapdata50[i].name) { words[i] = words[i] + "
" + dataAll[j].nameJp; } } map[mapdata50[i].name].tooltip = mapdata50[i].value + "校" + words[i]; } } if (num == 'c') { for (var i = 0; i < mapdata100.length; i++) { map[mapdata100[i].name] = { fillColor: colors(mapdata100[i].value) }; words[i] = " "; for (var j = 0; j < dataAll.length; j++) { if (dataAll[j].code == mapdata100[i].name) { words[i] = words[i] + "
" + dataAll[j].nameJp; } } map[mapdata100[i].name].tooltip = mapdata100[i].value + "校" + words[i]; } } if (num == 'd') { for (var i = 0; i < mapdata200.length; i++) { map[mapdata200[i].name] = { fillColor: colors(mapdata200[i].value) }; words[i] = " "; for (var j = 0; j < dataAll.length; j++) { if (dataAll[j].code == mapdata200[i].name) { words[i] = words[i] + "
" + dataAll[j].nameJp; } } map[mapdata200[i].name].tooltip = mapdata200[i].value + "校" + words[i]; } } return map; } const theNumberOfUniversities = generateMapping(twentyFive_max, 'a'); const code_totalLiquorFillKey = generateMapping(fifty_max, 'b'); const code_beerServingsFillKey = generateMapping(oneHundred_max, 'c'); const code_wineServingsFillKey = generateMapping(twoHundred_max, 'd'); var currentFillKey = {}; var map = new Datamap({ element: document.getElementById('container'), projection: 'mercator', geographyConfig: { popupTemplate: function(geography, data) { return ( '

' + geography.properties.name + '

' + data.tooltip + '

' ); } }, fills: { defaultFill: '#dddddd' }, data: currentFillKey }); map.updateChoropleth(theNumberOfUniversities); twntyfive.on("click", function(d) { map.updateChoropleth(theNumberOfUniversities); }); fifty.on("click", function(d) { map.updateChoropleth(code_totalLiquorFillKey); }); oneHundred.on("click", function(d) { map.updateChoropleth(code_beerServingsFillKey); }); twoHundred.on("click", function(d) { map.updateChoropleth(code_wineServingsFillKey); }); }