rpruim/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
    <link rel="stylesheet" href="map.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap&subset=latin-ext"
      rel="stylesheet"
    />
  </head>

  <body>
    <h1>US Demographics</h1>

    <div class="map">
      Color by:
      <select class="map"></select>
    </div>

    <p>How do you like this map?</p>

    <script>
      let width = 500
      let height = 375
      let transitionTime = 3000
      let myProjection = d3
        .geoAlbersUsa() // places Alaska and Hawaii closer to continental US
        .translate([width / 2, height / 2])
        .scale(650)

      let facts = { population: {}, area: {}, density: {} }
      let mapData
      let factsData

      Promise.all([
        d3.json('states.json'),
        d3.csv('state-population.csv'),
      ]).then(function(d) {
        drawMap(d)
        updateMap()
      })

      function drawMap(data) {
        mapData = data[0]
        factsData = data[1]

        // we create three objects that serve as "associative arrays" or "hashes"
        // we will be able to use facts["population"]["Michigan"], for exmample,
        // to get the population of a state. this is a handy trick for accessing
        // information based on a key that is bound to svg elements

        for (i in factsData) {
          facts.population[factsData[i].state] = +factsData[i].population
          facts.area[factsData[i].state] = +factsData[i].area
          facts.density[factsData[i].state] = +factsData[i].density
        }

        let pathGenerator = d3.geoPath().projection(myProjection)

        d3.select('div.map select')
          .on('input', updateMap)
          .selectAll('option')
          .data(Object.keys(facts))
          .enter()
          .append('option')
          .attr('value', d => d)
          .text(d => d)

        d3.select('div.map')
          .style('width', width + 'px')
          .style('height', height + 'px')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .attr('class', 'map')
          .selectAll('path')
          .data(mapData.features)
          .enter()
          .append('path')
          .attr('d', pathGenerator)

        // identify Calvin University.  note use of projection! it takes
        // two coordinates in and returns x and y values in SVG coordinates
        d3.select('div.map svg')
          .selectAll('circle')
          .data([{ lat: 42.9295124, lon: -85.5911216 }])
          .enter()
          .append('circle')
          .attr('cx', d => myProjection([d.lon, d.lat])[0])
          .attr('cy', d => myProjection([d.lon, d.lat])[1])
          .attr('r', 3)
          .style('fill', 'red')
      }

      function updateMap() {
        // get the value from the drop down
        let fact = d3.select('div.map select').property('value')

        // use it to create a color scale
        colorScale = d3
          .scaleSequential()
          .domain(d3.extent(Object.values(facts[fact])).map(Math.log)) // .map(d => Math.log(d))))
          .interpolator(d3.interpolateViridis)

        // apply the color scale to the paths (ie regions) in our map
        d3.selectAll('div.map svg path')
          .transition()
          .duration(transitionTime)
          .style('fill', d =>
            colorScale(Math.log(facts[fact][d.properties.name]))
          )
      }
    </script>
  </body>
</html>

## map.css
body {
  font-family: 'Indie Flower', cursive;
}

div.map {
  border-color: navy;
  border-radius: 5;
  border-width: 3;
  border-style: solid;
}

svg.map {
  fill: blanchedalmond;
  stroke: white;
}

## state-population.csv

          
            state
            population
            area
            density

            
              Alabama
              4858979
              50744
              95.8

            
              Alaska
              738432
              571951
              1.3

            
              Arizona
              6828065
              113635
              60.1

            
              Arkansas
              2978204
              52068
              57.2

            
              California
              39144818
              155959
              251.0

            
              Colorado
              5456574
              103718
              52.6

            
              Connecticut
              3590886
              4845
              741.2

            
              Delaware
              945934
              1954
              484.1

            
              Florida
              20271272
              53927
              375.9

            
              Georgia
              10214860
              57906
              176.4

            
              Hawaii
              1431603
              6423
              222.9

            
              Idaho
              1654930
              82747
              20.0

            
              Illinois
              12859995
              55584
              231.4

            
              Indiana
              6619680
              35867
              184.6

            
              Iowa
              3123899
              55869
              55.9

            
              Kansas
              2911641
              81815
              35.6

            
              Kentucky
              4425092
              39728
              111.4

            
              Louisiana
              4670724
              43562
              107.2

            
              Maine
              1329328
              30862
              43.1

            
              Maryland
              6006401
              9774
              614.5

            
              Massachusetts
              6794422
              7840
              866.6

            
              Michigan
              9922576
              56804
              174.7

            
              Minnesota
              5489594
              79610
              69.0

            
              Mississippi
              2992333
              46907
              63.8

            
              Missouri
              6083672
              68886
              88.3

            
              Montana
              1032949
              145552
              7.1

            
              Nebraska
              1896190
              76872
              24.7

            
              Nevada
              2890845
              109826
              26.3

            
              New Hampshire
              1330608
              8968
              148.4

            
              New Jersey
              8958013
              7417
              1207.8

            
              New Mexico
              2085109
              121356
              17.2

            
              New York
              19795791
              47214
              419.3

            
              North Carolina
              10042802
              48711
              206.2

            
              North Dakota
              756927
              68976
              11.0

            
              Ohio
              11613423
              40948
              283.6

            
              Oklahoma
              3911338
              68667
              57.0

            
              Oregon
              4028977
              95997
              42.0

            
              Pennsylvania
              12802503
              44817
              285.7

            
              Rhode Island
              1056298
              1045
              1010.8

            
              South Carolina
              4896146
              30110
              162.6

            
              South Dakota
              858469
              75885
              11.3

            
              Tennessee
              6600299
              41217
              160.1

            
              Texas
              27469114
              261797
              104.9

            
              Utah
              2995919
              82144
              36.5

            
              Vermont
              626042
              9250
              67.7

            
              Virginia
              8382993
              39594
              211.7

            
              Washington
              7170351
              66544
              107.8

            
              West Virginia
              1844128
              24078
              76.6

            
              Wisconsin
              5771337
              54310
              106.3

            
              Wyoming
              586107
              97100
              6.0

## states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title></title>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
	<link rel="stylesheet" href="map.css" />
	<link
	href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap&subset=latin-ext"
	rel="stylesheet"
	/>
	</head>

	<body>
	<h1>US Demographics</h1>

	<div class="map">
	Color by:
	<select class="map"></select>
	</div>

	<p>How do you like this map?</p>

	<script>
	let width = 500
	let height = 375
	let transitionTime = 3000
	let myProjection = d3
	.geoAlbersUsa() // places Alaska and Hawaii closer to continental US
	.translate([width / 2, height / 2])
	.scale(650)

	let facts = { population: {}, area: {}, density: {} }
	let mapData
	let factsData

	Promise.all([
	d3.json('states.json'),
	d3.csv('state-population.csv'),
	]).then(function(d) {
	drawMap(d)
	updateMap()
	})

	function drawMap(data) {
	mapData = data[0]
	factsData = data[1]

	// we create three objects that serve as "associative arrays" or "hashes"
	// we will be able to use facts["population"]["Michigan"], for exmample,
	// to get the population of a state. this is a handy trick for accessing
	// information based on a key that is bound to svg elements

	for (i in factsData) {
	facts.population[factsData[i].state] = +factsData[i].population
	facts.area[factsData[i].state] = +factsData[i].area
	facts.density[factsData[i].state] = +factsData[i].density
	}

	let pathGenerator = d3.geoPath().projection(myProjection)

	d3.select('div.map select')
	.on('input', updateMap)
	.selectAll('option')
	.data(Object.keys(facts))
	.enter()
	.append('option')
	.attr('value', d => d)
	.text(d => d)

	d3.select('div.map')
	.style('width', width + 'px')
	.style('height', height + 'px')
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'map')
	.selectAll('path')
	.data(mapData.features)
	.enter()
	.append('path')
	.attr('d', pathGenerator)

	// identify Calvin University. note use of projection! it takes
	// two coordinates in and returns x and y values in SVG coordinates
	d3.select('div.map svg')
	.selectAll('circle')
	.data([{ lat: 42.9295124, lon: -85.5911216 }])
	.enter()
	.append('circle')
	.attr('cx', d => myProjection([d.lon, d.lat])[0])
	.attr('cy', d => myProjection([d.lon, d.lat])[1])
	.attr('r', 3)
	.style('fill', 'red')
	}

	function updateMap() {
	// get the value from the drop down
	let fact = d3.select('div.map select').property('value')

	// use it to create a color scale
	colorScale = d3
	.scaleSequential()
	.domain(d3.extent(Object.values(facts[fact])).map(Math.log)) // .map(d => Math.log(d))))
	.interpolator(d3.interpolateViridis)

	// apply the color scale to the paths (ie regions) in our map
	d3.selectAll('div.map svg path')
	.transition()
	.duration(transitionTime)
	.style('fill', d =>
	colorScale(Math.log(facts[fact][d.properties.name]))
	)
	}
	</script>
	</body>
	</html>
	body {
	font-family: 'Indie Flower', cursive;
	}

	div.map {
	border-color: navy;
	border-radius: 5;
	border-width: 3;
	border-style: solid;
	}

	svg.map {
	fill: blanchedalmond;
	stroke: white;
	}
state	population	area	density
Alabama	4858979	50744	95.8
Alaska	738432	571951	1.3
Arizona	6828065	113635	60.1
Arkansas	2978204	52068	57.2
California	39144818	155959	251.0
Colorado	5456574	103718	52.6
Connecticut	3590886	4845	741.2
Delaware	945934	1954	484.1
Florida	20271272	53927	375.9
Georgia	10214860	57906	176.4
Hawaii	1431603	6423	222.9
Idaho	1654930	82747	20.0
Illinois	12859995	55584	231.4
Indiana	6619680	35867	184.6
Iowa	3123899	55869	55.9
Kansas	2911641	81815	35.6
Kentucky	4425092	39728	111.4
Louisiana	4670724	43562	107.2
Maine	1329328	30862	43.1
Maryland	6006401	9774	614.5
Massachusetts	6794422	7840	866.6
Michigan	9922576	56804	174.7
Minnesota	5489594	79610	69.0
Mississippi	2992333	46907	63.8
Missouri	6083672	68886	88.3
Montana	1032949	145552	7.1
Nebraska	1896190	76872	24.7
Nevada	2890845	109826	26.3
New Hampshire	1330608	8968	148.4
New Jersey	8958013	7417	1207.8
New Mexico	2085109	121356	17.2
New York	19795791	47214	419.3
North Carolina	10042802	48711	206.2
North Dakota	756927	68976	11.0
Ohio	11613423	40948	283.6
Oklahoma	3911338	68667	57.0
Oregon	4028977	95997	42.0
Pennsylvania	12802503	44817	285.7
Rhode Island	1056298	1045	1010.8
South Carolina	4896146	30110	162.6
South Dakota	858469	75885	11.3
Tennessee	6600299	41217	160.1
Texas	27469114	261797	104.9
Utah	2995919	82144	36.5
Vermont	626042	9250	67.7
Virginia	8382993	39594	211.7
Washington	7170351	66544	107.8
West Virginia	1844128	24078	76.6
Wisconsin	5771337	54310	106.3
Wyoming	586107	97100	6.0