responsive svg and chart config

src/ByPlaceChart.svelte

@@ -1,10 +1,10 @@
 <script>
   import omit from "lodash/omit";
-  import step from "./utils/step";
   import place from "./place";
   import PlaceChart from "./PlaceChart.svelte";
   import YearSwitch from "./YearSwitch.svelte";
   import RankingTable from "./RankingTable.svelte";
+  import chartConfig from "./store/chartConfig";
   let currentYear = 2018;
 
   $: data = place.find((p) => p["年份"] === currentYear.toString());
@@ -45,7 +45,7 @@
   fillColor="var(--main)"
   barHeight={10}
   yTicks={Object.keys(omit(place[0], ['年份']))}
-  xTicks={step(0, 4500, 400)}
+  xTicks={$chartConfig.placeChart.xTicks}
   {data} />
 <RankingTable
   caption={currentYear}

src/MapTooltip.svelte

@@ -1,6 +1,6 @@
 <script>
   import { tweened } from "svelte/motion";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import { scale } from "svelte/transition";
   const male = tweened(0);
   const female = tweened(0);
@@ -10,15 +10,26 @@
     male.set(data["男"]);
     female.set(data["女"]);
   }
+
+  function handleKeydown(e) {
+    if (e.key === "Escape") {
+      dispatch("close");
+    }
+  }
+  onMount(() => {
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  });
   export let data;
 </script>
 
 <style>
   .tooltip {
     position: absolute;
-    top: 10%;
+    top: 15%;
     left: 30px;
-    width: 500px;
+    max-width: 500px;
+    width: 90%;
     padding: 20px;
     border-radius: 20px;
     background-color: #fff;
@@ -49,13 +60,49 @@
   .number {
     font-size: 2em;
   }
+
+  .close-btn {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 30px;
+    border: 0;
+    background: none;
+    border-radius: 3px;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .close-btn:hover {
+    background-color: rgba(100, 100, 100, 0.1);
+  }
+
+  @media screen and (max-width: 960px) {
+    .tooltip {
+      font-size: 14px;
+      top: 50%;
+    }
+
+    h3 {
+      font-size: 2rem;
+    }
+
+    .number {
+      font-size: 2rem;
+    }
+  }
 </style>
 
 <div
   class="tooltip"
   in:scale={{ duration: 350, delay: 500 }}
   out:scale={{ duration: 350, delay: 0 }}>
-  <button on:click={() => dispatch('close')}>close</button>
+  <button class="close-btn" on:click={() => dispatch('close')}>
+    <span aria-hidden="true">&times;</span>
+  </button>
   <h4>性侵害通報案件數 ({data['年份']}年)</h4>
   <h3>{data['縣市']}</h3>
   <ul>

src/PlaceChart.svelte

@@ -2,16 +2,19 @@
   import { flip } from "svelte/animate";
   import SVG from "./SVG.svelte";
   import { scaleLinear, scaleBand } from "d3-scale";
+  import chartConfig from "./store/chartConfig";
   export let data;
   export let xTicks;
   export let yTicks;
   export let fillColor;
   export let barHeight = 10;
-  let width = 800;
-  let height = 600;
+  $: config = $chartConfig.placeChart;
 
-  let padding = {
-    left: 80,
+  $: width = config.width;
+  $: height = config.height;
+
+  $: padding = {
+    left: config.padding,
     bottom: 10,
     top: 10,
     right: 10,
@@ -54,7 +57,11 @@
         <line y1="-15" y2="-100%" />
       </g>
     {/each}
-    <text y={-20} x={width - padding.left}>(通報件數)</text>
+    <text
+      y={-20}
+      x={width - padding.left - $chartConfig.placeChart.xTickTextOffset}>
+      (通報件數)
+    </text>
   </g>
   <g transform="translate(0, 0)">
     {#each yTicks as tick, i}

src/RankingTable.svelte

@@ -63,6 +63,23 @@
     color: var(--white);
     background-color: var(--em3);
   }
+
+  @media screen and (max-width: 960px) {
+    table {
+      font-size: 14px;
+    }
+    thead th,
+    tbody td {
+      padding: 5px 5px;
+    }
+
+    .no {
+      font-size: 12px;
+      line-height: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
 </style>
 
 <table>

src/RelationshipChart.svelte

@@ -1,32 +1,45 @@
 <script>
   import omit from "lodash/omit";
-  import pick from "lodash/pick";
   import BarChart from "./BarChart.svelte";
-  import RankingTable from "./RankingTable.svelte";
   import relation from "./relation";
+  import RelationModel from "./models/relation";
   import Tooltip from "./Tooltip.svelte";
   import colors from "./utils/colors";
   import step from "./utils/step";
   import YearSwitch from "./YearSwitch.svelte";
+  import RankingTable from "./RankingTable.svelte";
+  import chartConfig from "./store/chartConfig";
+  import viewport from "./store/viewport";
   let currentYear = 2018;
 
   $: currentData = relation[currentYear + "年"].filter(
     (d) => d["年齡層"] !== "總計"
   );
 
+  $: model = new RelationModel(currentData);
+
   let selected = [];
   let tooltip = false;
   let tooltipData;
   let tooltipPosition;
+
+  const headers = [
+    { name: "兩造關係", accessor: (d) => d[0], align: "left", width: "30%" },
+    {
+      name: "案件數 （排除其他與不詳）",
+      accessor: (d) => d[1],
+      align: "right",
+      type: "number",
+    },
+    {
+      name: "比例",
+      accessor: (d) => (model.getProbabilityFor(d[0]) * 100).toFixed(2) + "%",
+      align: "right",
+    },
+  ];
 </script>
 
 <style>
-  .block {
-    display: inline-block;
-    width: 30px;
-    height: 30px;
-  }
-
   .container {
     position: relative;
   }
@@ -43,6 +56,13 @@
   .active {
     color: var(--white);
   }
+
+  .spacer {
+    padding: 0;
+    margin: 50px 0;
+    height: 0;
+    border: 0;
+  }
 </style>
 
 <YearSwitch
@@ -73,8 +93,14 @@
           tooltip = true;
           tooltipData = e.detail.data;
           const bbox = e.detail.target.getBoundingClientRect();
-          tooltipPosition = { x: bbox.width + 120, y: bbox.top - 150 };
+          if ($viewport === 'mobile') {
+            tooltipPosition = { x: bbox.width + 80, y: bbox.top - 100 };
+          } else {
+            tooltipPosition = { x: bbox.width + 120, y: bbox.top - 150 };
+          }
         }}
+        width={$chartConfig.relationChart.width}
+        height={$chartConfig.relationChart.height}
         on:hide={() => {
           tooltip = false;
         }}
@@ -88,3 +114,19 @@
     {/if}
   </div>
 </YearSwitch>
+
+<hr class="spacer" />
+
+<YearSwitch
+  initialYear={currentYear}
+  years={Object.keys(relation)
+    .map((k) => k.replace('年', ''))
+    .map(Number)}
+  on:change={(e) => (currentYear = e.detail.year)}>
+  <div slot="chart">
+    <RankingTable
+      caption="受害者與加害者關係 （{currentYear} 年）"
+      {headers}
+      data={model.getRanking().slice(0, 10)} />
+  </div>
+</YearSwitch>

src/Section.svelte

@@ -9,6 +9,7 @@
 
 <style>
   section {
+    position: relative;
     width: 95%;
     margin: 4rem auto;
   }
@@ -24,9 +25,24 @@
   .large {
     max-width: 1200px;
   }
+
+  .issue {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    font-size: 4rem;
+    color: #444;
+    opacity: 0.4;
+    font-family: Oswald;
+  }
+
+  .issue::before {
+    content: "#";
+  }
 </style>
 
 <section class={size}>
+  <span class="issue">{num}</span>
   <LabelTitle {title} id={title} type="anchor" />
 
   <p>{description}</p>

src/SexualCaseMap.svelte

@@ -5,7 +5,9 @@
   import TaiwanMap from "./TaiwanMap.svelte";
   import YearSwitch from "./YearSwitch.svelte";
   import data from "./data";
+  import taiwanCity from "./constants/taiwanCity";
   import MapTooltip from "./MapTooltip.svelte";
+  import Button from "./components/Button.svelte";
   let currentYear = 2019;
   let tooltipStatus = "closed";
   let currentCity = "";
@@ -22,12 +24,22 @@
       Math.max(...currentData.map((d) => d["合計"])),
     ])
     .range([93, 24]);
+
+  function openTooltip(city) {
+    currentCity = city;
+    tooltipStatus = "opened";
+    offset.set(120);
+  }
 </script>
 
 <style>
   .container {
     position: relative;
   }
+
+  .btn-group {
+    margin-bottom: 3em;
+  }
 </style>
 
 <div class="container">
@@ -36,13 +48,20 @@
     years={[2015, 2016, 2017, 2018, 2019]}
     on:change={(e) => (currentYear = e.detail.year)}>
     <div slot="chart">
+      <div class="btn-group">
+        {#each taiwanCity as city (city)}
+          <Button
+            style={city === currentCity ? 'filled' : 'primary'}
+            onClick={() => openTooltip(city)}>
+            {city}
+          </Button>
+        {/each}
+      </div>
       {#key currentYear}
         <TaiwanMap
           transform="translate({$offset}, 0)"
           on:selected={(e) => {
-            currentCity = e.detail;
-            tooltipStatus = 'opened';
-            offset.set(120);
+            openTooltip(e.detail);
           }}
           color={(d) => {
             const selected = currentData.find((c) => c['縣市'] === d);

src/TaiwanMap.svelte

@@ -5,6 +5,7 @@
   import toPair from "./utils/toPair";
   import polygonCentroid from "./utils/centroid";
   import hover from "./utils/useHover";
+  import viewport from "./store/viewport";
   export let color;
   export let transform;
   let current = "";
@@ -75,7 +76,7 @@
   }
 </style>
 
-<SVG viewBox="0 0 280 266">
+<SVG viewBox="0 0 {$viewport === 'mobile' ? 180 : 280} 266">
   <g {transform} fill="none" fill-rule="evenodd">
     <g
       stroke="#fff"