State selection

by Tom M

HTML

<body>
  <div class="outer_container">
    <div class='graphic'>
    </div>
    <div class='text'>
    </div>
    <div class='controls'>
    </div>
  </div>
</body>

CSS

* {
  box-sizing: border-box;
}

body {
  font-size: 12px;
}

.outer_container {
  border: 1px solid black;
  height: 100vh;
}

.graphic {
  height: 70vh;
    border: 1px solid green;
  display: flex;
    align-items: flex-end;
}

.text {
  height: 15vh;
    border: 1px solid red;
}

.tag {
  display: inline;
  text-orientation: mixed;
  writing-mode: vertical-rl;
  float: left;
  transform: rotate(180deg);
}

.bar { 
  background-color: lightgrey;
  height: 10%;
  transition: all 2s;
}

.animate {
}

JavaScript

let stateArray = [
  {
		"STATEFP": "06",
		"COUNTYFP": "001",
		"COUNAME": "Alameda",
		"STNAME": "California",
		"whitePopulationTotal": 649122,
		"blackPopulationTotal": 190451,
		"whitePopulationInst": 2187,
		"blackPopulationInst": 3157
	}, {
		"STATEFP": "06",
		"COUNTYFP": "003",
		"COUNAME": "Alpine",
		"STNAME": "California",
		"whitePopulationTotal": 881,
		"blackPopulationTotal": 0,
		"whitePopulationInst": 0,
		"blackPopulationInst": 0
	}, {
		"STATEFP": "06",
		"COUNTYFP": "005",
		"COUNAME": "Amador",
		"STNAME": "California",
		"whitePopulationTotal": 33149,
		"blackPopulationTotal": 962,
		"whitePopulationInst": 2565,
		"blackPopulationInst": 723
	}, {
		"STATEFP": "06",
		"COUNTYFP": "007",
		"COUNAME": "Butte",
		"STNAME": "California",
		"whitePopulationTotal": 180096,
		"blackPopulationTotal": 3415,
		"whitePopulationInst": 438,
		"blackPopulationInst": 46
	}, {
		"STATEFP": "06",
		"COUNTYFP": "009",
		"COUNAME": "Calaveras",
		"STNAME": "California",
		"whitePopulationTotal": 40522,
		"blackPopulationTotal": 383,
		"whitePopulationInst": 107,
		"blackPopulationInst": 29
	}, {
		"STATEFP": "06",
		"COUNTYFP": "011",
		"COUNAME": "Colusa",
		"STNAME": "California",
		"whitePopulationTotal": 13854,
		"blackPopulationTotal": 195,
		"whitePopulationInst": 42,
		"blackPopulationInst": 1
	}, {
		"STATEFP": "06",
		"COUNTYFP": "013",
		"COUNAME": "Contra Costa",
		"STNAME": "California",
		"whitePopulationTotal": 614512,
		"blackPopulationTotal": 97161,
		"whitePopulationInst": 630,
		"blackPopulationInst": 558
	}, {
		"STATEFP": "06",
		"COUNTYFP": "015",
		"COUNAME": "Del Norte",
		"STNAME": "California",
		"whitePopulationTotal": 21098,
		"blackPopulationTotal": 993,
		"whitePopulationInst": 2027,
		"blackPopulationInst": 885
	}, {
		"STATEFP": "06",
		"COUNTYFP": "017",
		"COUNAME": "El Dorado",
		"STNAME": "California",
		"whitePopulationTotal": 156793,
		"blackPopulationTotal": 1409,
		"whitePopulationInst": 330,
		"blackPopulationInst":...