Water silhouette

import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'

WestCoastCharts.use(types)

const options = {
  chart: {
    height: 420,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "unit",
    toolbar: {
      show: false
    }
  },
  series: [120, 70, 40, 20],
  labels: ["Agriculture", "Industry", "Households", "Leakage"],
  colors: ["#1d4ed8", "#3b82f6", "#93c5fd", "#cbd5e1"],
  plotOptions: {
    unit: {
      positions: {
        name: "drop",
        category: "nature",
        kind: "silhouette",
        rings: [
          [
            [0.5, 0],
            [0.5005399205746639, 0.0010705383806982605],
            [0.5024739214513293, 0.004277569313094809],
            [0.506008529021618, 0.009607359798384785],
            [0.5112409609048898, 0.017037086855465844],
            [0.5182120997641304, 0.026534935252447156],
            [0.5269210835334535, 0.03806023374435663],
            [0.5373320573792079, 0.05156362923365587],
            [0.5493782262587233, 0.06698729810778065],
            [0.5629648114826815, 0.08426519384872738],
            [0.5779715501572975, 0.10332332985438242],
            [0.5942550290073859, 0.12408009626051131],
            [0.6116509953798599, 0.1464466094067262],
            [0.6299767162071321, 0.17032709244996552],
            [0.649033417331403, 0.19561928549563967],
            [0.6686088134970507, 0.22221488349019886],
            [0.6884797257733241, 0.24999999999999994],
            [0.7084147744454969, 0.27885565489049935],
            [0.7281771295968931, 0.3086582838174551],
            [0.7475272976630357, 0.33928026734841915],
            [0.766225919588553, 0.37059047744873963],
            [0.7840365545138734, 0.40245483899193585],
            [0.8007284219520158, 0.43473690388997416],
            [0.8160790750518537, 0.4672984353849285],
            [0.8298769776932235, 0.49999999999999994],
            [0.8419239587571885, 0.5327015646150716],
            [0.8520375179128941, 0.5652630961100257],
            [0.8600529586206458, 0.5975451610080641],
            [0.8658253257337624, 0.6294095225512604],
            [0.8692311270563733, 0.6607197326515807],
            [0.8701698204484482, 0.6913417161825448],
            [0.8685650505307752, 0.7211443451095005],
            [0.8643656216986526, 0.7499999999999999],
            [0.8575461969703229, 0.777785116509801],
            [0.8481077151405811, 0.8043807145043603],
            [0.8360775217467729, 0.8296729075500344],
            [0.8215092124483878, 0.8535533905932737],
            [0.804482190537297, 0.8759199037394887],
            [0.7851009433980546, 0.8966766701456175],
            [0.7634940457917115, 0.9157348061512727],
            [0.7398129008080865, 0.9330127018922194],
            [0.7142302321872718, 0.9484363707663441],
            [0.6869383444195964, 0.9619397662556434],
            [0.6581471695642614, 0.9734650647475528],
            [0.6280821220524087, 0.9829629131445341],
            [0.5969817848347506, 0.9903926402016152],
            [0.5650954520739603, 0.9957224306869052],
            [0.5326805551474808, 0.9989294616193017],
            [0.5000000000000001, 1],
            [0.4673194448525193, 0.9989294616193017],
            [0.4349045479260396, 0.9957224306869052],
            [0.4030182151652495, 0.9903926402016152],
            [0.3719178779475917, 0.9829629131445342],
            [0.34185283043573866, 0.9734650647475529],
            [0.31306165558040366, 0.9619397662556435],
            [0.2857697678127283, 0.9484363707663441],
            [0.26018709919191346, 0.9330127018922193],
            [0.23650595420828857, 0.9157348061512727],
            [0.21489905660194558, 0.8966766701456177],
            [0.19551780946270297, 0.8759199037394887],
            [0.17849078755161224, 0.8535533905932738],
            [0.16392247825322714, 0.8296729075500345],
            [0.15189228485941897, 0.8043807145043604],
            [0.1424538030296773, 0.7777851165098011],
            [0.1356343783013475, 0.7500000000000002],
            [0.13143494946922485, 0.7211443451095007],
            [0.12983017955155185, 0.6913417161825451],
            [0.1307688729436266, 0.6607197326515809],
            [0.13417467426623764, 0.6294095225512604],
            [0.13994704137935426, 0.5975451610080643],
            [0.14796248208710588, 0.5652630961100258],
            [0.1580760412428115, 0.5327015646150713],
            [0.1701230223067764, 0.5000000000000001],
            [0.1839209249481461, 0.4672984353849288],
            [0.19927157804798412, 0.4347369038899744],
            [0.2159634454861265, 0.40245483899193585],
            [0.23377408041144687, 0.37059047744873985],
            [0.2524727023369643, 0.33928026734841926],
            [0.27182287040310693, 0.30865828381745497],
            [0.291585225554503, 0.27885565489049946],
            [0.31152027422667594, 0.24999999999999994],
            [0.3313911865029492, 0.22221488349019908],
            [0.35096658266859704, 0.19561928549563973],
            [0.3700232837928679, 0.17032709244996547],
            [0.38834900462014, 0.14644660940672632],
            [0.40574497099261386, 0.12408009626051153],
            [0.4220284498427025, 0.10332332985438253],
            [0.43703518851731854, 0.08426519384872738],
            [0.4506217737412765, 0.06698729810778081],
            [0.46266794262079214, 0.05156362923365587],
            [0.47307891646654643, 0.03806023374435674],
            [0.4817879002358696, 0.02653493525244721],
            [0.48875903909511026, 0.017037086855465844],
            [0.49399147097838203, 0.00960735979838484],
            [0.49752607854867076, 0.004277569313094809],
            [0.4994600794253361, 0.0010705383806982605]
          ]
        ],
        source: "original",
        minUnits: 12,
        aspect: 0.8,
        order: "rowsUp",
        cx: undefined,
        cy: undefined,
        shape: {
          name: "drop",
          category: "nature",
          kind: "silhouette",
          minUnits: 12,
          order: "rowsUp",
          source: "original"
        },
        with: e=>St({...t,...e||{}}),
        outlined: function outlined(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:.16;const n=t.rings.map(t=>{const n=t.reduce((t,e)=>t+e[0],0)/t.length,a=t.reduce((t,e)=>t+e[1],0)/t.length;return t.map(t=>{let o=b(t,2);return[n+(o[0]-n)*(1-e),a+(o[1]-a)*(1-e)]})});return St({...t,name:t.name+"-outlined",kind:"stroke",rings:t.rings.concat(n)})},
        fill: (t,n)=>wt(e,t,n),
        isUnitShape: true
      }
    }
  },
  title: {
    text: "Water use (1 dot = 1 hm³)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()