Built with blockbuilder.org
xxxxxxxxxx<html lang="en"><head> <meta charset="utf-8"> <title>Maps</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.min.js"></script> <script type='text/javascript' src='https://code.jquery.com/jquery.min.js'></script> <style type="text/css"> body { margin: 0; font-family: 'Univers LT Pro', 'Neo Sans Pro'; font-weight: 400; overflow: hidden; display: flex; flex-direction: column; } div.container { display: flex; margin: 1 auto; align-items: center; justify-content: center; width: 100vw; height: 100vh; } div.select { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-width: 100vw; } h1 { font-family: 'Neo Sans Pro'; display: flex; margin: 1 auto; align-items: center; justify-content: center; } div.container_left { width: 50vw; height: 80vh; } div.container_right { width: 50vw; height: 80vh; } div.legend { width: 20vw; height: 80vh; } svg { background-color: white; position: relative; } .states:hover { opacity: .7; } .d3-tip { line-height: 1; padding: 8px; max-width: 400px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 1px; } .d3-tip:after { box-sizing: border-box; display: inline; font-size: 8px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\25BC"; position: absolute; text-align: center; } .d3-tip.n:after { margin: -1px 0 0 0; top: 100%; left: 0; } </style></head><body> <h1>State by State Analysis of Selected Innovation Indicators</h1> <div class = "select"> <select id = "opts"> <option value="edu">Education results</option> <option value="rd" >Business R&D spending</option> <option value="exports">Tech exports</option> <option value="internet">Internet connectivity</option> <option value="patent">Patents</option> <option value="bachelors">Bachelor's degree</option> <option value="deals">Venture capital deals</option> <!-- and so on... --> </select> </div> <div class="container"> <div class="container_left" id="us"> </div> <div id="legend"> </div> <div class="container_right" id="au"> </div> </div> <script type="text/javascript"> d3.select("#opts").on("change", change) //data //exam results var edu_au = { "New South Wales": 57.67, "Victoria": 61.33, "Queensland": 57.67, "South Australia": 58.33, "Western Australia": 62.67, "Tasmania": 46.67, "Northern Territory": 48.67, "Australian Capital Territory": 64.67, "title": "Average standardized exam results (%)" }; var edu_us = { "Massachusetts": 47, "New Hampshire": 45.67, "Minnesota": 44.33, "Vermont": 43.33, "Utah": 42, "New Jersey": 40.67, "Wisconsin": 40, "Montana": 39, "Nebraska": 39, "North Dakota": 38.33, "Connecticut": 38, "Virginia": 38, "Washington": 38, "Pennsylvania": 37.5, "Indiana": 37.33, "Idaho": 37, "Iowa": 37, "Maine": 36.33, "Ohio": 36.33, "Wyoming": 36.33, "Maryland": 36, "South Dakota": 36, "Missouri": 35.67, "Oregon": 35.33, "Kansas": 34, "Kentucky": 33, "Rhode Island": 33, "Tennessee": 33, "Colorado": 36, "Michigan": 32.33, "Texas": 32.33, "Illinois": 31.67, "Alaska": 31.5, "New York": 31.33, "North Carolina": 31.33, "Arizona": 30.33, "Delaware": 30, "Florida": 29.67, "Georgia": 29.67, "South Carolina": 28.33, "Arkansas": 26.67, "Nevada": 26.67, "Oklahoma": 26.67, "California": 26.33, "Hawaii": 26.33, "West Virginia": 25, "Alabama": 21.33, "Mississippi": 20.67, "New Mexico": 20.67, "Louisiana": 20.5, "District Of Columbia": 19, }; // //r+d business expenditure by GSP var rd_au = { "Tasmania": 0.70, "Queensland": 0.62, "Western Australia": 0.87, "South Australia": 0.77, "New South Wales": 1.19, "Victoria": 1.14, "Australian Capital Territory": 0.25, "Northern Territory": 0.31, "title": "R & D expenditure as per cent of GSP" }; var rd_us = { "California": 3.81, "Massachusetts": 3.68, "Washington": 3.62, "Michigan": 3.29, "Delaware": 2.99, "Oregon": 2.79, "Connecticut": 2.47, "New Jersey": 2.01, "Idaho": 1.97, "Minnesota": 1.87, "Utah": 1.79, "Indiana": 1.57, "Arizona": 1.51, "Illinois": 1.46, "Pennsylvania": 1.30, "Wisconsin": 1.30, "Missouri": 1.26, "North Carolina": 1.26, "Rhode Island": 1.17, "Colorado": 1.15, "Iowa": 1.10, "New Hampshire": 1.10, "Kansas": 1.02, "Ohio": 1.00, "Texas": 0.94, "New York": 0.81, "Maryland": 0.77, "Georgia": 0.76, "Vermont": 0.66, "South Carolina": 0.56, "Virginia": 0.56, "Nebraska": 0.47, "Maine": 0.45, "Montana": 0.43, "Alabama": 0.42, "Florida": 0.42, "Tennessee": 0.42, "Kentucky": 0.39, "Wyoming": 0.36, "North Dakota": 0.35, "Oklahoma": 0.34, "New Mexico": 0.28, "South Dakota": 0.24, "Nevada": 0.23, "Arkansas": 0.22, "West Virginia": 0.22, "Mississippi": 0.17, "Hawaii": 0.15, "Louisiana": 0.13, "Alaska": 0.06, }; // //tech exports var exports_au = { "New South Wales": 1542, "Victoria": 1045, "Queensland": 189, "South Australia": 0, "Western Australia": 591, "Tasmania": 0, "Northern Territory": 84, "Australian Capital Territory": 0, "title": "Tech exports ($AUD millions)" }; var exports_us = { "Alabama": 2182.62, "Alaska": 38.06, "Arizona": 8875.24, "Arkansas": 1934.10, "California": 33144.76, "Colorado": 1118.11, "Connecticut": 9017.99, "Delaware": 2088.25, "District of Columbia": 1467.62, "Florida": 16964.90, "Georgia": 11874.98, "Hawaii": 355.63, "Idaho": 2301.28, "Illinois": 8644.60, "Indiana": 10381.70, "Iowa": 490.57, "Kansas": 3148.87, "Kentucky": 15403.22, "Louisiana": 596.39, "Maine": 548.11, "Maryland": 2644.60, "Massachusetts": 6528.82, "Michigan": 2151.79, "Minnesota": 4269.67, "Mississippi": 1585.96, "Missouri": 2926.36, "Montana": 310.00, "Nebraska": 718.74, "Nevada": 716.25, "New Hampshire": 2050.07, "New Jersey": 4784.22, "New Mexico": 1781.34, "New York": 4838.08, "North Carolina": 7029.53, "North Dakota": 0.00, "Ohio": 7313.08, "Oklahoma": 1113.01, "Oregon": 2302.49, "Pennsylvania": 6283.97, "Rhode Island": 31.28, "South Carolina": 8935.77, "South Dakota": 0.00, "Tennessee": 8868.21, "Texas": 35978.09, "Utah": 1272.51, "Vermont": 367.28, "Virginia": 1780.03, "Washington": 64442.15, "West Virginia": 516.42, "Wisconsin": 3013.87, "Wyoming": 5.95, }; // //internet var internet_au = { "New South Wales": 82.5, "Victoria": 83.7, "Queensland": 83.7, "South Australia": 80.6, "Western Australia": 85.1, "Tasmania": 78, "Northern Territory": 79, "Australian Capital Territory": 89.9, "title": "Per cent of population with Internet connectivity at home" }; var internet_us = { "Alabama": 69.8, "Alaska": 79.3, "Arizona": 69.4, "Arkansas": 72.0, "California": 73.6, "Colorado": 75.0, "Connecticut": 77.6, "Delaware": 77.8, "District of Columbia": 77.2, "Florida": 70.7, "Georgia": 74.7, "Hawaii": 71.2, "Idaho": 81.4, "Illinois": 81.3, "Indiana": 76.9, "Iowa": 79.5, "Kansas": 73.9, "Kentucky": 75.3, "Louisiana": 75.3, "Maine": 78.2, "Maryland": 79.3, "Massachusetts": 76.7, "Michigan": 75.1, "Minnesota": 83.1, "Mississippi": 69.8, "Missouri": 76.6, "Montana": 75.0, "Nebraska": 78.7, "Nevada": 78.2, "New Hampshire": 82.3, "New Jersey": 77.9, "New Mexico": 72.1, "New York": 72.8, "North Carolina": 70.4, "North Dakota": 72.5, "Ohio": 73.6, "Oklahoma": 70.7, "Oregon": 80.5, "Pennsylvania": 71.4, "Rhode Island": 78.9, "South Carolina": 73.2, "South Dakota": 72.6, "Tennessee": 69.4, "Texas": 71.4, "Utah": 80.6, "Vermont": 82.5, "Virginia": 78.0, "Washington": 79.1, "West Virginia": 71.7, "Wisconsin": 82.5, "Wyoming": 80.0, }; // //patent var patent_au = { "Australian Capital Territory":15, "New South Wales":12, "Northern Territory":2, "Queensland":7, "South Australia":7, "Tasmania":3, "Victoria":9, "Western Australia":9, "title": "Number of patent registrations per 100,000 people" }; var patent_us = { "Alabama": 10, "Alaska": 5, "Arizona": 36, "Arkansas": 8, "California": 102, "Colorado": 54, "Connecticut": 60, "Delaware": 38, "Florida": 19, "Georgia": 24, "Hawaii": 9, "Idaho": 50, "Illinois": 39, "Indiana": 30, "Iowa": 32, "Kansas": 31, "Kentucky": 15, "Louisiana": 9, "Maine": 15, "Maryland": 30, "Massachusetts": 99, "Michigan": 56, "Minnesota": 79, "Mississippi": 5, "Missouri": 18, "Montana": 14, "Nebraska": 16, "Nevada": 24, "New Hampshire": 63, "New Jersey": 51, "New Mexico": 20, "New York": 43, "North Carolina": 33, "North Dakota": 16, "Ohio": 31, "Oklahoma": 14, "Oregon": 57, "Pennsylvania": 30, "Rhode Island": 31, "South Carolina": 19, "South Dakota": 13, "Tennessee": 15, "Texas": 35, "Utah": 45, "Vermont": 72, "Virginia": 24, "Washington": 86, "West Virginia": 7, "Wisconsin": 35, "Wyoming": 19 }; // bachelors degree var bachelors_us = { "Alabama": 14.6, "Alaska": 17.4, "Arizona": 17.2, "Arkansas": 13.9, "California": 19.7, "Colorado": 23.7, "Connecticut": 20.6, "Delaware": 19, "Florida": 17.3, "Georgia": 17.9, "Hawaii": 19.8, "Idaho": 17.1, "Illinois": 19.6, "Indiana": 15, "Iowa": 18.4, "Kansas": 19.3, "Kentucky": 12.9, "Louisiana": 14.6, "Maine": 18.6, "Maryland": 20.2, "Massachusetts": 22.4, "Michigan": 16.2, "Minnesota": 22.1, "Mississippi": 12.8, "Missouri": 16.4, "Montana": 19.2, "Ndiana": 15, "Nebraska": 20.3, "Nevada": 15, "New Hampshire": 22, "New Jersey": 22.5, "New Mexico": 14.7, "New York": 19.2, "North Carolina": 18, "North Dakota": 20.2, "Ohio": 16, "Oklahoma": 15.4, "Oregon": 18.6, "Pennsylvania": 17.1, "Rhode Island": 18.2, "South Carolina": 16.3, "South Dakota": 18.4, "Tennessee": 15.8, "Texas": 17.9, "Utah": 20.4, "Vermont": 22, "Virginia": 20.7, "Washington": 20.6, "West Virginia": 11.1, "Wisconsin": 17.9, "Wyoming": 17.1, } var bachelors_au = { "Australian Capital Territory": 22.2, "New South Wales": 16, "Northern Territory": 11.7, "Queensland": 13, "South Australia": 13, "Tasmania": 11.2, "Victoria": 16.5, "Western Australia": 14.8, "title": "Per cent with a bachelors degree (citizens over 25 (US) and over 15 (AU))", } // us VC cases var deals_us = { "Alabama": 17, "Alaska": 0, "Arizona": 112, "Arkansas": 12, "California": 8286, "Colorado": 481, "Connecticut": 279, "Delaware": 43, "District of Columbia": 119, "Florida": 231, "Georgia": 287, "Hawaii": 11, "Idaho": 15, "Illinois": 450, "Indiana": 82, "Iowa": 19, "Kansas": 115, "Kentucky": 53, "Louisiana": 24, "Maine": 36, "Maryland": 380, "Massachusetts": 1967, "Michigan": 244, "Minnesota": 179, "Mississippi": 6, "Missouri": 134, "Montana": 12, "Nebraska": 36, "Nevada": 29, "New Hampshire": 60, "New Jersey": 269, "New Mexico": 63, "New York": 1873, "North Carolina": 250, "North Dakota": 8, "Ohio": 336, "Oklahoma": 28, "Oregon": 172, "Pennsylvania": 927, "Puerto Rico": 2, "Rhode Island": 68, "South Carolina": 38, "South Dakota": 6, "Tennessee": 312, "Texas": 849, "Utah": 196, "Vermont": 42, "Virginia": 356, "Washington": 597, "West Virginia": 12, "Wisconsin": 93, "Wyoming": 1, } var deals_au = { "New South Wales": 65, "Queensland": 15, "South Australia": 10, "Victoria": 50, "Western Australia": 8, "title": "Number of venture capital deals (2010-2014)", } //Width and height of svg var w = 600; var h = 500; //Define map projection - Aus var projection = d3.geo.mercator() .center([132, -28]) .translate([w / 2, h / 2]) .scale(600); //Define map projection - US var projection1 = d3.geo.albersUsa() .translate([w / 2, h / 2]) .scale(700); //Define path generator var path_aus = d3.geo.path() .projection(projection); var path_us = d3.geo.path() .projection(projection1); //Create SVG var svg_aus = d3.select("#au") .append("svg") .attr("preserveAspectRatio", "xMidYMid") .attr("viewBox", "0 0 " + w + " " + h); //Create SVG var svg_us = d3.select("#us") .append("svg") .attr("preserveAspectRatio", "xMidYMid") .attr("viewBox", "0 0 " + w + " " + h); // run change() on load change(); // on select in dropdown menu, change data function change() { var data = edu_au; var data1 = edu_us; var colour = ['#eff3ff','#bdd7e7','#6baed6','#2171b5']; if (this.value == "edu") { var data = edu_au; var data1 = edu_us; var colour = ['#eff3ff','#bdd7e7','#6baed6','#2171b5']; } else if (this.value == "rd") { var data = rd_au; var data1 = rd_us; var colour = ['#fee5d9','#fcae91','#fb6a4a','#cb181d']; } else if (this.value == "exports") { var data = exports_au; var data1 = exports_us; var colour = ['#ccebc5','#a8ddb5','#7bccc4','#4eb3d3','#2b8cbe','#08589e']; } else if (this.value == "internet") { var data = internet_au; var data1 = internet_us; var colour = ['#eff3ff','#bdd7e7','#6baed6','#2171b5']; } else if (this.value == "patent") { var data = patent_au; var data1 = patent_us; var colour = ['#ccebc5','#a8ddb5','#2b8cbe','#08589e']; } else if (this.value == "bachelors") { var data = bachelors_au; var data1 = bachelors_us; var colour = ['rgb(239,237,245)','rgb(188,189,220)','rgb(117,107,177)']; } else if (this.value == "deals") { var data = deals_au; var data1 = deals_us; var colour = ['rgb(254,217,118)','rgb(254,178,76)','rgb(253,141,60)','rgb(252,78,42)','rgb(227,26,28)','rgb(189,0,38)','rgb(128,0,38)']; }; var us_tip = d3.tip() .attr('class', 'd3-tip') .offset([-5, 0]) .html(function(d) { return "State: "+ d.properties["name"] +"<br>" + "Value: " + data1[(d.properties["name"])]; }); var aus_tip = d3.tip() .attr('class', 'd3-tip') .offset([-5, 0]) .html(function(d) { return "State: "+ d.properties["STATE_NAME"] +"<br>" + "Value: " + data[(d.properties["STATE_NAME"])]; }); svg_aus.call(aus_tip); svg_us.call(us_tip); svg_aus.selectAll("#aus").remove(); svg_us.selectAll("#us").remove(); d3.json("https://raw.githubusercontent.com/zmeers/australia_json/master/australia-map.geo.json", function(json) { svg_aus.selectAll("path_aus") .data(json.features) .enter() .append("path") .attr("d", path_aus) .attr('class', 'states') .on('mouseover', aus_tip.show) .on('mouseout', aus_tip.hide) .attr("stroke", "#fff") .attr("stroke-width", "1px") .attr("d", path_aus) .attr("fill", function(d) { return linear(data[(d.properties["STATE_NAME"])]); }) }); // Load GeoJSON data and merge with states data d3.json("https://raw.githubusercontent.com/zmeers/usa_json/master/us-states.json", function(json) { svg_us.selectAll("path_us") .data(json.features) .enter() .append("path") .attr("d", path_us) .attr('class', 'states') .style("stroke", "#fff") .on('mouseover', us_tip.show) .on('mouseout', us_tip.hide) .attr("stroke-width", "1px") .attr("d", path_us) .attr("fill", function(d) { return linear(data1[(d.properties["name"])]); }) }); // Merge US and Australian data to find min and max value new_dat = d3.values(data).concat(d3.values(data1)); new_dat_min = d3.min(d3.values(new_dat)); new_dat_max = d3.max(d3.values(new_dat)); // Log new_dat arrays in console console.log(new_dat) console.log(d3.min(d3.values(new_dat))); console.log(d3.min(d3.values(new_dat))); console.log(d3.max(d3.values(new_dat))); var linear = d3.scale.quantize() .domain([new_dat_min, new_dat_max]) .range(colour); svg_aus.append("g") .attr("class", "legendLinear") .attr("transform", "translate(20,20)"); var legendLinear = d3.legend.color() .shapeWidth(20) .labelFormat(d3.format(",.0f")) .cells([9]) .orient('vertical') .scale(linear) .title(data["title"]); svg_aus.select(".legendLinear") .call(legendLinear); }; </script></body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js
https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js
https://code.jquery.com/jquery.min.js