Revert to classic districtr colors (#93)

districtr · Sep 25, 2024 · f9530ce · f9530ce
1 parent 4f4e2dd
commit f9530ce
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 79 deletions.
diff --git a/app/src/app/components/sidebar/ColorPicker.jsx b/app/src/app/components/sidebar/ColorPicker.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { palette, color10 } from "../../constants/colors";
+import { _colorScheme } from "../../constants/colors";
 import { Button } from "@radix-ui/themes";
 import { styled } from "@stitches/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
@@ -22,7 +22,7 @@ export function ColorPicker() {
     accumulatedGeoids: state.accumulatedGeoids,
     resetAccumulatedBlockPopulations: state.resetAccumulatedBlockPopulations,
   }));
-  const colorArray = color10;
+  const colorArray = _colorScheme;
   if (!colorArray) return null;
   const handleRadioChange = (value) => {
     console.log(

diff --git a/app/src/app/components/sidebar/charts/HorizontalBarChart.tsx b/app/src/app/components/sidebar/charts/HorizontalBarChart.tsx
@@ -9,7 +9,7 @@ import {
   YAxis,
   Cell,
 } from "recharts";
-import { color10 } from "@/app/constants/colors";
+import { colorScheme } from "@/app/constants/colors";
 
 type TooltipInput = {
   active?: boolean;
@@ -58,7 +58,8 @@ export const HorizontalBar = () => {
       </Heading>
       <ResponsiveContainer
         width="100%"
-        height={color10.length * 18}
+        // should this instead be set based on the target number of zones? see https://github.com/districtr/districtr-v2/issues/92
+        height={colorScheme.length * 18}
         minHeight="200px"
       >
         <BarChart
@@ -80,7 +81,10 @@ export const HorizontalBar = () => {
             {mapMetrics.data
               .sort((a, b) => a.zone - b.zone)
               .map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={color10[entry.zone - 1]} />
+                <Cell
+                  key={`cell-${index}`}
+                  fill={colorScheme[entry.zone - 1]}
+                />
               ))}
           </Bar>
         </BarChart>

diff --git a/app/src/app/constants/colors.ts b/app/src/app/constants/colors.ts
@@ -27,63 +27,47 @@ import {
   sky,
 } from "@radix-ui/colors";
 
-export const palette = {
-  colors: {
-    ...(tomato as object),
-    ...(red as object),
-    ...(ruby as object),
-    ...(crimson as object),
-    ...(pink as object),
-    ...(plum as object),
-    ...(purple as object),
-    ...(violet as object),
-    ...(iris as object),
-    ...(indigo as object),
-    ...(blue as object),
-    ...(cyan as object),
-    ...(teal as object),
-    ...(jade as object),
-    ...(green as object),
-    ...(grass as object),
-    ...(orange as object),
-    ...(amber as object),
-    ...(yellow as object),
-    ...(gold as object),
-    ...(brown as object),
-    ...(bronze as object),
-    ...(gray as object),
-    ...(mint as object),
-    ...(lime as object),
-    ...(sky as object),
-  } as { [key: string]: { [key: string]: string } },
-};
-
-// bright colors!
-export const color10 = [
-  tomato.tomato10,
-  red.red10,
-  ruby.ruby10,
-  crimson.crimson10,
-  pink.pink10,
-  plum.plum10,
-  purple.purple10,
-  violet.violet10,
-  iris.iris10,
-  indigo.indigo10,
-  blue.blue10,
-  cyan.cyan10,
-  teal.teal10,
-  jade.jade10,
-  green.green10,
-  grass.grass10,
-  orange.orange10,
-  amber.amber10,
-  yellow.yellow10,
-  gold.gold10,
-  brown.brown10,
-  bronze.bronze10,
-  gray.gray10,
-  mint.mint10,
-  lime.lime10,
-  sky.sky10,
+export const colorScheme = [
+  "#0099cd",
+  "#ffca5d",
+  "#00cd99",
+  "#99cd00",
+  "#cd0099",
+  "#aa44ef", // lighter, req from San Diego
+  // Color brewer:
+  "#8dd3c7",
+  "#bebada",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#b3de69",
+  "#fccde5",
+  "#bc80bd",
+  "#ccebc5",
+  "#ffed6f",
+  "#ffffb3",
+  // other color brewer scheme:
+  "#a6cee3",
+  "#1f78b4",
+  "#b2df8a",
+  "#33a02c",
+  "#fb9a99",
+  "#e31a1c",
+  "#fdbf6f",
+  "#ff7f00",
+  "#cab2d6",
+  "#6a3d9a",
+  "#b15928",
+  // random material design colors:
+  "#64ffda",
+  "#00B8D4",
+  "#A1887F",
+  "#76FF03",
+  "#DCE775",
+  "#B388FF",
+  "#FF80AB",
+  "#D81B60",
+  "#26A69A",
+  "#FFEA00",
+  "#6200EA",
 ];
diff --git a/app/src/app/constants/layers.ts b/app/src/app/constants/layers.ts
@@ -3,7 +3,7 @@ import { MutableRefObject } from "react";
 import { Map } from "maplibre-gl";
 import { getBlocksSource } from "./sources";
 import { gerryDBView } from "../api/apiHandlers";
-import { color10 } from "./colors";
+import { colorScheme } from "./colors";
 
 export const BLOCK_SOURCE_ID = "blocks";
 export const BLOCK_LAYER_ID = "blocks";
@@ -23,10 +23,13 @@ export const COUNTY_LAYER_IDS: string[] = [
 export const LABELS_BREAK_LAYER_ID = "places_subplace";
 
 const colorStyleBaseline: any[] = ["case"];
-export const ZONE_ASSIGNMENT_STYLE_DYNAMIC = color10.reduce((val, color, i) => {
-  val.push(["==", ["feature-state", "zone"], i + 1], color); // 1-indexed per mapStore.ts
-  return val;
-}, colorStyleBaseline);
+export const ZONE_ASSIGNMENT_STYLE_DYNAMIC = _colorScheme.reduce(
+  (val, color, i) => {
+    val.push(["==", ["feature-state", "zone"], i + 1], color); // 1-indexed per mapStore.ts
+    return val;
+  },
+  colorStyleBaseline
+);
 ZONE_ASSIGNMENT_STYLE_DYNAMIC.push("#cecece");
 
 // cast the above as an ExpressionSpecification
@@ -35,7 +38,7 @@ export const ZONE_ASSIGNMENT_STYLE: ExpressionSpecification =
   ZONE_ASSIGNMENT_STYLE_DYNAMIC;
 
 export function getBlocksLayerSpecification(
-  sourceLayer: string,
+  sourceLayer: string
 ): LayerSpecification {
   return {
     id: BLOCK_LAYER_ID,
@@ -58,7 +61,7 @@ export function getBlocksLayerSpecification(
 }
 
 export function getBlocksHoverLayerSpecification(
-  sourceLayer: string,
+  sourceLayer: string
 ): LayerSpecification {
   return {
     id: BLOCK_HOVER_LAYER_ID,
@@ -70,7 +73,7 @@ export function getBlocksHoverLayerSpecification(
     },
     paint: {
       "fill-opacity": [
-        "case",            
+        "case",
         // zone is selected and hover is true and hover is not null
         [
           "all",
@@ -81,7 +84,7 @@ export function getBlocksHoverLayerSpecification(
             // @ts-ignore
             ["!", ["==", ["feature-state", "hover"], null]], //< desired behavior but typerror
             ["boolean", ["feature-state", "hover"], true],
-          ]
+          ],
         ],
         0.9,
         // zone is selected and hover is false, and hover is not null
@@ -94,16 +97,17 @@ export function getBlocksHoverLayerSpecification(
             // @ts-ignore
             ["!", ["==", ["feature-state", "hover"], null]], //< desired behavior but typerror
             ["boolean", ["feature-state", "hover"], false],
-          ]
+          ],
         ],
         0.7,
         // zone is selected, fallback, regardless of hover state
         // @ts-ignore
         ["!", ["==", ["feature-state", "zone"], null]], //< desired behavior but typerror
         0.7,
         // hover is true, fallback, regardless of zone state
-        ["boolean", ["feature-state", "hover"], false], 0.6,
-        0.2
+        ["boolean", ["feature-state", "hover"], false],
+        0.6,
+        0.2,
       ],
       "fill-color": ZONE_ASSIGNMENT_STYLE || "#000000",
     },
@@ -112,18 +116,18 @@ export function getBlocksHoverLayerSpecification(
 
 const addBlockLayers = (
   map: MutableRefObject<Map | null>,
-  gerryDBView: gerryDBView,
+  gerryDBView: gerryDBView
 ) => {
   const blockSource = getBlocksSource(gerryDBView.tiles_s3_path);
   removeBlockLayers(map);
   map.current?.addSource(BLOCK_SOURCE_ID, blockSource);
   map.current?.addLayer(
     getBlocksLayerSpecification(gerryDBView.name),
-    LABELS_BREAK_LAYER_ID,
+    LABELS_BREAK_LAYER_ID
   );
   map.current?.addLayer(
     getBlocksHoverLayerSpecification(gerryDBView.name),
-    LABELS_BREAK_LAYER_ID,
+    LABELS_BREAK_LAYER_ID
   );
 };