oshoham · November 21, 2023 17:12
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>People Killed By The Police In The U.S. In 2015</title>
    
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
    <link href="main.css" rel="stylesheet" type="text/css">
    <script src="https://d3js.org/d3.v3.min.js" defer></script>
    <script src="https://d3js.org/queue.v1.min.js" defer></script>
    <script src="https://d3js.org/topojson.v1.min.js" defer></script>
    <script src="https://d3js.org/d3-path.v0.1.min.js" defer></script>
    <script src="https://d3js.org/d3-shape.v0.5.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.8.0/d3-legend.min.js" defer></script>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js" defer></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" defer></script>
    <script type="text/javascript" src="index.js" defer></script>
  </head>
  <body>
    <a href="#" class="show-legend">Show Legend</a>
    <div class="controls">
      <div class="controls__photo"></div>
      <div class="controls__info">
        <div class="controls__info__name"></div>
        <div class="controls__info__demographics"></div>
        <div class="controls__info__location"></div>
        <div class="controls__info__classification"></div>
        <div class="controls__info__armed"></div>
      </div>
      <div class="controls__filters">
        <div class="controls__filters__gender">
          <label for="gender">Gender</label>
          <select name="gender"></select>
        </div>
        <div class="controls__filters__raceethnicity">
          <label for="raceethnicity">Race/Ethnicity</label>
          <select name="raceethnicity"></select>
        </div>
        <div class="controls__filters__classification">
          <label for="classification">Classification</label>
          <select name="classification"></select>
        </div>
        <div class="controls__filters__armed">
          <label for="armed">Armed</label>
          <select name="armed"></select>
        </div>
        <div class="controls__filters__age">
          Age: <span id="age"></span>
          <div id="age-range"></div>
        </div>
        <div class="controls__filters__date">
          Date: <span id="date"></span>
          <div id="date-range"></div>
        </div>
      </div>
    </div>
  </body>
 </html>
diff --git a/index.js b/index.js
  var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  
  var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([width / 2 - width / 8, height / 2]);
  
  var path = d3.geo.path()
    .projection(projection);
  
  var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);
  
  var people = [];
  
  queue()
    .defer(d3.json, 'us.json')
    .defer(d3.csv, 'the-counted-2015-with-coordinates.csv', function (d) {
      var person = d3.map(d);
      var imageUrlSuffix = person.get('name').toLowerCase().split(' ').join('-') + '-' + person.get('uid') + '.jpg';
      person.set('imageUrl', 'https://interactive.guim.co.uk/2015/the-counted/images/blackandwhite/' + imageUrlSuffix);
      person.set('coordinates', [Number(person.get('longitude')), Number(person.get('latitude'))]);
      person.set('date', new Date([person.get('month'), person.get('day'), person.get('year')].join(' ')));
      people.push(person)
    })
    .await(ready);
    
  function ready (error, us) {
    if (error) { throw error; }
    
    svg.append('rect')
      .attr('class', 'background')
      .attr('width', width)
      .attr('height', height)
      .on('click', clicked);
    
    var states = svg.append('g')
      .attr('class', 'states');
    
    states.selectAll('path')
      .data(topojson.feature(us, us.objects.states).features)
    .enter().append('path')
      .attr('class', 'state')
      .attr('id', function (d) { return d.properties.code; })
      .attr('d', path)
      .on('click', clicked);
      
    // handle zooming in/out and centering on click
    
    var k = 1;
    var centered;
    
    // legends
    
    var genderSymbols = d3.scale.ordinal()
      .domain(d3.map(people, function (d) { return d.get('gender'); }).keys())
      .range([d3_shape.symbolCircle, d3_shape.symbolTriangle, d3_shape.symbolSquare]);
    
    var raceEthnicityColors = d3.scale.ordinal()
      .domain(d3.map(people, function (d) { return d.get('raceethnicity'); }).keys())
      .range([
        '#1f77b4',
        '#2ca02c',
        '#d62728',
        '#9467bd',
        '#8c564b',
        '#e377c2',
        '#7f7f7f',
        '#bcbd22',
        '#17becf'
      ]);
    
    svg.append('g')
      .attr('id', 'race-ethnicity-legend')
      .attr('class', 'legend legend--hidden')
      .attr('transform', 'translate(20,20)');
      
    var raceEthnicityLegend = d3.legend.color()
      .scale(raceEthnicityColors)
      .on('cellclick', function () { toggleLegends(false); });
    
    svg.select('#race-ethnicity-legend').call(raceEthnicityLegend);
    
    svg.append('g')
      .attr('id', 'gender-legend')
      .attr('class', 'legend legend--hidden')
      .attr('transform', 'translate(27,165)');
    
    var genderLegend = d3.legend.symbol()
      .scale(genderSymbols.copy().range([d3_shape.symbolCircle, d3_shape.symbolTriangle, d3_shape.symbolSquare].map(function (symbolType) {
        return d3_shape.symbol().type(symbolType)();
      })))
      .on('cellclick', function () { toggleLegends(false); });
      
    svg.select('#gender-legend').call(genderLegend);
    
    d3.select('.show-legend').on('click', function () {
      d3.event.preventDefault();
      toggleLegends(true);
    })
    
    function toggleLegends (showLegends) {
      d3.selectAll('.legend').classed('legend--hidden', !showLegends);
      d3.select('.show-legend').classed('show-legend--hidden', showLegends);
    }
    
    // data filtering controls
    
    var filters = d3.map({
      gender: 'Any',
      raceethnicity: 'Any',
      classification: 'Any',
      armed: 'Any',
      age: d3.extent(people.map(function (person) { return Number(person.get('age')); })),
      date: d3.extent(people.map(function (person) { return person.get('date'); }))
    });
    
    d3.select('.controls').style('height', height + 'px');
    
    d3.select('.controls__filters').selectAll('select')
      .on('change', function () {
        filters.set(this.name, this.value);
        displayData(filterData(filters));
      });
    
    ['gender', 'raceethnicity', 'classification', 'armed'].forEach(function (attribute) {
      var options = d3.select('select[name="' + attribute + '"]').selectAll('option')
        .data(['Any'].concat(d3.map(people, function (d) { return d.get(attribute); }).keys()));
  
      options.enter().append('option')
        .attr('value', function (d) { return d; })
        .attr('label', function (d) { return d; })
        .attr('selected', function (d) { return d === 'Any' ? 'selected' : null; })
        .html(function (d) { return d; });
        
      options.exit().remove();
    });
  
    var ageExtent = d3.extent(people.map(function (d) { return Number(d.get('age')); }));
    $('#age-range').slider({
      range: true,
      min: ageExtent[0],
      max: ageExtent[1],
      values: ageExtent,
      slide: function( event, ui ) {
        d3.select('#age').html(ui.values.join(' - '));
        filters.set('age', ui.values);
        displayData(filterData(filters));
      }
    });
    d3.select('#age').html($('#age-range').slider('values').join(' - '));
  
    var months = [
      "January", "February", "March",
      "April", "May", "June", "July",
      "August", "September", "October",
      "November", "December"
  	];
    var dateExtent = d3.extent(people.map(function (d) { return d.get('date').getTime(); }));
    $('#date-range').slider({
      range: true,
      min: dateExtent[0],
      max: dateExtent[1],
      values: dateExtent,
      slide: function( event, ui ) {
        var values = ui.values.map(function (d) { return new Date(d); })
        d3.select('#date').html(values.map(function (value) { return months[value.getMonth()] + ' ' + value.getDate(); }).join(' - '));
        filters.set('date', values);
        displayData(filterData(filters));
      }
    });
    d3.select('#date').html($('#date-range').slider('values').map(function (value) {
      value = new Date(value);
      return months[value.getMonth()] + ' ' + value.getDate();
    }).join(' - '));
    
    // functions
    
    function clicked (d) {
      var x, y;
  
      if (d && centered !== d) {
        var centroid = path.centroid(d);
        x = centroid[0];
        y = centroid[1];
        k = 4;
        centered = d;
      } else {
        x = width / 2;
        y = height / 2;
        k = 1;
        centered = null;
      }
  
      states.selectAll('path.state')
        .classed('state--active', centered && function(d) { return d === centered; });
  
      states.transition()
        .duration(750)
        .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')scale(' + k + ')translate(' + -x + ',' + -y + ')')
        .style('stroke-width', 1.5 / k + 'px');
      
      states.selectAll('.killing').transition()
        .duration(750)
        .attr('d', function (d) {
          var symbolType = genderSymbols(d.get('gender'));
          var symbol = d3_shape.symbol().type(symbolType).size(32 * (1 / k));
          return symbol();
        });
    }
    
    function displayData (data) {
      var selection = states.selectAll('.killing').data(data)
      
      selection.enter().append('path')
        .attr('class', 'killing');
        
      selection
        .attr('d', function (d) {
          var symbolType = genderSymbols(d.get('gender'));
          var symbol = d3_shape.symbol().type(symbolType).size(32 * (1 / k));
          return symbol();
        })
        .attr('transform', function (d) {
          var projectedCoordinates = projection(d.get('coordinates'));
          return 'translate(' + projectedCoordinates[0] + ', ' + projectedCoordinates[1] + ')';
        })
        .attr('fill', function (d) { return raceEthnicityColors(d.get('raceethnicity')); })
        .on('mouseover', displayPersonalInfo);
        
      selection.exit().remove();
    }
    
    function filterData (filters) {
      return filters.entries().reduce(function (filteredPeople, filter) {
        var filterName = filter.key;
        var filterValue = filter.value;
        
        switch (filterName) {
          case 'gender':
          case 'raceethnicity':
          case 'classification':
          case 'armed':
            return filterValue === 'Any' ? filteredPeople : filteredPeople.filter(function (person) {
              return person.get(filterName) === filterValue;
            });
          case 'age':
          case 'date':
            return filteredPeople.filter(function (person) {
              var value = person.get(filterName);
              return value >= filterValue[0] && value <= filterValue[1];
            });
          default:
            return filteredPeople;
        }
      }, people);
    }
    
    function displayPersonalInfo (person) {
      d3.select('.controls__info').classed('controls__info__empty', false);
      d3.select('.controls__photo').attr('style', 'background-image: url(' + person.get('imageUrl') + ')');
      d3.select('.controls__info__name').html(person.get('name'));
      d3.select('.controls__info__demographics').html(person.get('raceethnicity') + ' ' + person.get('gender') + ', ' + person.get('age'));
      d3.select('.controls__info__location').html([person.get('streetaddress'), person.get('city'), person.get('state')].filter(function (s) { return s; }).join(', '));
      d3.select('.controls__info__classification').html('Cause of Death: ' + person.get('classification'));
      var armed = person.get('armed');
      d3.select('.controls__info__armed').html(armed === 'No' ? 'Unarmed' : 'Armed With: ' + armed);
    }
    
    // initial data display
    
    displayData(people);
  }
diff --git a/main.css b/main.css
 html, body {
  height: 100%;
  width: 100%;
 }

 body {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
 }

 label {
  margin-right: 5px;
 }

 image[src=""] {
  display: none;
 }

 .tip {
  line-height: 1.5;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 0px;
  text-align: center;
 }

 .state {
  fill: #ddd;
  stroke: #fff;
  stroke-width: 1px;
  stroke-linejoin: round;
  stroke-linecap: round;
 }

 .state--active {
  fill: orange;
 }

 .killing {
  stroke-width: 0;
 }

 .killing:hover {
  fill-opacity: 0.5;
 }

 .background {
  fill: none;
  pointer-events: all;
 }

 .controls {
  position: absolute;
  right: 0;
  top: 0;
  width: 250px;
  box-sizing: border-box;
  border: 0;
  border-left: 1px solid threedface;
  background: white;
 }

 .controls__photo {
  height: 45%;
  background-color: #666;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 }

 .controls__info {
  text-align: center;
  border-bottom: 1px solid threedface;
 }

 .controls__info {
  padding: 5px;
  min-height: 90px;
 }

 .controls__filters {
  padding: 10px;
  margin: 0;
 }

 .controls__info__name {
  font-size: 16px;
  font-weight: bold;
 }

 .controls__filters__age {
  margin-bottom: 5px;
 }

 #age-range, #date-range {
  margin-top: 5px;
 }

 .ui-slider-handle:focus {
  outline: none;
 }

 .show-legend {
  position: absolute;
  top: 10px;
  left: 10px;
 }

 .legend:hover {
  cursor: pointer;
 }

 .legend--hidden, .show-legend--hidden {
  display: none;
 }
diff --git a/the-counted-2015-with-coordinates.csv b/the-counted-2015-with-coordinates.csv
diff --git a/us.json b/us.json
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>People Killed By The Police In The U.S. In 2015</title>

	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
	<link href="main.css" rel="stylesheet" type="text/css">
	<script src="https://d3js.org/d3.v3.min.js" defer></script>
	<script src="https://d3js.org/queue.v1.min.js" defer></script>
	<script src="https://d3js.org/topojson.v1.min.js" defer></script>
	<script src="https://d3js.org/d3-path.v0.1.min.js" defer></script>
	<script src="https://d3js.org/d3-shape.v0.5.min.js" defer></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.8.0/d3-legend.min.js" defer></script>
	<script src="https://code.jquery.com/jquery-1.10.2.min.js" defer></script>
	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" defer></script>
	<script type="text/javascript" src="index.js" defer></script>
	</head>
	<body>
	<a href="#" class="show-legend">Show Legend</a>
	<div class="controls">
	<div class="controls__photo"></div>
	<div class="controls__info">
	<div class="controls__info__name"></div>
	<div class="controls__info__demographics"></div>
	<div class="controls__info__location"></div>
	<div class="controls__info__classification"></div>
	<div class="controls__info__armed"></div>
	</div>
	<div class="controls__filters">
	<div class="controls__filters__gender">
	<label for="gender">Gender</label>
	<select name="gender"></select>
	</div>
	<div class="controls__filters__raceethnicity">
	<label for="raceethnicity">Race/Ethnicity</label>
	<select name="raceethnicity"></select>
	</div>
	<div class="controls__filters__classification">
	<label for="classification">Classification</label>
	<select name="classification"></select>
	</div>
	<div class="controls__filters__armed">
	<label for="armed">Armed</label>
	<select name="armed"></select>
	</div>
	<div class="controls__filters__age">
	Age: <span id="age"></span>
	<div id="age-range"></div>
	</div>
	<div class="controls__filters__date">
	Date: <span id="date"></span>
	<div id="date-range"></div>
	</div>
	</div>
	</div>
	</body>
	</html>
	var width = Math.max(document.documentElement.clientWidth, window.innerWidth \|\| 0);
	var height = Math.max(document.documentElement.clientHeight, window.innerHeight \|\| 0);

	var projection = d3.geo.albersUsa()
	.scale(width)
	.translate([width / 2 - width / 8, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

	var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height);

	var people = [];

	queue()
	.defer(d3.json, 'us.json')
	.defer(d3.csv, 'the-counted-2015-with-coordinates.csv', function (d) {
	var person = d3.map(d);
	var imageUrlSuffix = person.get('name').toLowerCase().split(' ').join('-') + '-' + person.get('uid') + '.jpg';
	person.set('imageUrl', 'https://interactive.guim.co.uk/2015/the-counted/images/blackandwhite/' + imageUrlSuffix);
	person.set('coordinates', [Number(person.get('longitude')), Number(person.get('latitude'))]);
	person.set('date', new Date([person.get('month'), person.get('day'), person.get('year')].join(' ')));
	people.push(person)
	})
	.await(ready);

	function ready (error, us) {
	if (error) { throw error; }

	svg.append('rect')
	.attr('class', 'background')
	.attr('width', width)
	.attr('height', height)
	.on('click', clicked);

	var states = svg.append('g')
	.attr('class', 'states');

	states.selectAll('path')
	.data(topojson.feature(us, us.objects.states).features)
	.enter().append('path')
	.attr('class', 'state')
	.attr('id', function (d) { return d.properties.code; })
	.attr('d', path)
	.on('click', clicked);

	// handle zooming in/out and centering on click

	var k = 1;
	var centered;

	// legends

	var genderSymbols = d3.scale.ordinal()
	.domain(d3.map(people, function (d) { return d.get('gender'); }).keys())
	.range([d3_shape.symbolCircle, d3_shape.symbolTriangle, d3_shape.symbolSquare]);

	var raceEthnicityColors = d3.scale.ordinal()
	.domain(d3.map(people, function (d) { return d.get('raceethnicity'); }).keys())
	.range([
	'#1f77b4',
	'#2ca02c',
	'#d62728',
	'#9467bd',
	'#8c564b',
	'#e377c2',
	'#7f7f7f',
	'#bcbd22',
	'#17becf'
	]);

	svg.append('g')
	.attr('id', 'race-ethnicity-legend')
	.attr('class', 'legend legend--hidden')
	.attr('transform', 'translate(20,20)');

	var raceEthnicityLegend = d3.legend.color()
	.scale(raceEthnicityColors)
	.on('cellclick', function () { toggleLegends(false); });

	svg.select('#race-ethnicity-legend').call(raceEthnicityLegend);

	svg.append('g')
	.attr('id', 'gender-legend')
	.attr('class', 'legend legend--hidden')
	.attr('transform', 'translate(27,165)');

	var genderLegend = d3.legend.symbol()
	.scale(genderSymbols.copy().range([d3_shape.symbolCircle, d3_shape.symbolTriangle, d3_shape.symbolSquare].map(function (symbolType) {
	return d3_shape.symbol().type(symbolType)();
	})))
	.on('cellclick', function () { toggleLegends(false); });

	svg.select('#gender-legend').call(genderLegend);

	d3.select('.show-legend').on('click', function () {
	d3.event.preventDefault();
	toggleLegends(true);
	})

	function toggleLegends (showLegends) {
	d3.selectAll('.legend').classed('legend--hidden', !showLegends);
	d3.select('.show-legend').classed('show-legend--hidden', showLegends);
	}

	// data filtering controls

	var filters = d3.map({
	gender: 'Any',
	raceethnicity: 'Any',
	classification: 'Any',
	armed: 'Any',
	age: d3.extent(people.map(function (person) { return Number(person.get('age')); })),
	date: d3.extent(people.map(function (person) { return person.get('date'); }))
	});

	d3.select('.controls').style('height', height + 'px');

	d3.select('.controls__filters').selectAll('select')
	.on('change', function () {
	filters.set(this.name, this.value);
	displayData(filterData(filters));
	});

	['gender', 'raceethnicity', 'classification', 'armed'].forEach(function (attribute) {
	var options = d3.select('select[name="' + attribute + '"]').selectAll('option')
	.data(['Any'].concat(d3.map(people, function (d) { return d.get(attribute); }).keys()));

	options.enter().append('option')
	.attr('value', function (d) { return d; })
	.attr('label', function (d) { return d; })
	.attr('selected', function (d) { return d === 'Any' ? 'selected' : null; })
	.html(function (d) { return d; });

	options.exit().remove();
	});

	var ageExtent = d3.extent(people.map(function (d) { return Number(d.get('age')); }));
	$('#age-range').slider({
	range: true,
	min: ageExtent[0],
	max: ageExtent[1],
	values: ageExtent,
	slide: function( event, ui ) {
	d3.select('#age').html(ui.values.join(' - '));
	filters.set('age', ui.values);
	displayData(filterData(filters));
	}
	});
	d3.select('#age').html($('#age-range').slider('values').join(' - '));

	var months = [
	"January", "February", "March",
	"April", "May", "June", "July",
	"August", "September", "October",
	"November", "December"
	];
	var dateExtent = d3.extent(people.map(function (d) { return d.get('date').getTime(); }));
	$('#date-range').slider({
	range: true,
	min: dateExtent[0],
	max: dateExtent[1],
	values: dateExtent,
	slide: function( event, ui ) {
	var values = ui.values.map(function (d) { return new Date(d); })
	d3.select('#date').html(values.map(function (value) { return months[value.getMonth()] + ' ' + value.getDate(); }).join(' - '));
	filters.set('date', values);
	displayData(filterData(filters));
	}
	});
	d3.select('#date').html($('#date-range').slider('values').map(function (value) {
	value = new Date(value);
	return months[value.getMonth()] + ' ' + value.getDate();
	}).join(' - '));

	// functions

	function clicked (d) {
	var x, y;

	if (d && centered !== d) {
	var centroid = path.centroid(d);
	x = centroid[0];
	y = centroid[1];
	k = 4;
	centered = d;
	} else {
	x = width / 2;
	y = height / 2;
	k = 1;
	centered = null;
	}

	states.selectAll('path.state')
	.classed('state--active', centered && function(d) { return d === centered; });

	states.transition()
	.duration(750)
	.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')scale(' + k + ')translate(' + -x + ',' + -y + ')')
	.style('stroke-width', 1.5 / k + 'px');

	states.selectAll('.killing').transition()
	.duration(750)
	.attr('d', function (d) {
	var symbolType = genderSymbols(d.get('gender'));
	var symbol = d3_shape.symbol().type(symbolType).size(32 * (1 / k));
	return symbol();
	});
	}

	function displayData (data) {
	var selection = states.selectAll('.killing').data(data)

	selection.enter().append('path')
	.attr('class', 'killing');

	selection
	.attr('d', function (d) {
	var symbolType = genderSymbols(d.get('gender'));
	var symbol = d3_shape.symbol().type(symbolType).size(32 * (1 / k));
	return symbol();
	})
	.attr('transform', function (d) {
	var projectedCoordinates = projection(d.get('coordinates'));
	return 'translate(' + projectedCoordinates[0] + ', ' + projectedCoordinates[1] + ')';
	})
	.attr('fill', function (d) { return raceEthnicityColors(d.get('raceethnicity')); })
	.on('mouseover', displayPersonalInfo);

	selection.exit().remove();
	}

	function filterData (filters) {
	return filters.entries().reduce(function (filteredPeople, filter) {
	var filterName = filter.key;
	var filterValue = filter.value;

	switch (filterName) {
	case 'gender':
	case 'raceethnicity':
	case 'classification':
	case 'armed':
	return filterValue === 'Any' ? filteredPeople : filteredPeople.filter(function (person) {
	return person.get(filterName) === filterValue;
	});
	case 'age':
	case 'date':
	return filteredPeople.filter(function (person) {
	var value = person.get(filterName);
	return value >= filterValue[0] && value <= filterValue[1];
	});
	default:
	return filteredPeople;
	}
	}, people);
	}

	function displayPersonalInfo (person) {
	d3.select('.controls__info').classed('controls__info__empty', false);
	d3.select('.controls__photo').attr('style', 'background-image: url(' + person.get('imageUrl') + ')');
	d3.select('.controls__info__name').html(person.get('name'));
	d3.select('.controls__info__demographics').html(person.get('raceethnicity') + ' ' + person.get('gender') + ', ' + person.get('age'));
	d3.select('.controls__info__location').html([person.get('streetaddress'), person.get('city'), person.get('state')].filter(function (s) { return s; }).join(', '));
	d3.select('.controls__info__classification').html('Cause of Death: ' + person.get('classification'));
	var armed = person.get('armed');
	d3.select('.controls__info__armed').html(armed === 'No' ? 'Unarmed' : 'Armed With: ' + armed);
	}

	// initial data display

	displayData(people);
	}
	html, body {
	height: 100%;
	width: 100%;
	}

	body {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 400;
	margin: 0;
	}

	label {
	margin-right: 5px;
	}

	image[src=""] {
	display: none;
	}

	.tip {
	line-height: 1.5;
	padding: 8px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 0px;
	text-align: center;
	}

	.state {
	fill: #ddd;
	stroke: #fff;
	stroke-width: 1px;
	stroke-linejoin: round;
	stroke-linecap: round;
	}

	.state--active {
	fill: orange;
	}

	.killing {
	stroke-width: 0;
	}

	.killing:hover {
	fill-opacity: 0.5;
	}

	.background {
	fill: none;
	pointer-events: all;
	}

	.controls {
	position: absolute;
	right: 0;
	top: 0;
	width: 250px;
	box-sizing: border-box;
	border: 0;
	border-left: 1px solid threedface;
	background: white;
	}

	.controls__photo {
	height: 45%;
	background-color: #666;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}

	.controls__info {
	text-align: center;
	border-bottom: 1px solid threedface;
	}

	.controls__info {
	padding: 5px;
	min-height: 90px;
	}

	.controls__filters {
	padding: 10px;
	margin: 0;
	}

	.controls__info__name {
	font-size: 16px;
	font-weight: bold;
	}

	.controls__filters__age {
	margin-bottom: 5px;
	}

	#age-range, #date-range {
	margin-top: 5px;
	}

	.ui-slider-handle:focus {
	outline: none;
	}

	.show-legend {
	position: absolute;
	top: 10px;
	left: 10px;
	}

	.legend:hover {
	cursor: pointer;
	}

	.legend--hidden, .show-legend--hidden {
	display: none;
	}