maps

<!DOCTYPE html>
<html lang="en">

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>
	  	   
	</select>   
	</div>
    <div class="container">
        <div class="container_left" id="us">
        </div>
        <div id="legend">
        </div>
        <div class="container_right" id="au">
        </div>
    </div>

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 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