Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to quantile breaks #67

Merged
merged 7 commits into from
Mar 25, 2020
Merged

Switch to quantile breaks #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9bcd837
Update to use step breakpoints instead of interpolating between numbers
Mar 24, 2020
8fcaa99
Switch from equal distance to quantile breaks
Mar 24, 2020
10a3f9c
Add new legend generation
Mar 24, 2020
c0b0558
Match new color ramps
Mar 24, 2020
6fb2754
Actually, this is a much more efficient way to write this. I tried th…
Mar 24, 2020
e70beca
Remove console log
Mar 24, 2020
f95407e
Clear notebook output
Mar 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions notebooks/processing/Compute_Quantile_Breaks.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"def compute_breaks(features, columns):\n",
" prop_values = get_prop_values(features, columns)\n",
" for k in prop_values:\n",
" prop_values[k] = np.histogram(prop_values[k], bins=8)[1].tolist()\n",
" prop_values[k] = np.quantile(prop_values[k], [0, 0.25, 0.5, 0.75, 1], axis = 0).tolist()\n",
" return prop_values"
]
},
Expand Down Expand Up @@ -98,7 +98,6 @@
" CCM_PER_CAPITA_COLUMNS\n",
"))\n",
"\n",
"\n",
"with open(processed_data_path('ccm_county_breaks.json'), 'w') as f:\n",
" f.write(json.dumps(county_breaks, indent=4))"
]
Expand Down
39 changes: 31 additions & 8 deletions viz/us-healthcare-system-capacity/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,21 +576,44 @@ button.primary,
color: #666;
}

.legend {
font-size: 14px;
padding: 2px 4px;
.legend-container {
display: flex;
position: absolute;
bottom: 10px;
position: absolute;
left: 50%;
width: auto;
transform: translateX(-50%);
left: 0;
right: 0;
align-items: center;
justify-content: center;
}

#legend {
font-size: 14px;
padding: 2px 4px;
z-index: 5000;
background: white;
display: flex;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

.legend-color {
display: inline-block;
height: 14px;
width: 14px;
border: 1px solid rgba(0, 0, 0, 0.1);
flex-shrink: 0;
position: relative;
top: 2px;
margin-right: 4px;
}

.legend-numbers {
display: inline-block;
margin-right: 10px;
}

.legend-numbers:last-child {
margin-right: 0;
}

#colors {
width: 100px;
background-color: #fff;
Expand Down
23 changes: 11 additions & 12 deletions viz/us-healthcare-system-capacity/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
<hr />
<div class="map-options menu" id="indicator">
<button class="active" onclick="setIndicator(0)">
<div class="button-icon" style="color: #8856a7">
<div class="button-icon" style="color: #023858">
<i class="icon-eye"></i>
<i class="icon-eye-off"></i>
</div>
Expand All @@ -77,7 +77,7 @@
</div>
</button>
<button onclick="setIndicator(1)">
<div class="button-icon" style="color: #2b8cbe">
<div class="button-icon" style="color: #4d004b">
<i class="icon-eye"></i>
<i class="icon-eye-off"></i>
</div>
Expand All @@ -90,7 +90,7 @@
</div>
</button>
<button onclick="setIndicator(2)">
<div class="button-icon" style="color: #2ca25f">
<div class="button-icon" style="color: #00441b">
<i class="icon-eye"></i>
<i class="icon-eye-off"></i>
</div>
Expand All @@ -103,7 +103,7 @@
</div>
</button>
<button onclick="setIndicator(3)">
<div class="button-icon" style="color: #345672">
<div class="button-icon" style="color: #6c2167">
<i class="icon-eye"></i>
<i class="icon-eye-off"></i>
</div>
Expand All @@ -116,7 +116,7 @@
</div>
</button>
<button onclick="setIndicator(4)">
<div class="button-icon" style="color: #632864">
<div class="button-icon" style="color: #2a5675">
<i class="icon-eye"></i>
<i class="icon-eye-off"></i>
</div>
Expand Down Expand Up @@ -153,20 +153,19 @@
</div>
<div class="map-container">
<div class="map" id="map">
<div class="legend">
<div id="legend-min"></div>
<div id="colors"></div>
<div id="legend-max"></div>
<div class="legend-container">
<div id="legend"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="js/color.js"></script>
<script src="js/main.js"></script>
Expand Down
95 changes: 49 additions & 46 deletions viz/us-healthcare-system-capacity/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,35 +166,35 @@ var indicators = [
{
propertyInData: "Staffed All Beds",
label: "Staffed All Beds",
colors: ["#e0ecf4", "#8856a7"],
colors: ["#fff7fb", "#9db5ce", "#4d7596", "#023858"],
displayAsPercent: false,
radii: [[1, 20], [5, 50]]
},
{
propertyInData: "Staffed ICU Beds",
label: "Staffed ICU Beds",
colors: ["#ece7f2", "#2b8cbe"],
colors: ["#f7fcfd", "#b0aacb", "#7a5a8d", "#4d004b"],
displayAsPercent: false,
radii: [[1, 20], [5, 50]]
},
{
propertyInData: "Licensed All Beds",
label: "Licensed All Beds",
colors: ["#e5f5f9", "#2ca25f"],
colors: ["#f7fcfd", "#8cc1aa", "#40825e", "#00441b"],
displayAsPercent: false,
radii: [[1, 20], [5, 50]]
},
{
propertyInData: "All Bed Occupancy Rate",
label: "All Bed Occupancy Rate",
colors: ["#D6EDEA", "#345672"],
colors: ["#f3e7e9", "#d49ebb", "#a55c90", "#6c2167"],
displayAsPercent: true,
radii: [[1, 8], [5, 40]]
},
{
propertyInData: "ICU Bed Occupancy Rate",
label: "ICU Bed Occupancy Rate",
colors: ["#EDCDD3", "#632864"],
colors: ["#e9eeed", "#91bec5", "#56899d", "#2a5675"],
displayAsPercent: true,
radii: [[1, 8], [5, 40]]
}
Expand Down Expand Up @@ -307,51 +307,57 @@ function getProperty(theIndicator) {
}

function getBreaks() {
return breaks[type][getProperty(indicator)];
var breakpoints = breaks[type][getProperty(indicator)];
// TODO: Find a better way to handle this
// Mapbox's step expression doesn't like it when one of the breakpoints is equal to the smallest
// property value; this comes up some places in our map where the first breakpoint is 0, where it
// won't style any of the features with a value of 0. I am temporarily getting around this by
// adding a very small value to the break point when this happens.
var modifiedBreaks = breakpoints.map(function(breakpoint, i) {
if (i > 0 && breakpoint === breakpoints[i - 1]) {
return breakpoint + 0.0000000000001;
} else {
return breakpoint;
}
});
return modifiedBreaks;
}

function setFillPaintStyle(layerName) {
var colorsMinMax = indicators[indicator].colors,
breaksValues = getBreaks(),
palette = interpolate(colorsMinMax),
colors = _.map([...Array(breaksValues.length).keys()], function(i) {
return palette(i / breaksValues.length);
}),
style = [
"interpolate",
["linear"],
["number", ["get", getProperty(indicator)], breaksValues[0]]
].concat(_.flatten(_.zip(breaksValues, colors)));
var breaksValues = getBreaks();
var colors = indicators[indicator].colors;
var breaks = _.flatten(_.zip(breaksValues, colors)).splice(
1,
colors.length + breaksValues.length - 2
);

style = [
"case",
// Check to make sure property is not undefined
["all", ["has", getProperty(indicator)]],
["step", ["number", ["get", getProperty(indicator)]]].concat(breaks),
// Fallback color for undefined indicator
"#ccc"
];

setLegend(colors, breaksValues);

map.setPaintProperty(layerName, "fill-color", style);
}

function setLegend(colors, breaksValues) {
document.getElementById("legend-min").innerHTML = formatNumber(
breaksValues[0],
indicator
);
document.getElementById("legend-max").innerHTML = formatNumber(
breaksValues[breaksValues.length - 1],
indicator
);
document.getElementById(
"colors"
).style.backgroundImage = `linear-gradient(to right, ${colors[0]}, ${
colors[colors.length - 1]
})`;
var legend = colors
.map(function(color, i) {
return `<div class="legend-color" style="background-color: ${color}"></div><div class="legend-numbers">${formatNumber(breaksValues[i], indicator)}–${formatNumber(breaksValues[i + 1], indicator)}</div>`;
})
.join("");
document.getElementById("legend").innerHTML = legend;
}

function setCirclePaintStyle(layerName) {
var colorsMinMax = indicators[indicator].colors,
var colors = indicators[indicator].colors,
radii = indicators[indicator].radii,
breaksValues = getBreaks(),
palette = interpolate(colorsMinMax),
colors = _.map([...Array(breaksValues.length).keys()], function(i) {
return palette(i / breaksValues.length);
}),
radiiZ1 = _.map([...Array(breaksValues.length).keys()], function(i) {
return (i / breaksValues.length) * 19 + 1;
}),
Expand All @@ -362,9 +368,6 @@ function setCirclePaintStyle(layerName) {
map.setLayoutProperty(layerName, "visibility", "visible");
setLegend(colors, breaksValues);

// ].concat(_.flatten(_.zip(breaksValues, radiiZ1))),
// ].concat(_.flatten(_.zip(breaksValues, radiiZ2)))

map.setPaintProperty(layerName, "circle-radius", [
"interpolate",
["linear"],
Expand All @@ -391,12 +394,17 @@ function setCirclePaintStyle(layerName) {
]
]);

var breaksValues = getBreaks();
var colors = indicators[indicator].colors;
var breaks = _.flatten(_.zip(breaksValues, colors)).splice(
1,
colors.length + breaksValues.length - 2
);

map.setPaintProperty(
layerName,
"circle-color",
["interpolate", ["linear"], ["get", getProperty(indicator)]].concat(
_.flatten(_.zip(breaksValues, colors))
)
["step", ["number", ["get", getProperty(indicator)]]].concat(breaks)
);
}

Expand Down Expand Up @@ -508,11 +516,6 @@ map.on("load", function() {
"state-line"
);

// map.addSource("facility", {
// type: "geojson",
// data: facilities
// });

map.addLayer(
{
id: "facility-circle",
Expand Down