schnerd · March 27, 2020 21:33
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/askmefi_category_year.tsv b/askmefi_category_year.tsv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
 <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">

 <style>
  :root {
    /* Dark theme */

    --bg: #fff;
    --text: #000;
    --tickLine: #eee;
    --baseLine: #aaa;
    --tickText: #999;
    --bar: #9b59b6;
    --font: 'Montserrat', sans-serif;
 /*         --bg: #2c3e50;
    --text: #fff;
    --tickLine: rgba(255, 255, 255, 0.3);
    --tickText: rgba(255, 255, 255, 0.3); */
  }
  body {
    font: 12px sans-serif;
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);

  }
  svg {
    overflow: visible;
  }
  * {
    box-sizing: border-box;
  }
  div {
    display: flex;
    flex-direction: column;
     flex-shrink: 0;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .flex-center {
    align-items: center;
  }
  
  header {
    margin: 10px 20px 20px;
  }
  h1 {
    font-size: 24px;
    margin: 0;
  }
  
  
  .filter-item {
    padding: 10px 20px 0 0;
  }
  .cb-container {
  display: block;
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }

 /* Hide the browser's default checkbox */
 .cb-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
 }

 /* Create a custom checkbox */
 .cb-mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 3px;
  transition: all 0.2s;
 }
  .cb-input:not(:checked) ~ .cb-label {
    color: #666;
  }
  .cb-container:hover .cb-input:not(:checked) ~ .cb-label {
    color: #444;
  }

 /* On mouse-over, add a grey background color */
 .cb-container:hover .cb-input:not(:checked) ~ .cb-mark {
  background-color: #ccc;
 }

 /* When the checkbox is checked, add a blue background */
 .cb-input:checked ~ .cb-mark {
  background-color: #2196F3;
 }

 /* Create the checkmark/indicator (hidden when not checked) */
 .cb-mark:after {
  content: "";
  position: absolute;
  display: none;
 }

 /* Show the checkmark when checked */
 .cb-input:checked ~ .cb-mark:after {
  display: block;
 }

 /* Style the checkmark/indicator */
 .cb-mark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0.8);
 }
 
  
 .select-css {
 	display: block;
 	font-size: 16px;
 	color: #666;
 	line-height: 1.6;
 	padding: 2px 1.3em 2px 8px;
 	margin: 0;
 	border: none;
 	box-shadow: 0 1px 0 1px rgba(0,0,0,0);
 	border-radius: 4px;
 	appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.2s;
 background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='silver'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat scroll 93% 64% #eee; 
  font-family: var(--font);
 }
 .select-css::-ms-expand {
 	display: none;
 }
 .select-css:hover {
 	background-color: #ddd;
 }
 .select-css:focus {
 	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
 	box-shadow: 0 0 0 3px -moz-mac-focusring;
 	outline: none;
 }
 .select-css option {
 	font-weight:normal;
 }
  
  
  
  .cell-label {
 		text-shadow: 0px 0px 10px var(--bg);
    fill: var(--text);
    opacity: 0.5;
    font-weight: bold;
  }
  .x-tick {
    dominant-baseline: hanging;
    font-size: 10px;
    fill: var(--tickText);
  }
  .tick line, .domain {
    stroke: var(--tickLine);
  }
  .tick text {
    fill: var(--tickText);
  }
  .consistent-y .cell:not(:first-child) .tick text,
  .consistent-y .cell:not(:first-child) .domain {
    display: none;
  }
  .baseline {
    stroke: var(--baseLine);
  }
  
  .bar {
    fill: var(--bar);
  }
  
 </style>

 <header>
  <div class="flex-row flex-center">
    <h1>United States COVID-19 Spread</h1>
  </div>
  <div class="flex-row flex-center">
    <div class="filter-item">
      <select id="field-select" class="select-css">
        <option value="cases">Confirmed Cases</option>
        <option value="deaths">Confirmed Deaths</option>
        <option value="newCases" selected>Daily New Cases</option>
        <option value="newDeaths">Daily New Deaths</option>
      </select>
    </div>
    <div class="filter-item">
      <select id="time-select" class="select-css">
        <option value="last7Days" selected>Last 7 days</option>
        <option value="last14Days" selected>Last 14 days</option>
        <option value="lastMonth">Last Month</option>
        <option value="all">All</option>
      </select>
    </div>
    <div class="filter-item">
      <label class="cb-container">
        <input type="checkbox" class="cb-input" id="cb-use-log-scale">
        <span class="cb-mark"></span>
        <span class="cb-label">Log Scale</span>
      </label>
    </div>
    <div class="filter-item">
      <label class="cb-container">
        <input type="checkbox" class="cb-input" id="cb-consistent-y" checked>
        <span class="cb-mark"></span>
        <span class="cb-label">Consistent Y-Axis</span>
      </label>
    </div>
  </div>
 </header>

 <div id="viz">
  <svg id="svg"></svg>
 </div>

 <script>
    
  let useLog = false;
  let data = null;
  let field = 'newCases';
  let timeFilter = 'last14Days';
  let consistentY = true;
 
 function processStates(csv) {
  const states = d3.nest()
    .key(k => k.state)
    .entries(csv);
  
  const extents = {
    date: [null, null],
    cases: [null, null],
    deaths: [null, null],
    newCases: [null, null],
    newDeaths: [null, null],
  };
  const keys = ['date', 'cases', 'deaths', 'newCases', 'newDeaths'];
  states.forEach(state => {
    const newValues = [];
    for (let i = 0; i < state.values.length; i++) {
      const prevRow = state.values[i - 1];
      const row = state.values[i];
      const [year, month, date] = row.date.split('-');
      const parsed = {
        ...row,
        date: new Date(Number(year), Number(month) - 1, Number(date)),
        cases: Number(row.cases),
        deaths: Number(row.deaths),
      }
      if (prevRow) {
        parsed.newCases = parsed.cases - prevRow.cases;
        parsed.newDeaths = parsed.deaths - prevRow.deaths;
      } else {
        parsed.newCases = 0;
        parsed.newDeaths = 0;
      }
      newValues.push(parsed);
      
      keys.forEach(key => {
        if (extents[key][0] === null || parsed[key] < extents[key][0]) {
          extents[key][0] = parsed[key];
        }
        if (extents[key][1] === null || parsed[key] > extents[key][1]) {
          extents[key][1] = parsed[key];
        }
      });
    }
    state.values = newValues;
  });
  
  return {
    byState: states,
    stateExtents: extents,
  };
 }
  
  function last(arr) {
    return arr[arr.length - 1];
  }
  
 function render() {
  const {byState} = data;
  const extents = data.stateExtents;
  
  const groups = byState.slice(0);
  groups.sort((a, b) => {
    return last(b.values)[field] - last(a.values)[field];
  });
  
  const yScaleType = useLog ? 'scaleLog' : 'scaleLinear';
  
  const firstDate = extents.date[0];
  const lastDate = extents.date[1];
  
  let daysToShow;
  if (timeFilter === 'last7Days') {
    daysToShow = 7;
  } else if (timeFilter === 'last14Days') {
    daysToShow = 14;
  } else if (timeFilter === 'lastMonth') {
    daysToShow = 30;
  } else {
    daysToShow = d3.max(groups, g => g.values.length);
  }
  
  const numStates = groups.length;
  const chartWidth = 150;
  const chartPadding = 25;
  const chartHeight = 60;
  const yAxisWidth = 40;
  const xAxisHeight = 14;
  const winWidth = window.innerWidth;
  const barPad = daysToShow > 10 ? 1 : 2;
  
  const colWidth = chartWidth + chartPadding;
  const rowHeight = (chartHeight + xAxisHeight + chartPadding);
  
  const numCols = Math.floor((winWidth - yAxisWidth) / colWidth);
  const numRows = Math.ceil(numStates / numCols);
  
  const totalHeight = numRows * rowHeight;
  
 	const xScale = d3.scaleBand()
  	.domain(d3.range(daysToShow))
  	.rangeRound([0, chartWidth])
  	.paddingInner(barPad * daysToShow / chartWidth)
  	.paddingOuter(barPad * 5 / chartWidth)
  const barWidth = xScale.bandwidth();
  
  function makeYScale(extent) {
    const domain = [Math.max(extent[0], 0), extent[1]];
    if (useLog && domain[0] === 0) {
      domain[0] = 1;
    }
    return d3[yScaleType]()
      .domain(domain)
      .range([chartHeight, 0]);
  }
  
  function makeAxis(scale) {
    const domainMax = scale.domain()[1];
    return d3.axisLeft(scale).ticks(!useLog ? 4 : domainMax < 100 ? 1 : domainMax < 1000 ? 2 : domainMax < 10000 ? 3 : 4)
    .tickSizeInner(-chartWidth)
    .tickSizeOuter(0)
    .tickFormat(d => {    
      return formatYTick(d);
    });
  }
  const yScale = makeYScale(extents[field]);
  debugger;
  const yAxis = makeAxis(yScale);
  
  const $viz = d3.select('#viz');
  const $svg = d3.select('#svg');
  
  $svg.attr('class', consistentY ? 'consistent-y' : '');
  
  // Make sure we're starting fresh
  $svg.selectAll("*").remove();
  
  // Create grid of rows and columns
  const $rows = $svg
  	.attr("viewBox", [0, 0, winWidth, totalHeight])
    .selectAll('g.row')
  	.data(d3.range(numRows))
  	.enter()
  	.append('g')
  	.attr('class', 'row')
  	.attr('transform', row => `translate(${yAxisWidth}, ${row * rowHeight})`)
  
  	// Add cells
  	$rows.each(function(row) {
    	d3.select(this)
    		.selectAll('g.cell')
      	.data(d3.range(numCols).map(i => ({row, col: i})))
      	.enter()
        .append('g')
        .attr('class', 'cell')
      	.attr('transform', d => `translate(${d.col * colWidth}, 0)`);
  	})
  

  const $cells = $svg.selectAll('g.cell');
    
    // Add baseline
    $cells
      .append('line')
    	.attr('class', 'baseline')
    	.attr('y1', chartHeight)
    	.attr('y2', chartHeight)
    	.attr('x2', chartWidth)
  
  // Fill each cell with a chart
  $cells
  	.each(function(d, index) {
    	const $cell = d3.select(this);
 			const data = groups[index];
    	if (!data) {
        // TODO remove completely? Or is this handled already?
        return;
      }
    	const values = data.values;
    
      // Add axis
    	let cellYScale = yScale;
    	let cellYAxis = yAxis;
 	    if (!consistentY) {
        const extent = d3.extent(values, d => d[field]);
        cellYScale = makeYScale(extent);
        cellYAxis = makeAxis(cellYScale);
      }
    
      $cell
        .append("g")
        .attr("transform", "translate(0,0)")
        .call(cellYAxis)
      
    	// Add label
    	$cell
        .append('text')
      	.text(data.key)
      	.attr('x', 6)
      	.attr('y', 14)
      	.attr('class', 'cell-label')
      
      // Get last $daysToShow items
      const shownValues = values.slice(Math.max(values.length - daysToShow, 0));
      $cell.selectAll('.bar')
      	.data(shownValues)
      	.enter()
      	.append('rect')
      	.attr('class', 'bar')
      	.attr('width', barWidth)
      	.attr('x', (d, i) => xScale(i))
 	      .attr('y', d => cellYScale(d[field]))
      	.attr('height', d => chartHeight - cellYScale(d[field]))
  	});
  
 		// Add start dates
  	const endDate = last(groups[0].values).date;
 	  const startDate = new Date(endDate);
 	  startDate.setDate(startDate.getDate() - daysToShow + 1);
  
  	$cells
    	.append('text')
    	.attr('class', 'x-tick x-tick-start')
    	.attr('text-anchor', 'start')
    	.attr('x', 0)
    	.attr('y', chartHeight + 4)
    	.text(formatDate(startDate))
  	
    $cells
    	.append('text')
    	.attr('class', 'x-tick x-tick-end')
    	.attr('text-anchor', 'end')
    	.attr('x', chartWidth)
    	.attr('y', chartHeight + 4)
    	.text(formatDate(endDate))
  

 }
  
 function formatDate(d) {
  return d.toLocaleString('default', {month: 'short', day: 'numeric'});
 }
  
 function formatYTick(n) {
  if (n >= 1e6) {
    return `${Math.round(n / 1e6)}m`;
  }
  if (n >= 1e3) {
    return `${Math.round(n / 1e3)}k`;
  }
  return n;
 }
  
 function attachEvents() {
  
  $('#field-select').change(function() {
    field = $(this).val();
    render();
  });
  $('#time-select').change(function() {
    timeFilter = $(this).val();
    console.log(timeFilter);
    render();
  });
  $('#cb-use-log-scale').change(function() {
    useLog = $(this).is(':checked');
    render();
  });
  $('#cb-consistent-y').change(function() {
    consistentY = $(this).is(':checked');
    render();
  });
 }

 d3.csv('us-states.csv').then(csv => {
  data = processStates(csv);
  render();
 });
  
 attachEvents();
  

 </script>
diff --git a/us-counties.csv b/us-counties.csv
diff --git a/us-states.csv b/us-states.csv
year	category	n
2004	clothing, beauty, & fashion	141
2004	computers & internet	2489
2004	education	151
2004	food & drink	275
2004	grab bag	285
2004	health & fitness	379
2004	home & garden	344
2004	human relations	245
2004	law & government	292
2004	media & arts	825
2004	pets & animals	127
2004	religion & philosophy	63
2004	science & nature	133
2004	shopping	345
2004	society & culture	250
2004	sports, hobbies, & recreation	241
2004	technology	446
2004	travel & transportation	491
2004	work & money	400
2004	writing & language	241
2005	clothing, beauty, & fashion	203
2005	computers & internet	2200
2005	education	201
2005	food & drink	324
2005	grab bag	248
2005	health & fitness	590
2005	home & garden	476
2005	human relations	376
2005	law & government	264
2005	media & arts	987
2005	pets & animals	153
2005	religion & philosophy	74
2005	science & nature	195
2005	shopping	242
2005	society & culture	296
2005	sports, hobbies, & recreation	324
2005	technology	617
2005	travel & transportation	660
2005	work & money	515
2005	writing & language	285
2006	clothing, beauty, & fashion	195
2006	computers & internet	2114
2006	education	190
2006	food & drink	353
2006	grab bag	263
2006	health & fitness	612
2006	home & garden	379
2006	human relations	411
2006	law & government	291
2006	media & arts	838
2006	pets & animals	132
2006	religion & philosophy	85
2006	science & nature	203
2006	shopping	208
2006	society & culture	273
2006	sports, hobbies, & recreation	360
2006	technology	528
2006	travel & transportation	631
2006	work & money	572
2006	writing & language	227
2007	clothing, beauty, & fashion	296
2007	computers & internet	2402
2007	education	352
2007	food & drink	541
2007	grab bag	394
2007	health & fitness	890
2007	home & garden	634
2007	human relations	678
2007	law & government	360
2007	media & arts	1141
2007	pets & animals	202
2007	religion & philosophy	100
2007	science & nature	227
2007	shopping	311
2007	society & culture	361
2007	sports, hobbies, & recreation	472
2007	technology	743
2007	travel & transportation	935
2007	work & money	861
2007	writing & language	347
2008	clothing, beauty, & fashion	432
2008	computers & internet	2852
2008	education	441
2008	food & drink	687
2008	grab bag	560
2008	health & fitness	986
2008	home & garden	733
2008	human relations	947
2008	law & government	523
2008	media & arts	1449
2008	pets & animals	269
2008	religion & philosophy	120
2008	science & nature	284
2008	shopping	389
2008	society & culture	452
2008	sports, hobbies, & recreation	615
2008	technology	917
2008	travel & transportation	1116
2008	work & money	1137
2008	writing & language	447
2009	clothing, beauty, & fashion	489
2009	computers & internet	2592
2009	education	521
2009	food & drink	844
2009	grab bag	580
2009	health & fitness	1207
2009	home & garden	897
2009	human relations	1140
2009	law & government	500
2009	media & arts	1577
2009	pets & animals	285
2009	religion & philosophy	119
2009	science & nature	294
2009	shopping	355
2009	society & culture	429
2009	sports, hobbies, & recreation	662
2009	technology	963
2009	travel & transportation	1206
2009	work & money	1353
2009	writing & language	466
2010	clothing, beauty, & fashion	410
2010	computers & internet	2046
2010	education	488
2010	food & drink	724
2010	grab bag	535
2010	health & fitness	1132
2010	home & garden	774
2010	human relations	1154
2010	law & government	420
2010	media & arts	1283
2010	pets & animals	251
2010	religion & philosophy	92
2010	science & nature	272
2010	shopping	337
2010	society & culture	386
2010	sports, hobbies, & recreation	532
2010	technology	783
2010	travel & transportation	1022
2010	work & money	1048
2010	writing & language	398
2011	clothing, beauty, & fashion	406
2011	computers & internet	1777
2011	education	426
2011	food & drink	689
2011	grab bag	491
2011	health & fitness	1110
2011	home & garden	769
2011	human relations	1184
2011	law & government	385
2011	media & arts	1279
2011	pets & animals	272
2011	religion & philosophy	90
2011	science & nature	249
2011	shopping	385
2011	society & culture	406
2011	sports, hobbies, & recreation	479
2011	technology	749
2011	travel & transportation	971
2011	work & money	1133
2011	writing & language	369
2012	clothing, beauty, & fashion	485
2012	computers & internet	1671
2012	education	448
2012	food & drink	645
2012	grab bag	510
2012	health & fitness	1167
2012	home & garden	791
2012	human relations	1466
2012	law & government	419
2012	media & arts	1247
2012	pets & animals	288
2012	religion & philosophy	84
2012	science & nature	250
2012	shopping	343
2012	society & culture	375
2012	sports, hobbies, & recreation	492
2012	technology	729
2012	travel & transportation	962
2012	work & money	1256
2012	writing & language	380
2013	clothing, beauty, & fashion	379
2013	computers & internet	1101
2013	education	306
2013	food & drink	498
2013	grab bag	394
2013	health & fitness	887
2013	home & garden	606
2013	human relations	1115
2013	law & government	276
2013	media & arts	952
2013	pets & animals	221
2013	religion & philosophy	53
2013	science & nature	177
2013	shopping	258
2013	society & culture	306
2013	sports, hobbies, & recreation	335
2013	technology	551
2013	travel & transportation	761
2013	work & money	913
2013	writing & language	296
2014	clothing, beauty, & fashion	256
2014	computers & internet	686
2014	education	220
2014	food & drink	344
2014	grab bag	286
2014	health & fitness	587
2014	home & garden	482
2014	human relations	753
2014	law & government	233
2014	media & arts	716
2014	pets & animals	130
2014	religion & philosophy	34
2014	science & nature	132
2014	shopping	190
2014	society & culture	205
2014	sports, hobbies, & recreation	235
2014	technology	338
2014	travel & transportation	570
2014	work & money	682
2014	writing & language	222
	<!DOCTYPE html>
	<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">

	<style>
	:root {
	/* Dark theme */

	--bg: #fff;
	--text: #000;
	--tickLine: #eee;
	--baseLine: #aaa;
	--tickText: #999;
	--bar: #9b59b6;
	--font: 'Montserrat', sans-serif;
	/* --bg: #2c3e50;
	--text: #fff;
	--tickLine: rgba(255, 255, 255, 0.3);
	--tickText: rgba(255, 255, 255, 0.3); */
	}
	body {
	font: 12px sans-serif;
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font);

	}
	svg {
	overflow: visible;
	}
	* {
	box-sizing: border-box;
	}
	div {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	}
	.flex-row {
	display: flex;
	flex-direction: row;
	}
	.flex-center {
	align-items: center;
	}

	header {
	margin: 10px 20px 20px;
	}
	h1 {
	font-size: 24px;
	margin: 0;
	}


	.filter-item {
	padding: 10px 20px 0 0;
	}
	.cb-container {
	display: block;
	position: relative;
	padding-left: 24px;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	/* Hide the browser's default checkbox */
	.cb-input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
	}

	/* Create a custom checkbox */
	.cb-mark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: #eee;
	border-radius: 3px;
	transition: all 0.2s;
	}
	.cb-input:not(:checked) ~ .cb-label {
	color: #666;
	}
	.cb-container:hover .cb-input:not(:checked) ~ .cb-label {
	color: #444;
	}

	/* On mouse-over, add a grey background color */
	.cb-container:hover .cb-input:not(:checked) ~ .cb-mark {
	background-color: #ccc;
	}

	/* When the checkbox is checked, add a blue background */
	.cb-input:checked ~ .cb-mark {
	background-color: #2196F3;
	}

	/* Create the checkmark/indicator (hidden when not checked) */
	.cb-mark:after {
	content: "";
	position: absolute;
	display: none;
	}

	/* Show the checkmark when checked */
	.cb-input:checked ~ .cb-mark:after {
	display: block;
	}

	/* Style the checkmark/indicator */
	.cb-mark:after {
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg) scale(0.8);
	}


	.select-css {
	display: block;
	font-size: 16px;
	color: #666;
	line-height: 1.6;
	padding: 2px 1.3em 2px 8px;
	margin: 0;
	border: none;
	box-shadow: 0 1px 0 1px rgba(0,0,0,0);
	border-radius: 4px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: all 0.2s;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='silver'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat scroll 93% 64% #eee;
	font-family: var(--font);
	}
	.select-css::-ms-expand {
	display: none;
	}
	.select-css:hover {
	background-color: #ddd;
	}
	.select-css:focus {
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	outline: none;
	}
	.select-css option {
	font-weight:normal;
	}



	.cell-label {
	text-shadow: 0px 0px 10px var(--bg);
	fill: var(--text);
	opacity: 0.5;
	font-weight: bold;
	}
	.x-tick {
	dominant-baseline: hanging;
	font-size: 10px;
	fill: var(--tickText);
	}
	.tick line, .domain {
	stroke: var(--tickLine);
	}
	.tick text {
	fill: var(--tickText);
	}
	.consistent-y .cell:not(:first-child) .tick text,
	.consistent-y .cell:not(:first-child) .domain {
	display: none;
	}
	.baseline {
	stroke: var(--baseLine);
	}

	.bar {
	fill: var(--bar);
	}

	</style>

	<header>
	<div class="flex-row flex-center">
	<h1>United States COVID-19 Spread</h1>
	</div>
	<div class="flex-row flex-center">
	<div class="filter-item">
	<select id="field-select" class="select-css">
	<option value="cases">Confirmed Cases</option>
	<option value="deaths">Confirmed Deaths</option>
	<option value="newCases" selected>Daily New Cases</option>
	<option value="newDeaths">Daily New Deaths</option>
	</select>
	</div>
	<div class="filter-item">
	<select id="time-select" class="select-css">
	<option value="last7Days" selected>Last 7 days</option>
	<option value="last14Days" selected>Last 14 days</option>
	<option value="lastMonth">Last Month</option>
	<option value="all">All</option>
	</select>
	</div>
	<div class="filter-item">
	<label class="cb-container">
	<input type="checkbox" class="cb-input" id="cb-use-log-scale">
	<span class="cb-mark"></span>
	<span class="cb-label">Log Scale</span>
	</label>
	</div>
	<div class="filter-item">
	<label class="cb-container">
	<input type="checkbox" class="cb-input" id="cb-consistent-y" checked>
	<span class="cb-mark"></span>
	<span class="cb-label">Consistent Y-Axis</span>
	</label>
	</div>
	</div>
	</header>

	<div id="viz">
	<svg id="svg"></svg>
	</div>

	<script>

	let useLog = false;
	let data = null;
	let field = 'newCases';
	let timeFilter = 'last14Days';
	let consistentY = true;

	function processStates(csv) {
	const states = d3.nest()
	.key(k => k.state)
	.entries(csv);

	const extents = {
	date: [null, null],
	cases: [null, null],
	deaths: [null, null],
	newCases: [null, null],
	newDeaths: [null, null],
	};
	const keys = ['date', 'cases', 'deaths', 'newCases', 'newDeaths'];
	states.forEach(state => {
	const newValues = [];
	for (let i = 0; i < state.values.length; i++) {
	const prevRow = state.values[i - 1];
	const row = state.values[i];
	const [year, month, date] = row.date.split('-');
	const parsed = {
	...row,
	date: new Date(Number(year), Number(month) - 1, Number(date)),
	cases: Number(row.cases),
	deaths: Number(row.deaths),
	}
	if (prevRow) {
	parsed.newCases = parsed.cases - prevRow.cases;
	parsed.newDeaths = parsed.deaths - prevRow.deaths;
	} else {
	parsed.newCases = 0;
	parsed.newDeaths = 0;
	}
	newValues.push(parsed);

	keys.forEach(key => {
	if (extents[key][0] === null \|\| parsed[key] < extents[key][0]) {
	extents[key][0] = parsed[key];
	}
	if (extents[key][1] === null \|\| parsed[key] > extents[key][1]) {
	extents[key][1] = parsed[key];
	}
	});
	}
	state.values = newValues;
	});

	return {
	byState: states,
	stateExtents: extents,
	};
	}

	function last(arr) {
	return arr[arr.length - 1];
	}

	function render() {
	const {byState} = data;
	const extents = data.stateExtents;

	const groups = byState.slice(0);
	groups.sort((a, b) => {
	return last(b.values)[field] - last(a.values)[field];
	});

	const yScaleType = useLog ? 'scaleLog' : 'scaleLinear';

	const firstDate = extents.date[0];
	const lastDate = extents.date[1];

	let daysToShow;
	if (timeFilter === 'last7Days') {
	daysToShow = 7;
	} else if (timeFilter === 'last14Days') {
	daysToShow = 14;
	} else if (timeFilter === 'lastMonth') {
	daysToShow = 30;
	} else {
	daysToShow = d3.max(groups, g => g.values.length);
	}

	const numStates = groups.length;
	const chartWidth = 150;
	const chartPadding = 25;
	const chartHeight = 60;
	const yAxisWidth = 40;
	const xAxisHeight = 14;
	const winWidth = window.innerWidth;
	const barPad = daysToShow > 10 ? 1 : 2;

	const colWidth = chartWidth + chartPadding;
	const rowHeight = (chartHeight + xAxisHeight + chartPadding);

	const numCols = Math.floor((winWidth - yAxisWidth) / colWidth);
	const numRows = Math.ceil(numStates / numCols);

	const totalHeight = numRows * rowHeight;

	const xScale = d3.scaleBand()
	.domain(d3.range(daysToShow))
	.rangeRound([0, chartWidth])
	.paddingInner(barPad * daysToShow / chartWidth)
	.paddingOuter(barPad * 5 / chartWidth)
	const barWidth = xScale.bandwidth();

	function makeYScale(extent) {
	const domain = [Math.max(extent[0], 0), extent[1]];
	if (useLog && domain[0] === 0) {
	domain[0] = 1;
	}
	return d3[yScaleType]()
	.domain(domain)
	.range([chartHeight, 0]);
	}

	function makeAxis(scale) {
	const domainMax = scale.domain()[1];
	return d3.axisLeft(scale).ticks(!useLog ? 4 : domainMax < 100 ? 1 : domainMax < 1000 ? 2 : domainMax < 10000 ? 3 : 4)
	.tickSizeInner(-chartWidth)
	.tickSizeOuter(0)
	.tickFormat(d => {
	return formatYTick(d);
	});
	}
	const yScale = makeYScale(extents[field]);
	debugger;
	const yAxis = makeAxis(yScale);

	const $viz = d3.select('#viz');
	const $svg = d3.select('#svg');

	$svg.attr('class', consistentY ? 'consistent-y' : '');

	// Make sure we're starting fresh
	$svg.selectAll("*").remove();

	// Create grid of rows and columns
	const $rows = $svg
	.attr("viewBox", [0, 0, winWidth, totalHeight])
	.selectAll('g.row')
	.data(d3.range(numRows))
	.enter()
	.append('g')
	.attr('class', 'row')
	.attr('transform', row => `translate(${yAxisWidth}, ${row * rowHeight})`)

	// Add cells
	$rows.each(function(row) {
	d3.select(this)
	.selectAll('g.cell')
	.data(d3.range(numCols).map(i => ({row, col: i})))
	.enter()
	.append('g')
	.attr('class', 'cell')
	.attr('transform', d => `translate(${d.col * colWidth}, 0)`);
	})


	const $cells = $svg.selectAll('g.cell');

	// Add baseline
	$cells
	.append('line')
	.attr('class', 'baseline')
	.attr('y1', chartHeight)
	.attr('y2', chartHeight)
	.attr('x2', chartWidth)

	// Fill each cell with a chart
	$cells
	.each(function(d, index) {
	const $cell = d3.select(this);
	const data = groups[index];
	if (!data) {
	// TODO remove completely? Or is this handled already?
	return;
	}
	const values = data.values;

	// Add axis
	let cellYScale = yScale;
	let cellYAxis = yAxis;
	if (!consistentY) {
	const extent = d3.extent(values, d => d[field]);
	cellYScale = makeYScale(extent);
	cellYAxis = makeAxis(cellYScale);
	}

	$cell
	.append("g")
	.attr("transform", "translate(0,0)")
	.call(cellYAxis)

	// Add label
	$cell
	.append('text')
	.text(data.key)
	.attr('x', 6)
	.attr('y', 14)
	.attr('class', 'cell-label')

	// Get last $daysToShow items
	const shownValues = values.slice(Math.max(values.length - daysToShow, 0));
	$cell.selectAll('.bar')
	.data(shownValues)
	.enter()
	.append('rect')
	.attr('class', 'bar')
	.attr('width', barWidth)
	.attr('x', (d, i) => xScale(i))
	.attr('y', d => cellYScale(d[field]))
	.attr('height', d => chartHeight - cellYScale(d[field]))
	});

	// Add start dates
	const endDate = last(groups[0].values).date;
	const startDate = new Date(endDate);
	startDate.setDate(startDate.getDate() - daysToShow + 1);

	$cells
	.append('text')
	.attr('class', 'x-tick x-tick-start')
	.attr('text-anchor', 'start')
	.attr('x', 0)
	.attr('y', chartHeight + 4)
	.text(formatDate(startDate))

	$cells
	.append('text')
	.attr('class', 'x-tick x-tick-end')
	.attr('text-anchor', 'end')
	.attr('x', chartWidth)
	.attr('y', chartHeight + 4)
	.text(formatDate(endDate))


	}

	function formatDate(d) {
	return d.toLocaleString('default', {month: 'short', day: 'numeric'});
	}

	function formatYTick(n) {
	if (n >= 1e6) {
	return `${Math.round(n / 1e6)}m`;
	}
	if (n >= 1e3) {
	return `${Math.round(n / 1e3)}k`;
	}
	return n;
	}

	function attachEvents() {

	$('#field-select').change(function() {
	field = $(this).val();
	render();
	});
	$('#time-select').change(function() {
	timeFilter = $(this).val();
	console.log(timeFilter);
	render();
	});
	$('#cb-use-log-scale').change(function() {
	useLog = $(this).is(':checked');
	render();
	});
	$('#cb-consistent-y').change(function() {
	consistentY = $(this).is(':checked');
	render();
	});
	}

	d3.csv('us-states.csv').then(csv => {
	data = processStates(csv);
	render();
	});

	attachEvents();


	</script>