Max Goldstein mgold

ISO	1995	1996	1997	1998	1999	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012
AFG	288	327	359	393	435	479	529	585	648	717	790	866	958	1046	1146	1235	1319	1409
AGO	37927	42940	47857	52770	57610	62449	67163	72024	76600	81136	85612	90133	95204	100958	107242	114162	121466	128413
ARG	14180	15969	17586	19121	20594	21997	23291	24364	25330	26265	27218	27837	28525	29161	29817	30515	31119	31554
ARM	28	46	79	106	128	153	176	201	232	266	301	340	379	425	470	518	570	626
AZE	68	114	177	252	334	419	503	582	657	726	789	849	903	954	1004	1048	1094	1139
BHS	2029	2165	2294	2410	2517	2610	2691	2760	2822	2910	3004	3099	3210	3297	3401	3463	3486	3502
BGD	159	229	314	413	528	658	768	888	1017	1154	1301	1456	1619	1790	1970	2159	2361	2653
BRB	112	136	161	186	210	233	252	267	283	299	312	324	336	347	357	368	380	392
BLR	465	664	913	1213	1560	1979	2463	2990	3554	4110	4644	5112	5565	5966	6309	6581	6870	7139

Each bar shows the percent of a country's land area covered by forests. Data is taken from No Ceilings series LACFORES.

This is assignment 3 for the Knight D3 course.

This is a fork of Mike Bostock's Multi-Series Line Chart, which adds circles along the line for each data point. The circles help anchor us to the real datapoints (rather than extrapolations) when comparing across lines.

But this is really an exercise in nested selections, leveraging selections as groups. The data consists of multiple lines, which each have multiple data points. We call .data twice: first with the data for all cities, binding the array for each city as a single datum. This is good enough for D3's line generators but not for placing circles. So we selectAll circles from the merged enter-update selection, and then bind the data for each line using a function, which is passed each datum from the prior join. This step produces a new data join, and you need to do it even if the function you pass is the identity. Since there are no circles, we skip straight to the enter selection and append them. Then we assign them x and y positions based on the accessor

This example shows how to implement zoom in and zoom out buttons on a map using D3 and SVG transforms. Once the target scale and translation are computed, the map transitions over 100ms. Then it checks to see if the button is still held down, and if so continues zooming. Thus, zooming may continue for almost 100ms after the button is released; consider this "scroll with inertia". (It's not a bug, it's a feature!) Control logic is in place to make the buttons feel natural and avoid snapping the map to a new translation instantly.

This is a fork Mike Bostock's Map Pan & Zoom I; you can diff the two to see my changes. The scaling math (which is quite tricky!) is derived from Wil Linssen.

If zooming by a hard-coded factor would push the scale beyond the scale extent, it is clipped. Importantly, this clipping also affects the translation. If you scale by 1.047 but translate as if you had scaled by 1.2, bad things happen.

S

This example shows how to implement zoom in and zoom out buttons on a map using D3 and SVG transforms. Once the target scale and translation are computed, they are applied immediately, and then every 40ms while the button is held down. This implementation seem susceptible to sudden, unpleasant jumps, especially with rapid clicking, even though the callbacks are carefully managed.

This is a fork Mike Bostock's Map Pan & Zoom I; you can diff the two to see my changes. The scaling math (which is quite tricky!) is derived from Wil Linssen.

If zooming by a hard-coded factor would push the scale beyond the scale extent, it is clipped. Importantly, this clipping also affects the translation. If you scale by 1.047 but translate as if you had scaled by 1.2, bad things happen.

	<!DOCTYPE html>
	<html>
	<head>
	<title>Knight D3 Module 5</title>
	<style>
	body {
	margin: 0;
	}

	.axis path, .axis line {

	<!DOCTYPE html>
	<html>
	<head>
	<title>Knight D3 Module 3</title>
	<style>
	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<title>Knight D3 Module 2</title>
	</head>
	<body>
	<svg width=960 height=500>
	<rect x=50 y=50 width=200 height=600></rect>
	<circle cx=150 cy=150 r=50 style="fill:red; stroke:white; stroke-width:5px"></circle>
	<circle cx=150 cy=275 r=50 style="fill:yellow; stroke:white; stroke-width:5px"></circle>