From e374e79ae0bd0597ac4a33d56e2b47d7fca57e45 Mon Sep 17 00:00:00 2001 From: LKMason Date: Thu, 25 Jan 2024 12:01:36 -0500 Subject: [PATCH] Applied new style to all plot pages --- src/layouts/header/header.html | 6 +- .../{prototypePage.js => demographicsPage.js} | 12 +- src/pages/mapPage.js | 56 +++- src/pages/quantilePage.js | 30 +- src/utils/helper.js | 60 ++-- src/utils/mapPlots.js | 16 + src/utils/quantilePlots.js | 2 + static/css/epitracker-prototype.css | 5 +- static/css/epitracker.css | 274 +++++++++++++++- .../{prototype.html => demographics.html} | 38 ++- visualization/map.html | 310 ++++++++---------- visualization/quantile.html | 271 +++++++-------- 12 files changed, 647 insertions(+), 433 deletions(-) rename src/pages/{prototypePage.js => demographicsPage.js} (97%) rename visualization/{prototype.html => demographics.html} (92%) diff --git a/src/layouts/header/header.html b/src/layouts/header/header.html index b7cccc8..68fb53b 100644 --- a/src/layouts/header/header.html +++ b/src/layouts/header/header.html @@ -12,7 +12,7 @@
-
+
NCI Data Platform Logo @@ -57,8 +57,8 @@ title="Map Visualization">Map
  • - Demographic + Demographics
  • diff --git a/src/pages/prototypePage.js b/src/pages/demographicsPage.js similarity index 97% rename from src/pages/prototypePage.js rename to src/pages/demographicsPage.js index ca8baa8..66a1aaf 100644 --- a/src/pages/prototypePage.js +++ b/src/pages/demographicsPage.js @@ -10,7 +10,6 @@ import choices from 'https://cdn.jsdelivr.net/npm/choices.js@10.2.0/+esm'; import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7.8.5/+esm'; import { hookCheckbox, hookSelectChoices } from "../utils/input2.js"; import { plotDemographicPlots } from "../utils/demographicPlots.js"; -import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"; window.onload = async () => { @@ -26,7 +25,7 @@ const NUMERIC_MEASURES = ["crude_rate", "age_adjusted_rate"] // The default state, shown if no URL params. const INITIAL_STATE = { - compareBar: "sex", + compareBar: "race", compareFacet: "none", sex: "All", race: "All", @@ -45,11 +44,14 @@ export function init() { state = new State dataManager = new EpiTrackerData() elements = { - barContainer: document.getElementById("bar-container"), - sidebar: document.getElementById("ex-sidebar"), - title: document.getElementById("graph-title") + barContainer: document.getElementById("plot-container"), + sidebar: document.getElementById("sidebar"), + title: document.getElementById("plot-title") } + + elements.barContainer.style.height = elements.barContainer.style.maxHeight + console.log("Set height", elements.barContainer.style.maxHeight) initializeState() } diff --git a/src/pages/mapPage.js b/src/pages/mapPage.js index 397c2d5..d58c032 100644 --- a/src/pages/mapPage.js +++ b/src/pages/mapPage.js @@ -12,6 +12,8 @@ import { plotMortalityMapGrid } from "../utils/mapPlots.js"; import { dataToTableData, initSidebar, downloadMortalityData, createDropdownDownloadButton, formatCauseName, createOptionSorter } from "../utils/helper.js"; import { downloadElementAsImage } from "../utils/download.js"; +import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7.8.5/+esm'; + window.onload = async () => { await start(); @@ -122,9 +124,9 @@ function initializeState() { {id: "#select-select-year", propertyName: "year", forceEnd: "2018-2020"}, {id: "#select-measure", propertyName: "measure"}, {id: "#select-level", propertyName: "spatialLevel"}, - {id: "#select-state", propertyName: "areaState", searchable: true}, - {id: "#select-county", propertyName: "areaCounty", searchable: true}, - {id: "#select-scheme", propertyName: "scheme", searchable: true}, + {id: "#select-select-state", propertyName: "areaState", searchable: true}, + {id: "#select-select-county", propertyName: "areaCounty", searchable: true}, + // {id: "#select-scheme", propertyName: "scheme", searchable: true}, ]) { const sorter = createOptionSorter(["All", "None"], inputSelectConfig.propertyName == "year" ? ["2018-2020"] : []) @@ -151,16 +153,16 @@ export function init() { elements.selectRace = document.getElementById("select-select-race") elements.mapNavLink = document.getElementById("map-nav-link") elements.tableNavLink = document.getElementById("table-nav-link") - elements.mapsContainer = document.getElementById("maps-container") + elements.mapsContainer = document.getElementById("plot-container") elements.mapGrid = document.getElementById("map-grid") elements.tableContainer = document.getElementById("table-container") elements.colorLegend = document.getElementById("color-legend") - elements.mapTitle = document.getElementById("graph-title") + elements.mapTitle = document.getElementById("plot-title") elements.tableNavLink.addEventListener("click", () => { setTimeout(() => changeView("table"), 0) }) elements.mapNavLink.addEventListener("click", () => changeView("plot")) - elements.groupDownloadButton = document.querySelector('#group-download-container button'); + elements.groupDownloadButton = document.querySelector('#download-container button'); state.subscribe("query", queryUpdated) state.subscribe("plotConfig", plotConfigUpdated) @@ -177,8 +179,6 @@ export function init() { names = nameMappings initialDataLoad(mortalityData, stateGeoJSON, countyGeoJSON, nameMappings) }) - - initSidebar() } // ================================= @@ -251,9 +251,9 @@ async function queryUpdated(query) { } if (query.spatialLevel == "state") { - choices["#select-county"].disable() + choices["#select-select-county"].disable() } else { - choices["#select-county"].enable() + choices["#select-select-county"].enable() } @@ -351,12 +351,13 @@ function changeView(view) { // TODO: Improve user experience by redrawing only on change. Use deferred drawing model from previous code. setTimeout(() => { + console.log(elements.colorLegend) if (view == "plot") { elements.tableNavLink.classList.remove("active") elements.mapNavLink.classList.add("active") elements.mapsContainer.style.display = "block" elements.tableContainer.style.display = "none" - elements.colorLegend.style.opacity = 1 + elements.colorLegend.style.display = "block" state.trigger("plotConfig") // Trigger a redraw so sizing is correct. } else if (view == "table") { @@ -364,7 +365,8 @@ function changeView(view) { elements.tableNavLink.classList.add("active") elements.mapsContainer.style.display = "none" elements.tableContainer.style.display = "block" - elements.colorLegend.style.opacity = 0 + elements.colorLegend.style.display = "none" + console.log(elements.colorLegend) if (state.mortalityData.length > 0) { plotTable() @@ -388,7 +390,7 @@ function addGroupDownloadButton() { const baseFilename = "epitracker_spatial" // TODO: Resume, try callbacks for - const groupDownloadContainer = document.getElementById("group-download-container") + const groupDownloadContainer = document.getElementById("download-container") const downloadButton = createDropdownDownloadButton(false, [ {label: "Download data (CSV)", listener: (callback) => { downloadMortalityData(state.mortalityData, baseFilename, "csv") @@ -516,9 +518,9 @@ function setInputsEnabled(enabled) { "select-select-year", "select-measure", "select-level", - "select-state", - "select-county", - "select-scheme", + "select-select-state", + "select-select-county", + // "select-scheme", ]) { const element = document.getElementById(input) if (enabled) { @@ -534,11 +536,29 @@ function setInputsEnabled(enabled) { } function toggleLoading(loading, soft=false) { + // TODO: Reimplement + if (loading) { - document.getElementById("plots-container").style.opacity = soft ? "0.5" : "0"; + document.getElementById("plot-container").style.opacity = soft ? "0.5" : "0"; + document.getElementById("plot-title").style.opacity = soft ? "0.5" : "0"; + document.getElementById("color-legend").style.opacity = soft ? "0.5" : "0"; document.getElementById("loader-container").style.visibility = "visible"; + document.getElementById("table-container").style.visibility = "hidden" + } else { - document.getElementById("plots-container").style.opacity = "1"; + document.getElementById("plot-container").style.opacity = "1"; + document.getElementById("plot-title").style.opacity = "1"; + document.getElementById("color-legend").style.opacity = "1"; document.getElementById("loader-container").style.visibility = "hidden"; + document.getElementById("table-container").style.visibility = "visible" + } + + // if (loading) { + // document.getElementById("plots-container").style.opacity = soft ? "0.5" : "0"; + // document.getElementById("loader-container").style.visibility = "visible"; + // } else { + // document.getElementById("plots-container").style.opacity = "1"; + // document.getElementById("loader-container").style.visibility = "hidden"; + // } } \ No newline at end of file diff --git a/src/pages/quantilePage.js b/src/pages/quantilePage.js index e10f52d..17c150b 100644 --- a/src/pages/quantilePage.js +++ b/src/pages/quantilePage.js @@ -7,6 +7,8 @@ import { downloadElementAsImage } from "../utils/download.js"; import { createDropdownDownloadButton, createOptionSorter, dataToTableData, downloadMortalityData, formatCauseName, initSidebar } from "../utils/helper.js"; import { hookSelectChoices, hookCheckbox } from "../utils/input2.js"; import { plotQuantileScatter } from "../utils/quantilePlots.js"; +import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7.8.5/+esm'; + window.onload = async () => { await start(); @@ -56,14 +58,14 @@ export function init() { elements.selectRace = document.getElementById("select-select-race") elements.graphNavLink = document.getElementById("graph-nav-link") elements.tableNavLink = document.getElementById("table-nav-link") - elements.graphContainer = document.getElementById("graph-container") + elements.graphContainer = document.getElementById("plot-container") elements.plotContainer = document.getElementById("plot-quantiles") elements.tableContainer = document.getElementById("table-container") - elements.colorLegend = document.getElementById("color-legend") + elements.plotLegend = document.getElementById("plot-legend") elements.tableNavLink.addEventListener("click", () => changeView("table")) elements.graphNavLink.addEventListener("click", () => changeView("plot")) elements.groupDownloadButton = document.querySelector('#group-download-container button'); - elements.graphTitle = document.getElementById("graph-title") + elements.graphTitle = document.getElementById("plot-title") Promise.all([ d3.json("../data/conceptMappings.json"), @@ -73,7 +75,6 @@ export function init() { intitialDataLoad(mortalityData, quantileDetails, nameMappings) }) - initSidebar() } function initializeState() { @@ -167,7 +168,6 @@ function initializeState() { // ================================= function intitialDataLoad(mortalityData, quantileDetails, nameMappings) { - names = nameMappings names = nameMappings staticData.quantileDetails = quantileDetails @@ -254,7 +254,7 @@ function plotConfigUpdated(plotConfig) { colorDomainValues.sort() } - const formatRace = d => names.races[d]?.formatted + const formatRace = d => names.race[d]?.formatted const facetTickFormat = plotConfig.query.compareFacet == "race" ? formatRace : d => d const colorTickFormat = plotConfig.query.compareColor == "race" ? formatRace : d => d @@ -300,7 +300,7 @@ function updateLegend(data, query) { let selectedValues = colorDomainValues.filter(d => checkedValueSet.has(d)) if (selectedValues.length == 0) selectedValues = colorDomainValues - const formatRace = d => names.races[d]?.formatted + const formatRace = d => names.race[d]?.formatted const colorTickFormat = query.compareColor == "race" ? formatRace : d => d const legend = checkableLegend(colorDomainValues, d3.schemeTableau10, selectedValues, colorTickFormat) legendContainer.appendChild(legend) @@ -321,6 +321,7 @@ function changeView(view) { elements.graphNavLink.classList.add("active") elements.graphContainer.style.display = "flex" elements.tableContainer.style.display = "none" + elements.plotLegend.style.display = "block" state.trigger("plotConfig") // Trigger a redraw so sizing is correct. } else if (view == "table") { @@ -328,6 +329,7 @@ function changeView(view) { elements.tableNavLink.classList.add("active") elements.graphContainer.style.display = "none" elements.tableContainer.style.display = "block" + elements.plotLegend.style.display = "none" if (state.mortalityData.length > 0) { plotTable() @@ -346,7 +348,6 @@ function addDownloadButton() { const baseFilename = "epitracker_quantile" const groupDownloadContainer = document.getElementById("download-container") - createDropdownDownloadButton const downloadButton = createDropdownDownloadButton(false, [ {label: "Download data (CSV)", listener: () => downloadMortalityData(state.mortalityData, baseFilename, "csv")}, {label: "Download data (TSV)", listener: () => downloadMortalityData(state.mortalityData, baseFilename, "tsv")}, @@ -442,15 +443,22 @@ function plotTable() { } function toggleLoading(loading, soft=false) { + if (loading) { - document.getElementById("plots-container").style.opacity = soft ? "0.5" : "0"; + document.getElementById("plot-container").style.opacity = soft ? "0.5" : "0"; + document.getElementById("plot-title").style.opacity = soft ? "0.5" : "0"; document.getElementById("loader-container").style.visibility = "visible"; + document.getElementById("table-container").style.visibility = "hidden" + } else { - document.getElementById("plots-container").style.opacity = "1"; + document.getElementById("plot-container").style.opacity = "1"; + document.getElementById("plot-title").style.opacity = "1"; document.getElementById("loader-container").style.visibility = "hidden"; + document.getElementById("table-container").style.visibility = "visible" + } -} +} function updateGraphTitle() { let compareString = [state.compareColor, state.compareFacet] .filter(d => d != "none") diff --git a/src/utils/helper.js b/src/utils/helper.js index 732f7e4..c7646e7 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -351,45 +351,45 @@ const reSizePlots = (id, large, scale = 1.5) => { // }) } -export function initSidebar() { - const button = document.getElementById('sidebar-toggle'); - if (!button) return; - - button.addEventListener('click', () => { - const child = Array.from(button.childNodes)[1]; - if (child.classList.contains('fa-caret-left')) { - // reSizePlots(graphId, true); - child.classList.remove('fa-caret-left'); - child.classList.add('fa-caret-right'); - document.getElementById('sidebar').classList.remove('col-xl-2'); - document.getElementById('sidebar').classList.add('d-none'); - document.getElementById('main-content').classList.remove('col-xl-10'); - document.getElementById('main-content').classList.add('col-xl-12'); - } - else { - // reSizePlots(graphId, false); - child.classList.remove('fa-caret-right'); - child.classList.add('fa-caret-left'); - document.getElementById('sidebar').classList.add('col-xl-2'); - document.getElementById('sidebar').classList.remove('d-none'); - document.getElementById('main-content').classList.add('col-xl-10'); - document.getElementById('main-content').classList.remove('col-xl-12'); - } - }) -} +// export function initSidebar() { +// const button = document.getElementById('sidebar-toggle'); +// if (!button) return; + +// button.addEventListener('click', () => { +// const child = Array.from(button.childNodes)[1]; +// if (child.classList.contains('fa-caret-left')) { +// // reSizePlots(graphId, true); +// child.classList.remove('fa-caret-left'); +// child.classList.add('fa-caret-right'); +// document.getElementById('sidebar').classList.remove('col-xl-2'); +// document.getElementById('sidebar').classList.add('d-none'); +// document.getElementById('main-content').classList.remove('col-xl-10'); +// document.getElementById('main-content').classList.add('col-xl-12'); +// } +// else { +// // reSizePlots(graphId, false); +// child.classList.remove('fa-caret-right'); +// child.classList.add('fa-caret-left'); +// document.getElementById('sidebar').classList.add('col-xl-2'); +// document.getElementById('sidebar').classList.remove('d-none'); +// document.getElementById('main-content').classList.add('col-xl-10'); +// document.getElementById('main-content').classList.remove('col-xl-12'); +// } +// }) +// } -export function initSidebar2() { +export function initSidebar() { // TODO: Remove 'ex' prefixes. - const button = document.getElementById("ex-sidebar-toggle") - const sidebar = document.getElementById("ex-sidebar") + const button = document.getElementById("sidebar-toggle") + const sidebar = document.getElementById("sidebar") button.addEventListener('click', () => { + console.log("Hide sidebar") if (sidebar.classList.contains("sidebar-hidden")) { sidebar.classList.remove("sidebar-hidden") } else { sidebar.classList.add("sidebar-hidden") } - }) } diff --git a/src/utils/mapPlots.js b/src/utils/mapPlots.js index 6d4ade0..ae25794 100644 --- a/src/utils/mapPlots.js +++ b/src/utils/mapPlots.js @@ -256,8 +256,24 @@ export function plotMortalityMapGrid(container, legendContainer, mortalityData, legendDiv.classList.add("legend-wrapper") legendDiv.appendChild(sharedColorLegend) // document.getElementById("color-legend").style.top = "5px" + + const legendButtons = document.createElement("div") + legendButtons.classList.add("legend-buttons") + const settingsButton = document.createElement("i") + settingsButton.className = "fa-solid fa-gear" + legendButtons.appendChild(settingsButton) + const pinButton = document.createElement("i") + pinButton.className = "fa-solid fa-thumbtack pin-button" + legendButtons.appendChild(pinButton) + + pinButton.addEventListener("click", () => { + legendContainer.classList.toggle("unpinned") + }) + + legendContainer.innerHTML = `` legendContainer.appendChild(legendDiv) + legendContainer.appendChild(legendButtons) } diff --git a/src/utils/quantilePlots.js b/src/utils/quantilePlots.js index cac2914..eb841d0 100644 --- a/src/utils/quantilePlots.js +++ b/src/utils/quantilePlots.js @@ -1,6 +1,8 @@ import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm"; import { checkableLegend } from "./checkableLegend.js"; import { addPopperTooltip, addProximityHover } from "./helper.js"; +import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7.8.5/+esm'; + export function plotQuantileScatter(container, data, options={}) { options = { diff --git a/static/css/epitracker-prototype.css b/static/css/epitracker-prototype.css index 922d6c4..4bb952c 100644 --- a/static/css/epitracker-prototype.css +++ b/static/css/epitracker-prototype.css @@ -30,7 +30,7 @@ footer { } #ex-dashboard { - height: calc(100vh - 100px); + height: calc(100vh - 150px); display: flex; } @@ -42,7 +42,6 @@ footer { box-shadow: 4px 0px 10px 0px rgba(217, 217, 217, 0.8); display: flex; transition: margin 0.4s ease; - } #ex-sidebar-content { @@ -154,7 +153,7 @@ footer { } #bar-container { - height: calc(100% - 90px); /* TODO: This is hack-y, fix */ + height: calc(100% - 120px); /* TODO: This is hack-y, fix */ width: 100%; /* display: flex; */ justify-content: center; diff --git a/static/css/epitracker.css b/static/css/epitracker.css index a59152c..fe61f3c 100644 --- a/static/css/epitracker.css +++ b/static/css/epitracker.css @@ -12,10 +12,38 @@ list-style: none; } -#graph-title { +#table-container { + height: calc(100% - 120px); + display: none; +} + +.legend-buttons { + position: absolute; + top: 8px; + right: 8px; + display: flex; + gap: 7px; +} + +.legend-buttons i { + color: #828282; + cursor: pointer; +} + +.legend-buttons i:hover { + color: #9f9f9f; +} + +.unpinned .pin-button { + color: lightgrey; +} + +#plot-title { font-weight: bold; font-size: .9em; text-align: center; + margin-bottom: 20px; + margin-top: 20px; } #graph-container { @@ -1097,9 +1125,6 @@ background-color: #f0f1f7 !important; } -#sidebar-toggle { - height: 32px; -} #sidebar { width: 300px; @@ -2439,6 +2464,10 @@ button.previous-btn { transition: 0.4s; } +#map-grid { + display: grid; +} + .map-grid-cell { display: flex; justify-content: center; @@ -2467,7 +2496,8 @@ button.previous-btn { background: white; border-radius: 4px; box-shadow: 2px 2px 6px 1px lightgrey; - padding-block: 5px; + padding-top: 12px; + padding-bottom: 5px; } .map-grid-label { @@ -2485,8 +2515,19 @@ button.previous-btn { #color-legend { /* To prevent the legend preventing interaction with DL button...kind of hacky*/ - pointer-events: none; + margin-right: 30px; + position: sticky; + top: 0px; + width: fit-content; + z-index: 6; + background-color: white; } + +#color-legend.unpinned { + position: relative; + top: initial; +} + /* .map-grid-cell:hover .dropdown { opacity: 1; @@ -2516,12 +2557,7 @@ button.previous-btn { } */ -.legend-wrapper { - background: white; - border-radius: -4px; - /* box-shadow: 3px 3px 8px 1px lightgrey; */ - padding-block: 5px; -} + .map-grid-label { font-weight: bold; @@ -2536,10 +2572,7 @@ button.previous-btn { opacity: .4; } -#color-legend { - /* To prevent the legend preventing interaction with DL button...kind of hacky*/ - pointer-events: none; -} + /* .map-grid-cell:hover .dropdown { opacity: 1; @@ -2603,4 +2636,213 @@ button.previous-btn { .choices__list--single { padding: 5px 0 !important; +} + +#dashboard { + height: calc(100vh - 150px); + display: flex; + background: #f9fbff; +} + +#sidebar { + border-right: solid 1px var(--bs-border-color); + background: #f9fbff; + position: relative; + box-shadow: 4px 0px 10px 0px rgba(217, 217, 217, 0.5); + display: flex; + transition: margin 0.4s ease; + z-index: 5; +} + +#sidebar-content { + width: 300px; + padding: 25px 0px 25px 25px; + display: flex; + flex-direction: column; +} + +#sidebar-form { + overflow-y: auto; + padding-right: 15px; + position: relative; + flex-grow: 1; +} + +#sidebar-toggle { + width: 28px; + height: 28px; + border-radius: 50%; + color: rgb(129, 140, 149); + background-color: rgb(228, 230, 233); + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 20px; + right: -14px; + transition: right 0.4s ease; + z-index: 200; +} + +.sidebar-hidden #sidebar-toggle { + right: -20px; + transform: rotate(180deg); +} + +#sidebar-toggle:hover { + background-color: rgb(167, 174, 184); + cursor: pointer; +} + +#sidebar.sidebar-hidden { + margin-left: -285px; + margin-right: 0px; +} + +#sidebar h2 { + font-size: 1.5em; + color: var(--color-gray-dark); +} + +#sidebar h4 { + font-size: 1.2em; + color: var(--color-gray-dark); + margin-bottom: 20px; +} + +#content { + width: 100%; + display: flex; + flex-direction: column; + overflow: auto; + margin-right: 30px; +} + +#topbar { + /* border-bottom: solid 1px var(--bs-border-color); */ + /* background: #f9fbff; */ + display: flex; + justify-content: space-between; + margin-left: -30px; + padding-right: 30px; + padding-left: 70px; + z-index: 1; + /* padding-block: 10px; */ +} + +#topbar-cnt { + display: flex; + justify-content: space-between; + gap: 30px; + padding-block: 15px; + align-items: end; + /* width: 100%; */ + +} + +#topbar-content { + display: inline-flex; + justify-content: end; + align-items: end; + padding-left: 60px; + height: 59px; +} + +#display-mode-control { + /* bottom: -1px; */ + /* position: relative; */ + display: flex; + flex-direction: column; + justify-content: end; + margin-bottom: -1px; +} + +#plots { + flex-grow: 1; + overflow: auto; + padding: 30px 30px 5px 50px; + justify-content: center; + align-items: center; + flex-direction: column; + max-width: 100%; + position: relative; + border-top: solid 1px var(--bs-border-color); + border-right: solid 1px var(--bs-border-color); + background: white; +} + +#plot-container { + max-height: calc(100% - 120px); /* TODO: This is hack-y, fix */ + /* width: 100%; */ + justify-content: center; + max-width: 100%; + flex-grow: 1; + flex-shrink: 1; + text-align: center; +} + +#plot-container.fill-height { + height: calc(100% - 120px); /* TODO: This is hack-y, fix */ +} + +#plot-container svg { + display: inline-block; +} + +#download-container { + display: flex; + align-items: center; +} + +.floating-label { + transform: translateY(-.8em) translateX(.6em); + font-size: .9em; + /* background: white; */ + border-radius: 2px; + padding-left: 5px; + padding-right: 5px; + color: grey; + position: relative; + z-index: 1; + text-shadow: 1px 1px white, -1px -1px white; +} + +.floating-select { + margin-bottom: 20px; + /* overflow-y: clip; */ +} + +.choices { + margin-bottom: 5px; +} + +.choices__list--dropdown { + z-index: 5; +} + +.choices__list--dropdown { + display: none; +} + +.choices__list--dropdown.is-active { + display: block; +} + +.choices__list--single { + margin: 2px 0px; +} + +header { + position: relative; + z-index: 10; +} + +footer { + z-index: 10; +} + +#right-margin { + width: 30px; + /* background: #f9fbff; + border-left: solid 1px var(--bs-border-color); */ } \ No newline at end of file diff --git a/visualization/prototype.html b/visualization/demographics.html similarity index 92% rename from visualization/prototype.html rename to visualization/demographics.html index 2c54b06..9bec8a6 100644 --- a/visualization/prototype.html +++ b/visualization/demographics.html @@ -10,14 +10,13 @@ integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> - + - -
    + -
    -
    -
    +
    + +
    +