poezn · August 29, 2015 14:08
diff --git a/_.md b/_.md
diff --git a/config.json b/config.json
 {"description":"Maps: Cartogram","endpoint":"","display":"svg","public":true,"require":[{"name":"TopoJSON","url":"http://d3js.org/topojson.v1.min.js"},{"name":"Cartogram.js","url":"https://rawgit.com/shawnbot/d3-cartogram/master/cartogram.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"us.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/PXSQbbH.png","ajax-caching":true,"inline-console":true}
diff --git a/data.csv b/data.csv
diff --git a/inlet.js b/inlet.js

 var values = {};

 var columnMetric = "avgshare08_12",
    columnStateName = "state";

 var data = tb.data;
 _.each(data, function(d) {
  values[d[columnStateName]] = +d[columnMetric];
 });


 var max = d3.max(_.values(values));
 // max = 15;	
 console.log(max);


 var us = tb.us;

 var width = 960,
    height = 500;

 var quantize = d3.scale.quantize()
    .domain([0, max])
    .range(d3.range(4).map(function(i) { return "q" + i + "-4"; }));

 var projection = d3.geo.albersUsa()
    .scale(1000)
    .translate([549, 258]);

 var scale = d3.scale.linear()
 .domain(d3.extent(data, function(d) { return +d.workers2013 }))
 .range([1, 1000])

 var cartogram = d3.cartogram()
 .projection(projection)
 .value(function(d, i) {
  return scale(values[d.id]);
 });
 

 var svg = g; 

 function ready(us) {
  var geometries = cartogram(us, us.objects.states.geometries);
  
  console.log(_.keys(geometries))
  svg.selectAll("path")
  .data(geometries.features)
  .enter().append("path")
  .attr("class", function(d) { return "state " + quantize(values[d.id]); })
  .attr("d", cartogram.path);
 }
 ready(us);
diff --git a/styles.css b/styles.css
 .counties {
  fill: none;
 }

 .state {
  stroke-linejoin: round;
  stroke: #FFFFFF;

  font-size: 14px
 }

 #display {
  background-color: #FFFFFF;
 }

 .q0-4 text { fill: #001966; }
 .q1-4 text { fill: #001966; }
 .q2-4 text { fill: #001966; }
 .q3-4 text { fill: #d8e9f7; }


 .q0-4 { fill: #eff3ff; }
 .q1-4 { fill: #bdd7e7; }
 .q2-4 { fill: #6baed6; }
 .q3-4 { fill: #2171b5; }
diff --git a/us.json b/us.json
fipst	stab	state	avgshare	avgshare94_00	avgshare01_07	avgshare08_12	workers2013
37	NC	North Carolina	3.56	2.53	4.56	2.64	3301
1	AL	Alabama	3.22	3.55	2.95	2.58	834
28	MS	Mississippi	2.94	3.77	2.99	1.71	226
5	AR	Arkansas	2.89	1.91	3.27	3.16	507
47	TN	Tennessee	2.86	2.64	2.77	2.85	2606
45	SC	South Carolina	2.61	1.6	3.57	2.14	1321
23	ME	Maine	2.58	2.59	2.61	2.31	763
26	MI	Michigan	2.55	0.8	2.2	4.62	2977
41	OR	Oregon	2.38	1.39	2.37	3.03	2048
21	KY	Kentucky	2.24	2.06	2.19	2.38	971
18	IN	Indiana	2.07	0.97	2.3	2.67	1733
2	AK	Alaska	1.88	2.52	2.6	0	95
42	PA	Pennsylvania	1.79	1.53	2.07	1.62	4245
55	WI	Wisconsin	1.73	1.03	1.8	2.27	949
39	OH	Ohio	1.72	0.77	1.84	2.46	1805
53	WA	Washington	1.69	1.04	2.44	1.32	1715
44	RI	Rhode Island	1.64	1.87	1.5	1.57	65
13	GA	Georgia	1.51	1.76	1.65	0.96	1251
16	ID	Idaho	1.51	1.23	1.9	1.22	168
54	WV	West Virginia	1.45	1.23	1.38	1.85	108
51	VA	Virginia	1.38	0.98	1.66	1.28	825
40	OK	Oklahoma	1.3	1.18	1.96	0.88	1472
20	KS	Kansas	1.27	0.86	1.42	1.35	989
35	NM	New Mexico	1.26	1.76	0.4	1.69	0
29	MO	Missouri	1.25	1.06	1.28	1.48	1967
33	NH	New Hampshire	1.25	0.67	1.76	0.96	114
50	VT	Vermont	1.14	0.35	1.84	1.14	236
25	MA	Massachusetts	1.07	0.89	1.09	1.28	3420
17	IL	Illinois	1.06	0.55	1.36	1.19	3282
48	TX	Texas	1.05	1.17	0.97	0.91	4295
27	MN	Minnesota	0.99	0.39	1.18	1.3	1614
9	CT	Connecticut	0.97	0.5	0.97	1.36	510
30	MT	Montana	0.91	1.78	0.78	0.75	237
19	IA	Iowa	0.89	0.33	1.04	1.21	1408
46	SD	South Dakota	0.86	0.16	1	1.3	11
22	LA	Louisiana	0.85	1.07	0.5	0.98	657
34	NJ	New Jersey	0.85	1.18	0.8	0.73	868
4	AZ	Arizona	0.83	0.59	0.68	1.13	446
56	WY	Wyoming	0.82	2.44	0.21	0.04	49
36	NY	New York	0.82	0.94	0.76	0.91	3917
49	UT	Utah	0.74	0.76	0.62	0.95	546
8	CO	Colorado	0.74	0.87	0.67	0.75	395
6	CA	California	0.72	0.47	0.75	0.86	4628
31	NE	Nebraska	0.62	0.34	0.75	0.62	407
38	ND	North Dakota	0.6	1.16	0.16	0.75	336
10	DE	Delaware	0.53	0.14	0.43	1.09	22
24	MD	Maryland	0.47	0.54	0.5	0.46	270
12	FL	Florida	0.3	0.24	0.28	0.39	2363
32	NV	Nevada	0.26	0.34	0.2	0.21	262
15	HI	Hawaii	0.06	0.1	0.14	0.03	232
11	DC	District of Columbia	0.01	0.03	0	0.02

	var values = {};

	var columnMetric = "avgshare08_12",
	columnStateName = "state";

	var data = tb.data;
	_.each(data, function(d) {
	values[d[columnStateName]] = +d[columnMetric];
	});


	var max = d3.max(_.values(values));
	// max = 15;
	console.log(max);


	var us = tb.us;

	var width = 960,
	height = 500;

	var quantize = d3.scale.quantize()
	.domain([0, max])
	.range(d3.range(4).map(function(i) { return "q" + i + "-4"; }));

	var projection = d3.geo.albersUsa()
	.scale(1000)
	.translate([549, 258]);

	var scale = d3.scale.linear()
	.domain(d3.extent(data, function(d) { return +d.workers2013 }))
	.range([1, 1000])

	var cartogram = d3.cartogram()
	.projection(projection)
	.value(function(d, i) {
	return scale(values[d.id]);
	});


	var svg = g;

	function ready(us) {
	var geometries = cartogram(us, us.objects.states.geometries);

	console.log(_.keys(geometries))
	svg.selectAll("path")
	.data(geometries.features)
	.enter().append("path")
	.attr("class", function(d) { return "state " + quantize(values[d.id]); })
	.attr("d", cartogram.path);
	}
	ready(us);
	.counties {
	fill: none;
	}

	.state {
	stroke-linejoin: round;
	stroke: #FFFFFF;

	font-size: 14px
	}

	#display {
	background-color: #FFFFFF;
	}

	.q0-4 text { fill: #001966; }
	.q1-4 text { fill: #001966; }
	.q2-4 text { fill: #001966; }
	.q3-4 text { fill: #d8e9f7; }


	.q0-4 { fill: #eff3ff; }
	.q1-4 { fill: #bdd7e7; }
	.q2-4 { fill: #6baed6; }
	.q3-4 { fill: #2171b5; }