denisemauldin/.block

## .block
license: gpl-3.0
height: 600
border: no

## README.md

      
    Raw
  

              README.md
            
          
    5.x implementation of a choropleth map, using Promises.
Forked from mbostock's block: Choropleth
forked from adamjanes's block: Choropleth V5

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.counties {
  fill: none;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var unemployment = d3.map();
var stateNames = d3.map();

var path = d3.geoPath();

var x = d3.scaleLinear()
    .domain([1, 10])
    .rangeRound([600, 860]);

var color = d3.scaleThreshold()
    .domain(d3.range(0, 10))
    .range(d3.schemeBlues[9]);

var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0,40)");

g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return color(d[0]); });

g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Unemployment rate");

g.call(d3.axisBottom(x)
    .tickSize(13)
    .tickFormat(function(x, i) { return i ? x : x + "%"; })
    .tickValues(color.domain()))
  .select(".domain")
    .remove();

var promises = [
  d3.json("https://d3js.org/us-10m.v1.json"),
  d3.tsv("us-state-names.tsv", function(d) {
    stateNames.set(d.id, d.name)
  }),
  d3.tsv("map.tsv", function(d) {
    console.log("d in map", d);
    unemployment.set(d.name, +d.value);
  })
]
console.log("before promises")
Promise.all(promises).then(ready)

function ready([us]) {
  console.log("in ready", topojson.feature(us, us.objects.states).features)
  console.log("statenames", stateNames)
  console.log("employment", unemployment)
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("fill", function(d) {
          console.log("d", d)
          console.log("unemployment", unemployment)
          var sn = stateNames.get(d.id)
          console.log("sn",sn)
          d.rate = unemployment.get(stateNames.get(d.id)) || 0
          console.log("rate", d.rate)
          var col =  color(d.rate);
          console.log("col", col)
          if (col) {
            console.log("found col", col, "for d", d)
            return col
          } else {
            return '#ffffff'
          }
      })
      .attr("d", path)
    .append("title")
      .text(function(d) {
    			console.log("title", d)
    			return d.rate + "%"; });

  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);
}

</script>

## map.tsv

          
            name
            value

            
              Florida
              2

            
              New Mexico
              3

            
              Arkansas
              2

            
              Oregon
              0

            
              Tennessee
              9

## us-state-names.tsv

          
            id
            code
            name

            
              1
              AL
              Alabama

            
              2
              AK
              Alaska

            
              4
              AZ
              Arizona

            
              5
              AR
              Arkansas

            
              6
              CA
              California

            
              8
              CO
              Colorado

            
              9
              CT
              Connecticut

            
              10
              DE
              Delaware

            
              11
              DC
              District of Columbia

            
              12
              FL
              Florida

            
              13
              GA
              Georgia

            
              15
              HI
              Hawaii

            
              16
              ID
              Idaho

            
              17
              IL
              Illinois

            
              18
              IN
              Indiana

            
              19
              IA
              Iowa

            
              20
              KS
              Kansas

            
              21
              KY
              Kentucky

            
              22
              LA
              Louisiana

            
              23
              ME
              Maine

            
              24
              MD
              Maryland

            
              25
              MA
              Massachusetts

            
              26
              MI
              Michigan

            
              27
              MN
              Minnesota

            
              28
              MS
              Mississippi

            
              29
              MO
              Missouri

            
              30
              MT
              Montana

            
              31
              NE
              Nebraska

            
              32
              NV
              Nevada

            
              33
              NH
              New Hampshire

            
              34
              NJ
              New Jersey

            
              35
              NM
              New Mexico

            
              36
              NY
              New York

            
              37
              NC
              North Carolina

            
              38
              ND
              North Dakota

            
              39
              OH
              Ohio

            
              40
              OK
              Oklahoma

            
              41
              OR
              Oregon

            
              42
              PA
              Pennsylvania

            
              44
              RI
              Rhode Island

            
              45
              SC
              South Carolina

            
              46
              SD
              South Dakota

            
              47
              TN
              Tennessee

            
              48
              TX
              Texas

            
              49
              UT
              Utah

            
              50
              VT
              Vermont

            
              51
              VA
              Virginia

            
              53
              WA
              Washington

            
              54
              WV
              West Virginia

            
              55
              WI
              Wisconsin

            
              56
              WY
              Wyoming

            
              60
              AS
              America Samoa

            
              64
              FM
              Federated States of Micronesia

            
              66
              GU
              Guam

            
              68
              MH
              Marshall Islands

            
              69
              MP
              Northern Mariana Islands

            
              70
              PW
              Palau

            
              72
              PR
              Puerto Rico

            
              74
              UM
              U.S. Minor Outlying Islands

            
              78
              VI
              Virgin Islands of the United States
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.counties {
	fill: none;
	}

	.states {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}

	</style>
	<svg width="960" height="600"></svg>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var unemployment = d3.map();
	var stateNames = d3.map();

	var path = d3.geoPath();

	var x = d3.scaleLinear()
	.domain([1, 10])
	.rangeRound([600, 860]);

	var color = d3.scaleThreshold()
	.domain(d3.range(0, 10))
	.range(d3.schemeBlues[9]);

	var g = svg.append("g")
	.attr("class", "key")
	.attr("transform", "translate(0,40)");

	g.selectAll("rect")
	.data(color.range().map(function(d) {
	d = color.invertExtent(d);
	if (d[0] == null) d[0] = x.domain()[0];
	if (d[1] == null) d[1] = x.domain()[1];
	return d;
	}))
	.enter().append("rect")
	.attr("height", 8)
	.attr("x", function(d) { return x(d[0]); })
	.attr("width", function(d) { return x(d[1]) - x(d[0]); })
	.attr("fill", function(d) { return color(d[0]); });

	g.append("text")
	.attr("class", "caption")
	.attr("x", x.range()[0])
	.attr("y", -6)
	.attr("fill", "#000")
	.attr("text-anchor", "start")
	.attr("font-weight", "bold")
	.text("Unemployment rate");

	g.call(d3.axisBottom(x)
	.tickSize(13)
	.tickFormat(function(x, i) { return i ? x : x + "%"; })
	.tickValues(color.domain()))
	.select(".domain")
	.remove();

	var promises = [
	d3.json("https://d3js.org/us-10m.v1.json"),
	d3.tsv("us-state-names.tsv", function(d) {
	stateNames.set(d.id, d.name)
	}),
	d3.tsv("map.tsv", function(d) {
	console.log("d in map", d);
	unemployment.set(d.name, +d.value);
	})
	]
	console.log("before promises")
	Promise.all(promises).then(ready)

	function ready([us]) {
	console.log("in ready", topojson.feature(us, us.objects.states).features)
	console.log("statenames", stateNames)
	console.log("employment", unemployment)
	svg.append("g")
	.attr("class", "counties")
	.selectAll("path")
	.data(topojson.feature(us, us.objects.states).features)
	.enter().append("path")
	.attr("fill", function(d) {
	console.log("d", d)
	console.log("unemployment", unemployment)
	var sn = stateNames.get(d.id)
	console.log("sn",sn)
	d.rate = unemployment.get(stateNames.get(d.id)) \|\| 0
	console.log("rate", d.rate)
	var col = color(d.rate);
	console.log("col", col)
	if (col) {
	console.log("found col", col, "for d", d)
	return col
	} else {
	return '#ffffff'
	}
	})
	.attr("d", path)
	.append("title")
	.text(function(d) {
	console.log("title", d)
	return d.rate + "%"; });

	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "states")
	.attr("d", path);
	}

	</script>
id	code	name
1	AL	Alabama
2	AK	Alaska
4	AZ	Arizona
5	AR	Arkansas
6	CA	California
8	CO	Colorado
9	CT	Connecticut
10	DE	Delaware
11	DC	District of Columbia
12	FL	Florida
13	GA	Georgia
15	HI	Hawaii
16	ID	Idaho
17	IL	Illinois
18	IN	Indiana
19	IA	Iowa
20	KS	Kansas
21	KY	Kentucky
22	LA	Louisiana
23	ME	Maine
24	MD	Maryland
25	MA	Massachusetts
26	MI	Michigan
27	MN	Minnesota
28	MS	Mississippi
29	MO	Missouri
30	MT	Montana
31	NE	Nebraska
32	NV	Nevada
33	NH	New Hampshire
34	NJ	New Jersey
35	NM	New Mexico
36	NY	New York
37	NC	North Carolina
38	ND	North Dakota
39	OH	Ohio
40	OK	Oklahoma
41	OR	Oregon
42	PA	Pennsylvania
44	RI	Rhode Island
45	SC	South Carolina
46	SD	South Dakota
47	TN	Tennessee
48	TX	Texas
49	UT	Utah
50	VT	Vermont
51	VA	Virginia
53	WA	Washington
54	WV	West Virginia
55	WI	Wisconsin
56	WY	Wyoming
60	AS	America Samoa
64	FM	Federated States of Micronesia
66	GU	Guam
68	MH	Marshall Islands
69	MP	Northern Mariana Islands
70	PW	Palau
72	PR	Puerto Rico
74	UM	U.S. Minor Outlying Islands
78	VI	Virgin Islands of the United States