Covid multiples

Built with blockbuilder.org

forked from ColinEberhardt's block: Interactive Small Multiples - Step 1

forked from ColinEberhardt's block: Interactive Small Multiples - Step 2

forked from ColinEberhardt's block: Interactive Small Multiples - Step 3

forked from ColinEberhardt's block: Interactive Small Multiples - Step 4

forked from ColinEberhardt's block: Interactive Small Multiples - Step 5

forked from lorenzopub's block: Interactive Small Multiples - Step 5

<!DOCTYPE html>
<script src="https://unpkg.com/d3@5.15.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">

--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='https://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>

}
  
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>

https://unpkg.com/d3@5.15.0/dist/d3.min.js

https://unpkg.com/jquery@3.4.1/dist/jquery.js