adjust styling and data

README.md

@@ -1,29 +1 @@
-# New Project
-
-> ✨ Bootstrapped with Create Snowpack App (CSA).
-
-## Available Scripts
-
-### npm start
-
-Runs the app in the development mode.
-Open http://localhost:8080 to view it in the browser.
-
-The page will reload if you make edits.
-You will also see any lint errors in the console.
-
-### npm test
-
-Launches the test runner in the interactive watch mode.
-See the section about running tests for more information.
-
-### npm run build
-
-Builds a static copy of your site to the `build/` folder.
-Your app is ready to be deployed!
-
-**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/master/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file.
-
-### Q: What about Eject?
-
-No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.
+## 台灣性侵害資料統計

src/App.svelte

@@ -7,12 +7,6 @@
 </script>
 
 <style>
-  .container {
-    position: relative;
-    max-width: 1080px;
-    width: 90%;
-    margin: 0 auto;
-  }
   .hero {
     position: relative;
     height: 100%;

src/MapTooltip.svelte

@@ -36,25 +36,36 @@
     box-shadow: 0 3px 19px rgba(100, 100, 100, 0.4);
   }
 
-  h3 {
-    font-size: 2.8rem;
+  h3.city {
+    margin: 0;
     padding-left: 10px;
     line-height: 1;
     border-left: 8px solid currentColor;
-    margin: 0;
+    font-size: 2.2rem;
+    color: var(--main);
   }
 
   ul {
     font-size: 2rem;
     text-align: center;
-    display: flex;
-    justify-content: space-between;
     list-style: none;
     padding: 0;
   }
 
   ul > li {
-    flex-basis: 50%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .gender {
+    width: 20%;
+  }
+
+  .male,
+  .female {
+    width: 20px;
   }
 
   .number {
@@ -104,13 +115,27 @@
     <span aria-hidden="true">&times;</span>
   </button>
   <h4>性侵害通報案件數 ({data['年份']}年)</h4>
-  <h3>{data['縣市']}</h3>
+  <h3 class="city">{data['縣市']}</h3>
   <ul>
     <li>
-      <img src="icons/male.svg" alt="" />
-      男<br /><strong class="number">{Math.floor($male)}</strong>
-      人
+      <div class="gender">
+        <img class="male" src="icons/male.svg" alt="男性" />
+        <span>男</span>
+      </div>
+      <div class="data">
+        <strong class="number">{Math.floor($male)}</strong>
+        人
+      </div>
+    </li>
+    <li>
+      <div class="gender">
+        <img class="female" src="icons/female.svg" alt="女性" />
+        <span>女</span>
+      </div>
+      <div class="data">
+        <strong class="number">{Math.floor($female)}</strong>
+        人
+      </div>
     </li>
-    <li>女<br /><strong class="number">{Math.floor($female)}</strong> 人</li>
   </ul>
 </div>

src/RankingTable.svelte

@@ -14,6 +14,7 @@
     table-layout: fixed;
     font-family: Oswald, "PingFang TC";
     border-collapse: collapse;
+    margin: 50px 0;
   }
 
   thead th {

src/SexualCaseMap.svelte

@@ -2,6 +2,7 @@
   import { scaleLinear } from "d3-scale";
   import { tweened } from "svelte/motion";
   import { cubicOut } from "svelte/easing";
+  import extent from "./utils/extent";
   import TaiwanMap from "./TaiwanMap.svelte";
   import YearSwitch from "./YearSwitch.svelte";
   import data from "./data";
@@ -19,12 +20,22 @@
   });
 
   $: colorScale = scaleLinear()
-    .domain([
-      Math.min(...currentData.map((d) => d["合計"])),
-      Math.max(...currentData.map((d) => d["合計"])),
-    ])
+    .domain(extent(currentData, (d) => d["合計"]))
     .range([93, 24]);
 
+  $: scaleLabel = [
+    0,
+    200,
+    400,
+    600,
+    800,
+    1000,
+    1200,
+    1400,
+    1600,
+    1800,
+  ].map((n) => [n, `hsl(214, 77%, ${Math.round(colorScale(n))}%)`]);
+
   function openTooltip(city) {
     currentCity = city;
     tooltipStatus = "opened";
@@ -40,6 +51,20 @@
   .btn-group {
     margin-bottom: 3em;
   }
+
+  .block {
+    position: relative;
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+  }
+
+  .block > .scale {
+    position: absolute;
+    bottom: 100%;
+    left: -50%;
+    font-size: 0.6rem;
+  }
 </style>
 
 <div class="container">
@@ -57,6 +82,13 @@
           </Button>
         {/each}
       </div>
+      <div class="scale-label">
+        {#each scaleLabel as label, idx (label[0])}
+          <span class="block" style="background-color: {label[1]}">
+            {#if idx % 3 === 0}<span class="scale"> {label[0]} </span>{/if}
+          </span>
+        {/each}
+      </div>
       {#key currentYear}
         <TaiwanMap
           transform="translate({$offset}, 0)"

src/YearSwitch.svelte

@@ -36,7 +36,8 @@
 </script>
 
 <style>
-  .container {
+  .year-switch-container {
+    margin: 30px auto;
     text-align: center;
   }
 
@@ -88,7 +89,7 @@
   }
 </style>
 
-<div class="container">
+<div class="year-switch-container">
   <button
     class="prev"
     aria-label="上一年"
@@ -117,5 +118,5 @@
     }}>
     <span aria-hidden="true">&#x25B6;</span>
   </button>
-  <slot name="chart" />
 </div>
+<slot name="chart" />