clhenrick · July 3, 2017 00:54
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/gapminder_gdp.csv b/gapminder_gdp.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
 </head>

 <body>
  <svg width="600" height="600"></svg>
  <script>
    var svg = d3.select("svg"),
        width = +svg.attr('width'),
        height = +svg.attr('height');
    
    var s = d3.scaleLinear()
    	.range([5, 50]);
    
    var color = d3.scaleLinear()
      .interpolate(d3.interpolateHcl)
      .range([d3.rgb("#007AFF"), d3.rgb('#FEB24C')]);
 		
    d3.csv('gapminder_gdp.csv', parse, function(error, data) {
      if (error) throw error;
      
      data = data.slice(0, 100);
      console.log(data);
      
      const extent = d3.extent(data, function(d) { return d.gdp; });
      
      s.domain(extent)
      color.domain(extent);
      
      var simulation = d3.forceSimulation(data)
        .force('charge', d3.forceManyBody().strength(-2))
        .force('center', d3.forceCenter(width / 2, height / 2))
        .force('collision', d3.forceCollide().radius(function(d) {
          return s(d.gdp);
        }))
      	.on('tick', ticked);
      
      function ticked() {
        var u = d3.select('svg')
          .selectAll('circle')
          .data(data, function(d) {
            return d.geo;
          });

        u.enter()
          .append('circle')
          .attr('r', function(d) {
            return s(d.gdp);
          })
          .merge(u)
          .attr('cx', function(d) {
            return d.x;
          })
          .attr('cy', function(d) {
            return d.y;
          })
        	.attr('fill', function(d) {
 	          return color(d.gdp);
  	      })
         .on("mouseover", function(d){
 			     tooltip.html(d.geo +"<br>"+ "$" + d.gdp.toLocaleString());
     		   return tooltip.style("visibility", "visible");
         })
 				 .on("mousemove", function(){
           return tooltip.style("top", (d3.event.pageY - 10)+"px").style("left",(d3.event.pageX+10)+"px");
        })
 				 .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

        u.exit().remove()
      }
      
    });
    
    var tooltip = d3.select('body')
     .append("div")
     .style("position", "absolute")
     .style("visibility", "hidden")
     .style("color", "white")
     .style("padding", "8px")
     .style("background-color", "#626D71")
     .style("border-radius", "6px")
     .style("text-align", "center")
     .style("font-family", "monospace")
     .style("width", "auto")
     .text("");
    
    function parse(d) {
      return {
        year: +d.time,
        geo: d.geo,
        gdp: +d.gdp_per_capita_cppp
      };
    }

  </script>
 </body>
gdp_per_capita_cppp	geo	time
37844	abw	2016
1996	afg	2016
7773	ago	2016
11154	alb	2016
48185	and	2016
61069	are	2016
17195	arg	2016
7879	arm	2016
21387	atg	2016
44865	aus	2016
44834	aut	2016
17286	aze	2016
798	bdi	2016
41592	bel	2016
1885	ben	2016
1713	bfa	2016
3347	bgd	2016
16749	bgr	2016
44320	bhr	2016
22962	bhs	2016
10213	bih	2016
17537	blr	2016
8557	blz	2016
45400	bmu	2016
6428	bol	2016
15668	bra	2016
13145	brb	2016
74267	brn	2016
8532	btn	2016
17698	bwa	2016
621	caf	2016
43751	can	2016
56620	che	2016
23032	chl	2016
14060	chn	2016
3658	civ	2016
2967	cmr	2016
851	cod	2016
6615	cog	2016
13121	col	2016
1486	com	2016
6690	cpv	2016
14578	cri	2016
20122	cub	2016
48849	cym	2016
30103	cyp	2016
30133	cze	2016
44620	deu	2016
3270	dji	2016
10673	dma	2016
44279	dnk	2016
13115	dom	2016
13740	dza	2016
11326	ecu	2016
11299	egy	2016
1128	eri	2016
33610	esp	2016
27794	est	2016
1607	eth	2016
39319	fin	2016
8115	fji	2016
38063	fra	2016
3543	fsm	2016
19403	gab	2016
38805	gbr	2016
7836	geo	2016
4366	gha	2016
1294	gin	2016
1699	gmb	2016
1410	gnb	2016
28853	gnq	2016
26278	grc	2016
11789	grd	2016
28341	grl	2016
7378	gtm	2016
7070	guy	2016
55357	hkg	2016
4335	hnd	2016
20598	hrv	2016
1751	hti	2016
24782	hun	2016
10957	idn	2016
6266	ind	2016
48672	irl	2016
15613	irn	2016
15486	irq	2016
42888	isl	2016
31931	isr	2016
33529	ita	2016
8769	jam	2016
12014	jor	2016
36440	jpn	2016
24232	kaz	2016
3022	ken	2016
3379	kgz	2016
3452	khm	2016
1832	kir	2016
22004	kna	2016
35761	kor	2016
9229	kos	2016
82895	kwt	2016
5508	lao	2016
17395	lbn	2016
1009	lbr	2016
22461	lby	2016
10118	lca	2016
11238	lka	2016
2737	lso	2016
27698	ltu	2016
88423	lux	2016
24223	lva	2016
151618	mac	2016
7631	mar	2016
65919	mco	2016
5068	mda	2016
1430	mdg	2016
14769	mdv	2016
17246	mex	2016
3668	mhl	2016
13027	mkd	2016
1720	mli	2016
31005	mlt	2016
4313	mmr	2016
15201	mne	2016
12092	mng	2016
1237	moz	2016
3968	mrt	2016
18986	mus	2016
823	mwi	2016
25110	mys	2016
10505	nam	2016
989	ner	2016
5866	nga	2016
4841	nic	2016
46462	nld	2016
64748	nor	2016
2430	npl	2016
18608	nru	2016
34766	nzl	2016
47852	omn	2016
4877	pak	2016
21429	pan	2016
12366	per	2016
7145	phl	2016
14528	plw	2016
2553	png	2016
25672	pol	2016
33464	pri	2016
1389	prk	2016
26788	prt	2016
8402	pry	2016
4199	pse	2016
134322	qat	2016
19952	rou	2016
23268	rus	2016
1624	rwa	2016
53038	sau	2016
4047	sdn	2016
2309	sen	2016
82826	sgp	2016
2073	slb	2016
2227	sle	2016
7946	slv	2016
40582	smr	2016
626	som	2016
13166	srb	2016
3138	ssd	2016
3095	stp	2016
17740	sur	2016
28041	svk	2016
29040	svn	2016
45736	swe	2016
6111	swz	2016
26331	syc	2016
3300	syr	2016
20022	tca	2016
2308	tcd	2016
1481	tgo	2016
15080	tha	2016
2656	tjk	2016
17115	tkm	2016
1870	tls	2016
5156	ton	2016
30439	tto	2016
11508	tun	2016
19851	tur	2016
3677	tuv	2016
44596	twn	2016
2672	tza	2016
1725	uga	2016
8766	ukr	2016
20981	ury	2016
54408	usa	2016
5891	uzb	2016
10753	vct	2016
15123	ven	2016
5893	vnm	2016
2974	vut	2016
5460	wsm	2016
3928	yem	2016
12609	zaf	2016
4167	zmb	2016
1844	zwe	2016
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<svg width="600" height="600"></svg>
	<script>
	var svg = d3.select("svg"),
	width = +svg.attr('width'),
	height = +svg.attr('height');

	var s = d3.scaleLinear()
	.range([5, 50]);

	var color = d3.scaleLinear()
	.interpolate(d3.interpolateHcl)
	.range([d3.rgb("#007AFF"), d3.rgb('#FEB24C')]);

	d3.csv('gapminder_gdp.csv', parse, function(error, data) {
	if (error) throw error;

	data = data.slice(0, 100);
	console.log(data);

	const extent = d3.extent(data, function(d) { return d.gdp; });

	s.domain(extent)
	color.domain(extent);

	var simulation = d3.forceSimulation(data)
	.force('charge', d3.forceManyBody().strength(-2))
	.force('center', d3.forceCenter(width / 2, height / 2))
	.force('collision', d3.forceCollide().radius(function(d) {
	return s(d.gdp);
	}))
	.on('tick', ticked);

	function ticked() {
	var u = d3.select('svg')
	.selectAll('circle')
	.data(data, function(d) {
	return d.geo;
	});

	u.enter()
	.append('circle')
	.attr('r', function(d) {
	return s(d.gdp);
	})
	.merge(u)
	.attr('cx', function(d) {
	return d.x;
	})
	.attr('cy', function(d) {
	return d.y;
	})
	.attr('fill', function(d) {
	return color(d.gdp);
	})
	.on("mouseover", function(d){
	tooltip.html(d.geo +"<br>"+ "$" + d.gdp.toLocaleString());
	return tooltip.style("visibility", "visible");
	})
	.on("mousemove", function(){
	return tooltip.style("top", (d3.event.pageY - 10)+"px").style("left",(d3.event.pageX+10)+"px");
	})
	.on("mouseout", function(){return tooltip.style("visibility", "hidden");});

	u.exit().remove()
	}

	});

	var tooltip = d3.select('body')
	.append("div")
	.style("position", "absolute")
	.style("visibility", "hidden")
	.style("color", "white")
	.style("padding", "8px")
	.style("background-color", "#626D71")
	.style("border-radius", "6px")
	.style("text-align", "center")
	.style("font-family", "monospace")
	.style("width", "auto")
	.text("");

	function parse(d) {
	return {
	year: +d.time,
	geo: d.geo,
	gdp: +d.gdp_per_capita_cppp
	};
	}

	</script>
	</body>