Improve docs

site/examples/brush/App.svelte

@@ -69,8 +69,8 @@
   $: {
     let keys = Object.keys(selectedPoints)
     if (keys.length > 0) {
-      averageA = keys.map(key => data.row(key).a).reduce((a, b) => a + b) / keys.length
-      averageB = keys.map(key => data.row(key).b).reduce((a, b) => a + b) / keys.length
+      averageA = keys.map(key => data.row({ key }).a).reduce((a, b) => a + b) / keys.length
+      averageB = keys.map(key => data.row({ key }).b).reduce((a, b) => a + b) / keys.length
     } else {
       averageA = undefined
       averageB = undefined

site/examples/candlestick/App.svelte

@@ -1,70 +1,81 @@
 <script>
   import { csv } from 'd3-fetch'
   import { format } from 'd3-format'
-  import { autoType } from 'd3-dsv'
   import { timeDay, timeMonday } from 'd3-time'
-  import { timeFormat } from 'd3-time-format'
+  import { timeParse, timeFormat } from 'd3-time-format'
   import { scaleLog, scaleBand } from 'd3-scale'
-  import { Graphic, LineLayer, XAxis, YAxis } from '@snlab/florence'
+  import { Graphic, LineLayer, XAxis, YAxis, YGridLines } from '@snlab/florence'
   import DataContainer from '@snlab/florence-datacontainer'
 
-  let appleStockData, scaleX, scaleY, ticksX, ready
+  const parseDate = timeParse('%Y-%m-%d')
+
+  let dataContainer, scaleX, scaleY, xTicks, ready
 
   (async () => {
-    const data = await csv('/data/apple-stocks-candlestick.csv', autoType)
-      .slice(-120)
-
-    appleStockData = new DataContainer(data)
+    const data = await csv('/data/apple-stocks-candlestick.csv', d => ({
+      Date:  parseDate(d.Date),
+      High: +d.High,
+      Low: +d.Low,
+      Open: +d.Open,
+      Close: +d.Close
+    }))
+
+    dataContainer = new DataContainer(data.slice(-120))
       .mutate({
-        dates: row => [row.Date, row.Date],
-        lowHigh: row => [row.Low, row.High],
-        openClose: row => [row.Open, row.Close]
+        dates: r => [r.Date, r.Date],
+        lowHigh: r => [r.Low, r.High],
+        openClose: r => [r.Open, r.Close]
       })
 
-    const noWeekend = d => d.getDay() !== 0 && d.getDay() !== 6
+    const domainDate = dataContainer.domain('Date')
 
-    scaleX = scaleBand().padding(0.2).domain(
-      timeDay().range(appleStockData.domain('date')).filter(noWeekend)
-    )
+    const weekdays = timeDay
+      .range(domainDate[0], +domainDate[1] + 1)
+      .filter(d => d.getDay() !== 0 && d.getDay() !== 6)
 
+    scaleX = scaleBand()
+      .domain(weekdays)
+      .padding(0.2)
+
     scaleY = scaleLog().domain([
-      appleStockData.min('Low'),
-      appleStockData.max('High')
+      dataContainer.min('Low'),
+      dataContainer.max('High')
     ])
 
-    ticksX = timeMonday.every(1).range(domainDate[0], domainDate[1])
+    xTicks = timeMonday.every(2).range(...domainDate)
+
     ready = true
   })()
-
-  const openCloseColors = ([open, close]) => open > close ? '#da344d' : '#32936f'
 </script>
 
 {#if ready}
 
-  <Graphic
+  <Graphic 
     width={500}
     height={500}
-    padding={{ top: 20, bottom: 30, left: 40, right: 30 }}
-    {scaleX}
+    {scaleX} 
     {scaleY}
+    padding={{ top: 20, bottom: 30, left: 40, right: 30 }}
+    flipY
   >
 
-    <LineLayer 
-      x={appleStockData.column('dates')}
-      y={appleStockData.column('lowHigh')}
+    <LineLayer
+      x={dataContainer.column('dates')}
+      y={dataContainer.column('lowHigh')}
       strokeWidth={1}
     />
 
     <LineLayer
-      x={appleStockData.column('dates')}
-      y={appleStockData.column('openClose')}
-      stroke={appleStockData.map('openClose', openCloseColors)}
+      x={dataContainer.column('dates')}
+      y={dataContainer.column('openClose')}
       strokeWidth={4}
+      stroke={dataContainer.map('openClose', r => r[0] > r[1] ? '#da344d' : '#32936f') }
     />
 
-    <XAxis tickValues={ticksX} labelFormat={timeFormat('%-m/%-d')} baseLine={false} /> 
+    <XAxis tickValues={xTicks} labelFormat={timeFormat('%-m/%-d')} baseLine={false} /> 
     <YAxis labelFormat={format('$d')} baseLine={false} />
-
+    <YGridLines />
+
   </Graphic>
 
 {/if}

site/examples/choropleth-map/App.svelte

@@ -5,26 +5,37 @@
   } from '@snlab/florence'
   import DataContainer from '@snlab/florence-datacontainer'
 
-  const COLORS = ['#d3d3d3', '#fff0d2', '#FDD1A5', '#FD9243', '#982f05', '#4e1802']
+  const COLORS = ['#fff0d2', '#FDD1A5', '#FD9243', '#982f05', '#4e1802']
 
   let dataContainer, geoScales, priceColorScale, ready
 
   (async () => {
     const geojson = await json('/data/plan_areas_choropleth.json')
-    dataContainer = new DataContainer(geojson).dropNA('resale_price_sqm')
-    geoScales = createGeoScales(data.domain('$geometry'))
+    dataContainer = new DataContainer(geojson).mutate({ 
+      resale_price_sqm: r => r.resale_price_sqm === null ? undefined : r.resale_price_sqm
+    })
+    geoScales = createGeoScales(dataContainer.bbox())
 
-    priceColorScale = dataContainer.classify({
-      column: 'resale_price_sqm', method: 'Jenks', numClasses: COLORS.length
-    }, COLORS)
+    priceColorScale = dataContainer
+      .dropNA('resale_price_sqm')
+      .classify({
+        column: 'resale_price_sqm', method: 'EqualInterval', numClasses: 5
+      }, COLORS)
+      .unknown('#d3d3d3')
 
     ready = true
   })()
 </script>
 
 {#if ready}
 
-  <Graphic>
+  <Graphic
+    width={500}
+    height={500}
+    {...geoScales}
+    flipY
+    padding={30}
+  >
 
     <Title
       title={'Mean resale price per m2 (S$)'} 
@@ -48,6 +59,7 @@
       hjust={'right'}
       flipLabels
       usePadding={true}
+      format={Math.floor}
     />
 
   </Graphic>

site/examples/density-contours/App.svelte

@@ -1,20 +1,34 @@
 <script>
   import { tsv } from 'd3-fetch'
+  import { autoType } from 'd3-dsv'
   import { contourDensity } from 'd3-contour'
+  import { scaleLinear } from 'd3-scale'
   import { format } from 'd3-format'
-  import { Graphic, PointLayer, PolygonLayer, XAxis, YAxis } from '@snlab/florence'
+  import { Graphic, PolygonLayer, PointLayer, XAxis, YAxis } from '@snlab/florence'
   import DataContainer from '@snlab/florence-datacontainer'
 
   const width = 500
   const height = 500
 
-  let dataContainer, contours, ready
+  let dataContainer, scaleX, scaleY, contours, ready
 
   (async () => {
-    const data = await tsv('/data/eruptions.tsv')
-
+    const data = await tsv('/data/eruptions.tsv', autoType)
     dataContainer = new DataContainer(data)
+
+    scaleX = scaleLinear()
+      .domain(dataContainer.domain('waiting'))
+      .nice()
+      .range([0, width])
+
+    scaleY = scaleLinear()
+      .domain(dataContainer.domain('eruptions'))
+      .nice()
+      .range([height, 0])
+
     contours = contourDensity()
+      .x(d => scaleX(d.waiting))
+      .y(d => scaleY(d.eruptions))
       .size([width, height])
       .bandwidth(30)
       .thresholds(30)(data)
@@ -25,12 +39,9 @@
 
 {#if ready}
 
-  <Graphic 
-    {width}
-    {height}
+  <Graphic
+    {width} {height}
     padding={{ top: 20, right: 30, bottom: 30, left: 40 }}
-    scaleX={dataContainer.domain('waiting')}
-    scaleY={dataContainer.domain('eruptions')}
   >
 
     <PolygonLayer
@@ -41,14 +52,14 @@
     />
 
     <PointLayer
-      x={dataContainer.column('waiting')}
-      y={dataContainer.column('eruptions')}
+      x={dataContainer.map('waiting', scaleX)}
+      y={dataContainer.map('eruptions', scaleY)}
       radius={2}
     />
 
-  <XAxis baseLine={false} /> 
-  <YAxis baseLine={false} labelFormat={format('.1f')} />
+    <XAxis scale={scaleX} baseLine={false} /> 
+    <YAxis scale={scaleY} baseLine={false} labelFormat={format('.1f')} />
 
-</Graphic>
+  </Graphic>
 
 {/if}

site/examples/gapminder/App.svelte

@@ -24,7 +24,7 @@
       .unknown('black')
 
     ready = true
-  })
+  })()
 
   setInterval(() => {
     if (ready && currentYear < 2009) {

site/examples/isotype/App.svelte

@@ -14,7 +14,7 @@
     .padding(0.01)
 
   const colScale = scalePoint()
-    .domain(dataContainer.domain('col'))
+    .domain(Array(10).fill(0).map((_, i) => i + 1))
     .padding(0.8)
     .round(true)
 

site/examples/linked-views/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import { scaleBand } from 'd3-scale'
   import { json } from 'd3-fetch'
+  import { tick } from 'svelte'
   import {
     Graphic,
     Section,
@@ -67,25 +68,25 @@
   }
 
   function onMouseout({ key }) {
-    if (hoverKey) hoverKey = undefined
+    hoverKey = undefined
     heatmapData = undefined
   }
 </script>
 
 {#if ready}
 
-  <Graphic width={1000} height={800}>
+  <Graphic width={500} height={800}>
 
     <Section
-      x1={50} x2={475}
-      y1={50} y2={350}
+      y1={0} y2={400}
       {...geoScales}
+      padding={25}
       flipY
     >
 
       <PolygonLayer
         geometry={geoData.column('$geometry')}
-        keys={geoData.keys()}
+        key={geoData.keys()}
         fill={geoData.map('resale_price_sqm', priceColorScale)}
         fillOpacity={({ key }) => hoverKey === key ? 1 : 0.5}
         stroke={'white'}
@@ -95,7 +96,7 @@
         transition={1000}
       />
 
-      <DiscreteLegend
+      <!-- <DiscreteLegend
         fill={priceColorScale}
         labelAnchorPoint={'r'}
         title={'Ave. Resale Price/m2 (S$)'}
@@ -104,15 +105,14 @@
         hjust={'right'}
         flipLabels
         usePadding={true}
-      />
+      /> -->
 
     </Section>
 
     <Section 
-      x1={50} x2={475}
-      y1={350} y2={650}
-      scaleY={yearScale}
+      y1={400} y2={800}
       scaleX={monthScale}
+      scaleY={yearScale}
       padding={50}
     >
 
@@ -126,6 +126,9 @@
           fill={heatmapData.map('resale_price_sqm', priceColorScale)}
         />
 
+        <XAxis flip vjust={'top'} baseLineOpacity={0} yOffset={3}/> 
+        <YAxis baseLineOpacity={0} xOffset={3}/>
+
       {/if}
 
       <Title 

site/examples/population-pyramid/App.svelte

@@ -1,7 +1,7 @@
 <script>
   import { scaleLinear, scaleBand } from 'd3-scale'
-  import { Graphic, Section, RectangleLayer, XAxis, YAxis } from '@snlab/florence'
   import { formatPrefix } from 'd3-format'
+  import { Graphic, Section, RectangleLayer, XAxis, YAxis } from '@snlab/florence'
   import DataContainer from '@snlab/florence-datacontainer'
   import { data } from './population.js'
 

site/examples/scatterplot-temp-trends/App.svelte

@@ -21,13 +21,14 @@
         valuesTo: 'value'
       })
       .mutate({
-        date: row => new Date(row.date, months.indexOf(row.month), 1),
+        date: row => new Date(+row.Year, months.indexOf(row.month), 1),
         value: row => +row.value
       })
 
-    scaleColor = scaleSequential()
-      .domain(dataContainer.domain('value').reverse())
-      .range(interpolateRdBu)
+    scaleColor = scaleSequential(interpolateRdBu).domain([
+			dataContainer.max('value'),
+			dataContainer.min('value')
+		])
 
     ready = true
   })()

site/examples/stacked-area/App.svelte

@@ -4,7 +4,7 @@
   import { autoType } from 'd3-dsv'
   import { csv } from 'd3-fetch'
   import { Graphic, AreaLayer, XAxis, YAxis } from '@snlab/florence'
-  import DataContainer from '@snlab/florene-datacontainer'
+  import DataContainer from '@snlab/florence-datacontainer'
 
   let dataContainer, industries, scaleColor, ready