ianrose · March 3, 2018 19:46
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/FluViewPhase8_Season57_Data-IDs.csv b/FluViewPhase8_Season57_Data-IDs.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CDC Weekly Influenza Activity Estimates Map</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }


    #viz {
      font-family: Arial, Helvetica, sans-serif;
      position: relative;
      max-width: 640px;
      margin: 12px auto;
      font-size: 12px;
    }

    .indicator {
      margin: 20px;
    }

    #map-svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
    }

    @media (min-width: 600px) {
      .legend {
        flex-direction: column;
        position: absolute;
        right: 0;
        bottom: 0;
        max-width: 140px;
      }
    }

    .key {
      display: flex;
      flex-wrap: nowrap;
      margin-bottom: 3px;
    }

    .key-swatch {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }

    .key-label {
      margin-right: 6px;
    }

    button {
      display: inline-block;
      margin-right: 10px;
      cursor: pointer;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/babel.min.js,npm/[email protected]/build/d3.min.js,npm/[email protected]/build/d3-simple-slider.min.js,npm/[email protected]/dist/topojson.min.js"></script>
 </head>

 <body>
  <div id="viz"></div>
  <script type="text/babel" src="index.js"></script>
 </body>

 </html>
diff --git a/index.js b/index.js
 const w = 600
 const h = 350
 const playSpeed = 250
 const mapScale = 0.58
 const vizSelector = '#viz'
 const sliderWidth = 600
 const csvURL = 'FluViewPhase8_Season57_Data-IDs.csv'
 const topoURL = 'us-topo.json'

 let year = '2017'

 // Colors
 const colors = [
  '#ebebeb',
  '#feebe2',
  '#fcc5c0',
  '#fa9fb5',
  '#f768a1',
  '#c51b8a'
 ]

 // Flu Activity
 const activities = [
  'No Report',
  'No Activity',
  'Sporadic',
  'Local Activity',
  'Regional',
  'Widespread'
 ]

 // Ugly function to set fill color of state based on flu "activity"
 function setActivityFill (weekIndex) {
  return function (d) {
    const weeks = d.properties.weeks
    if (weeks[weekIndex]) {
      const activity = weeks[weekIndex].ACTIVITYESTIMATE
      switch (activity) {
        case activities[0]:
          return colors[0]
        case activities[1]:
          return colors[1]
        case activities[2]:
          return colors[2]
        case activities[3]:
          return colors[3]
        case activities[4]:
          return colors[4]
        case activities[5]:
          return colors[5]
        default:
          return colors[0]
      }
    }
  }
 }

 // Start at first week of the season
 let weekIndex = 0
 let weekKey = []

 const simpleSlider = d3
  .sliderHorizontal()
  .min(0)
  .default(0)
  .max(18)
  .step(1)
  .width(sliderWidth - 20)
  .ticks(18)
  .displayValue(false)
  .on('onchange', function (val) {
    if (weekKey[val] < 40 && weekKey[val] > 0) {
      year = '2018'
    } else {
      year = '2017'
    }
    update(val)
    d3.select('#value').text(`${year}: Week ${weekKey[val]}`)
    if (val > (simpleSlider.max() - 1)) {
      clearInterval(playInterval)
    }
  })
  .on('start', function () {
    clearInterval(playInterval)
  })

 const value = d3
  .select(vizSelector)
  .append('div')
  .attr('id', 'value')

 d3.select(vizSelector)
  .append('div')
  .attr('id', 'slider')

 // Create button to increment by step
 const prevButton = d3
  .select(vizSelector)
  .append('button')
  .text('Prev')

 // Create button to increment slider
 const playButton = d3
  .select(vizSelector)
  .append('button')
  .text('Play')
  .attr('class', 'play')

 // Create button to stop incrementation of slider
 const pauseButton = d3
  .select(vizSelector)
  .append('button')
  .text('Pause')

 // Create button to increment by step
 const nextButton = d3
  .select(vizSelector)
  .append('button')
  .text('Next')

 playButton.on('click', () => {
  clearInterval(playInterval)
  playInterval = setInterval(function () {
    let simpleSliderVal = simpleSlider.value()
    let counter = simpleSliderVal + 1
    simpleSlider.value(counter)
  }, playSpeed)
 })

 // Handle click event, stop the interval
 pauseButton.on('click', () => {
  clearInterval(playInterval)
 })

 nextButton.on('click', () => {
  clearInterval(playInterval)
  let simpleSliderVal = simpleSlider.value()
  let counter = simpleSliderVal + 1
  simpleSlider.value(counter)
 })

 prevButton.on('click', () => {
  clearInterval(playInterval)
  let simpleSliderVal = simpleSlider.value()
  let counter = simpleSliderVal - 1
  simpleSlider.value(counter)
 })

 // Create SVG element
 d3.select(vizSelector)
  .append('svg')
  .attr('width', w)
  .attr('height', h)
  .attr('id', 'map-svg')
  .attr('viewBox', `0 0 ${w} ${h}`)
  .style('fill', 'white')

 const map = d3.select('#map-svg')
  .append('g')
  .attr('class', 'map')
  .attr('transform', `translate(0, 0) scale(${mapScale})`)

 // Define path generator
 const path = d3.geoPath().projection(null)

 // Play Interval
 let playInterval

 const update = function (weekIndex) {
  map.selectAll('path')
    .transition()
    .duration(200)
    .style('fill', setActivityFill(weekIndex))
 }

 d3.csv(csvURL, function (data) {
  const dataByState = d3.nest()
    .key(d => d.STATEID)
    .entries(data)

  const firstStateWeeks = dataByState[0].values

  firstStateWeeks.forEach((d, i) => weekKey.push(d.WEEK))

  year = '2017'

  value.text(`${year}: Week ${parseInt(weekKey[weekIndex])}`)

  d3.select('#slider')
    .append('svg')
    .attr('width', sliderWidth)
    .attr('height', 50)
    .append('g')
    .attr('transform', 'translate(10,10)')
    .call(simpleSlider)
    .selectAll('.tick text')
    .attr('class', (d, i) => `week-${weekKey[i]}`)
    .text((d, i) => weekKey[i])

  d3.json(topoURL, json => {
    const jsonStates = topojson.feature(json, json.objects.states).features
    for (let i = 0; i < dataByState.length; i++) {
      for (let j = 0; j < jsonStates.length; j++) {
        if (dataByState[i].key === jsonStates[j].id) {
          jsonStates[j].properties.weeks = dataByState[i].values
        }
      }
    }
    // Generate Key
    const legend = d3.select(vizSelector)
      .append('div')
      .attr('class', 'legend')

    colors.forEach(function (color, i) {
      legend.append('div')
        .attr('class', 'key')
    })

    const key = d3.selectAll('.key')

    key.each(function (d, i) {
      d3.select(this).append('div')
        .attr('class', 'key-swatch')
        .style('background-color', colors[i])

      d3.select(this).append('div')
        .attr('class', 'key-label')
        .text(activities[i])
    })

    d3.select(vizSelector)
      .append('p')
      .text('Source: CDC')
      .attr('class', 'credit')

    // Draw geo path in the SVG and run update
    map.selectAll('path')
      .data(jsonStates)
      .enter()
      .append('path')
      .attr('d', path)
      .style('fill', d => update(0))
  })
 })
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/us-topo.json b/us-topo.json
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CDC Weekly Influenza Activity Estimates Map</title>
	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	}

	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}


	#viz {
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
	max-width: 640px;
	margin: 12px auto;
	font-size: 12px;
	}

	.indicator {
	margin: 20px;
	}

	#map-svg {
	display: block;
	width: 100%;
	height: auto;
	}

	.legend {
	display: flex;
	flex-wrap: wrap;
	}

	@media (min-width: 600px) {
	.legend {
	flex-direction: column;
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 140px;
	}
	}

	.key {
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 3px;
	}

	.key-swatch {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	}

	.key-label {
	margin-right: 6px;
	}

	button {
	display: inline-block;
	margin-right: 10px;
	cursor: pointer;
	}
	</style>
	<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/babel.min.js,npm/[email protected]/build/d3.min.js,npm/[email protected]/build/d3-simple-slider.min.js,npm/[email protected]/dist/topojson.min.js"></script>
	</head>

	<body>
	<div id="viz"></div>
	<script type="text/babel" src="index.js"></script>
	</body>

	</html>
	const w = 600
	const h = 350
	const playSpeed = 250
	const mapScale = 0.58
	const vizSelector = '#viz'
	const sliderWidth = 600
	const csvURL = 'FluViewPhase8_Season57_Data-IDs.csv'
	const topoURL = 'us-topo.json'

	let year = '2017'

	// Colors
	const colors = [
	'#ebebeb',
	'#feebe2',
	'#fcc5c0',
	'#fa9fb5',
	'#f768a1',
	'#c51b8a'
	]

	// Flu Activity
	const activities = [
	'No Report',
	'No Activity',
	'Sporadic',
	'Local Activity',
	'Regional',
	'Widespread'
	]

	// Ugly function to set fill color of state based on flu "activity"
	function setActivityFill (weekIndex) {
	return function (d) {
	const weeks = d.properties.weeks
	if (weeks[weekIndex]) {
	const activity = weeks[weekIndex].ACTIVITYESTIMATE
	switch (activity) {
	case activities[0]:
	return colors[0]
	case activities[1]:
	return colors[1]
	case activities[2]:
	return colors[2]
	case activities[3]:
	return colors[3]
	case activities[4]:
	return colors[4]
	case activities[5]:
	return colors[5]
	default:
	return colors[0]
	}
	}
	}
	}

	// Start at first week of the season
	let weekIndex = 0
	let weekKey = []

	const simpleSlider = d3
	.sliderHorizontal()
	.min(0)
	.default(0)
	.max(18)
	.step(1)
	.width(sliderWidth - 20)
	.ticks(18)
	.displayValue(false)
	.on('onchange', function (val) {
	if (weekKey[val] < 40 && weekKey[val] > 0) {
	year = '2018'
	} else {
	year = '2017'
	}
	update(val)
	d3.select('#value').text(`${year}: Week ${weekKey[val]}`)
	if (val > (simpleSlider.max() - 1)) {
	clearInterval(playInterval)
	}
	})
	.on('start', function () {
	clearInterval(playInterval)
	})

	const value = d3
	.select(vizSelector)
	.append('div')
	.attr('id', 'value')

	d3.select(vizSelector)
	.append('div')
	.attr('id', 'slider')

	// Create button to increment by step
	const prevButton = d3
	.select(vizSelector)
	.append('button')
	.text('Prev')

	// Create button to increment slider
	const playButton = d3
	.select(vizSelector)
	.append('button')
	.text('Play')
	.attr('class', 'play')

	// Create button to stop incrementation of slider
	const pauseButton = d3
	.select(vizSelector)
	.append('button')
	.text('Pause')

	// Create button to increment by step
	const nextButton = d3
	.select(vizSelector)
	.append('button')
	.text('Next')

	playButton.on('click', () => {
	clearInterval(playInterval)
	playInterval = setInterval(function () {
	let simpleSliderVal = simpleSlider.value()
	let counter = simpleSliderVal + 1
	simpleSlider.value(counter)
	}, playSpeed)
	})

	// Handle click event, stop the interval
	pauseButton.on('click', () => {
	clearInterval(playInterval)
	})

	nextButton.on('click', () => {
	clearInterval(playInterval)
	let simpleSliderVal = simpleSlider.value()
	let counter = simpleSliderVal + 1
	simpleSlider.value(counter)
	})

	prevButton.on('click', () => {
	clearInterval(playInterval)
	let simpleSliderVal = simpleSlider.value()
	let counter = simpleSliderVal - 1
	simpleSlider.value(counter)
	})

	// Create SVG element
	d3.select(vizSelector)
	.append('svg')
	.attr('width', w)
	.attr('height', h)
	.attr('id', 'map-svg')
	.attr('viewBox', `0 0 ${w} ${h}`)
	.style('fill', 'white')

	const map = d3.select('#map-svg')
	.append('g')
	.attr('class', 'map')
	.attr('transform', `translate(0, 0) scale(${mapScale})`)

	// Define path generator
	const path = d3.geoPath().projection(null)

	// Play Interval
	let playInterval

	const update = function (weekIndex) {
	map.selectAll('path')
	.transition()
	.duration(200)
	.style('fill', setActivityFill(weekIndex))
	}

	d3.csv(csvURL, function (data) {
	const dataByState = d3.nest()
	.key(d => d.STATEID)
	.entries(data)

	const firstStateWeeks = dataByState[0].values

	firstStateWeeks.forEach((d, i) => weekKey.push(d.WEEK))

	year = '2017'

	value.text(`${year}: Week ${parseInt(weekKey[weekIndex])}`)

	d3.select('#slider')
	.append('svg')
	.attr('width', sliderWidth)
	.attr('height', 50)
	.append('g')
	.attr('transform', 'translate(10,10)')
	.call(simpleSlider)
	.selectAll('.tick text')
	.attr('class', (d, i) => `week-${weekKey[i]}`)
	.text((d, i) => weekKey[i])

	d3.json(topoURL, json => {
	const jsonStates = topojson.feature(json, json.objects.states).features
	for (let i = 0; i < dataByState.length; i++) {
	for (let j = 0; j < jsonStates.length; j++) {
	if (dataByState[i].key === jsonStates[j].id) {
	jsonStates[j].properties.weeks = dataByState[i].values
	}
	}
	}
	// Generate Key
	const legend = d3.select(vizSelector)
	.append('div')
	.attr('class', 'legend')

	colors.forEach(function (color, i) {
	legend.append('div')
	.attr('class', 'key')
	})

	const key = d3.selectAll('.key')

	key.each(function (d, i) {
	d3.select(this).append('div')
	.attr('class', 'key-swatch')
	.style('background-color', colors[i])

	d3.select(this).append('div')
	.attr('class', 'key-label')
	.text(activities[i])
	})

	d3.select(vizSelector)
	.append('p')
	.text('Source: CDC')
	.attr('class', 'credit')

	// Draw geo path in the SVG and run update
	map.selectAll('path')
	.data(jsonStates)
	.enter()
	.append('path')
	.attr('d', path)
	.style('fill', d => update(0))
	})
	})