Move grid option to the axis

Moving the axis option from the top level object to the axis objects.
Now the API looks like https://observablehq.com/plot/marks/axis

**Breaking change**

- If you had `grid: true` set in the object sent to functionPlot
  then move the property to the `x` and `y` properties.

Author: mauriciopoppe

site/js/site.js

@@ -6,11 +6,11 @@ function onSiteDependenciesLoaded() {
 
   functionPlot({
     target: '#description-sample',
-    y: { domain: [-1, 9] },
+    x: { grid: true },
+    y: { domain: [-1, 9], grid: true },
     tip: {
       renderer: function () {}
     },
-    grid: true,
     data: [
       {
         fn: 'x^2',
@@ -119,17 +119,18 @@ function onSiteDependenciesLoaded() {
   /**
    * ### Grid
    *
-   * Set `grid: true` in the options sent to function plot
+   * Set `grid: true` in the axis objects to draw a grid.
    */
   functionPlot({
     target: '#grid',
     x: {
-      label: 'real'
+      label: 'real',
+      grid: true
     },
     y: {
-      label: 'imaginary'
+      label: 'imaginary',
+      grid: true
     },
-    grid: true,
     data: [{ fn: 'sqrt(1 - x * x)' }, { fn: '-sqrt(1 - x * x)' }]
   })
 
@@ -142,12 +143,13 @@ function onSiteDependenciesLoaded() {
   functionPlot({
     target: '#sticky',
     x: {
-      position: 'sticky'
+      position: 'sticky',
+      grid: true
     },
     y: {
-      position: 'sticky'
+      position: 'sticky',
+      grid: true
     },
-    grid: true,
     data: [{ fn: 'cos(x)' }]
   })
 
@@ -277,12 +279,13 @@ function onSiteDependenciesLoaded() {
     target: '#logarithmic',
     x: {
       type: 'log',
-      domain: [0.01, 1]
+      domain: [0.01, 1],
+      grid: true
     },
     y: {
-      domain: [-100, 100]
+      domain: [-100, 100],
+      grid: true
     },
-    grid: true,
     data: [
       {
         fn: '1/x * cos(1/x)',
@@ -943,8 +946,8 @@ function onSiteDependenciesLoaded() {
    */
   functionPlot({
     target: '#vector',
-    x: { domain: [-3, 8] },
-    grid: true,
+    x: { domain: [-3, 8], grid: true },
+    y: { grid: true },
     data: [
       {
         vector: [2, 1],

site/partials/examples.html

@@ -49,27 +49,29 @@
     }
   ]
 })</code></pre></div></div><div class="col-md-6 center-block demos"><span class="graph" id="quadratic-with-options"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Grid</h3>
-<p>Set <code>grid: true</code> in the options sent to function plot</p></div><div class="code"><pre><code class="javascript">functionPlot({
+<p>Set <code>grid: true</code> in the axis objects to draw a grid.</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#grid',
   x: {
-    label: 'real'
+    label: 'real',
+    grid: true
   },
   y: {
-    label: 'imaginary'
+    label: 'imaginary',
+    grid: true
   },
-  grid: true,
   data: [{ fn: 'sqrt(1 - x * x)' }, { fn: '-sqrt(1 - x * x)' }]
 })</code></pre></div></div><div class="col-md-6 center-block demos"><span class="graph" id="grid"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Sticky axes</h3>
 <p>Set <code>position: 'sticky'</code> on an axis to keep it centered 
 in the screen and constrained to the viewport on pan and zoom.</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#sticky',
   x: {
-    position: 'sticky'
+    position: 'sticky',
+    grid: true
   },
   y: {
-    position: 'sticky'
+    position: 'sticky',
+    grid: true
   },
-  grid: true,
   data: [{ fn: 'cos(x)' }]
 })</code></pre></div></div><div class="col-md-6 center-block demos"><span class="graph" id="sticky"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Domain</h3>
 <p>The domains of both axes can be changed with the following configurations:</p>
@@ -165,12 +167,13 @@
   target: '#logarithmic',
   x: {
     type: 'log',
-    domain: [0.01, 1]
+    domain: [0.01, 1],
+    grid: true
   },
   y: {
-    domain: [-100, 100]
+    domain: [-100, 100],
+    grid: true
   },
-  grid: true,
   data: [
     {
       fn: '1/x * cos(1/x)',
@@ -667,8 +670,8 @@
 <li><code>graphType: 'polyline'</code> to render a nice segment from <code>offset</code> to <code>offset + vector</code></li>
 </ul></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#vector',
-  x: { domain: [-3, 8] },
-  grid: true,
+  x: { domain: [-3, 8], grid: true },
+  y: { grid: true },
   data: [
     {
       vector: [2, 1],

site/playground-rerender.html

@@ -33,7 +33,6 @@
 
     let obj = {
       target: plot,
-      grid: true,
       data: [
           { fn: 'x' }
       ]

src/chart.ts

@@ -286,11 +286,11 @@ export class Chart extends EventEmitter.EventEmitter {
     if (!this.meta.xAxis) {
       this.meta.xAxis = d3AxisBottom(this.meta.xScale)
     }
-    this.meta.xAxis.tickSize(this.options.grid ? -this.meta.height : 0).tickFormat(formatter)
+    this.meta.xAxis.tickSize(this.options.x.grid ? -this.meta.height : 0).tickFormat(formatter)
     if (!this.meta.yAxis) {
       this.meta.yAxis = d3AxisLeft(this.meta.yScale)
     }
-    this.meta.yAxis.tickSize(this.options.grid ? -this.meta.width : 0).tickFormat(formatter)
+    this.meta.yAxis.tickSize(this.options.y.grid ? -this.meta.width : 0).tickFormat(formatter)
 
     this.line = d3Line()
       .x(function (d) {

src/graph-types/scatter.ts

@@ -14,9 +14,8 @@ export default function Scatter(chart: Chart) {
   function scatter(selection: Selection<any, FunctionPlotDatum, any, any>) {
     selection.each(function (d) {
       const index = d.index
-      const computedColor = color(d, index)
-      const evaluatedData = builtInEvaluate(chart, d)
 
+      const evaluatedData = builtInEvaluate(chart, d)
       // scatter doesn't need groups, therefore each group is
       // flattened into a single array
       const joined = []
@@ -31,6 +30,7 @@ export default function Scatter(chart: Chart) {
       const cls = `scatter scatter-${index}`
       const innerSelectionEnter = innerSelection.enter().append('circle').attr('class', cls)
 
+      const computedColor = color(d, index)
       const selection = innerSelection
         .merge(innerSelectionEnter)
         .attr('fill', d3Hsl(computedColor.toString()).brighter(1.5).formatHex())

src/types.ts

@@ -40,6 +40,11 @@ export interface FunctionPlotOptionsAxis {
    * - `yAxis`: `left`
    */
   position?: 'sticky' | 'left' | 'bottom'
+
+  /**
+   * True to display a grid.
+   */
+  grid?: boolean
 }
 
 export interface FunctionPlotTip {
@@ -404,11 +409,6 @@ export interface FunctionPlotOptions {
    */
   tip?: FunctionPlotTip
 
-  /**
-   * True to display a grid
-   */
-  grid?: boolean
-
   /**
    * True to disable panning and zoom
    */

test/e2e/graphs.test.ts

@@ -69,7 +69,7 @@ describe('Function Plot', () => {
     expect(firstImage).toMatchImageSnapshot(matchSnapshotConfig)
 
     const secondRender = `
-      dualRender.data[0].fn = 'x'
+      dualRender.data[0] = { fn: 'x' }
       functionPlot(dualRender)
     `
     await page.evaluate(secondRender.toString())

test/e2e/snippets.ts

@@ -55,12 +55,13 @@ const snippets = [
       functionPlot({
         target: '#playground',
         x: {
-          label: 'real'
+          label: 'real',
+          grid: true
         },
         y: {
-          label: 'imaginary'
+          label: 'imaginary',
+          grid: true
         },
-        grid: true,
         data: [
           { fn: 'sqrt(1 - x * x)' } as LinearFunction,
           { fn: '-sqrt(1 - x * x)' } as LinearFunction
@@ -161,12 +162,13 @@ const snippets = [
         target: '#playground',
         x: {
           type: 'log',
-          domain: [0.01, 1]
+          domain: [0.01, 1],
+          grid: true
         },
         y: {
-          domain: [-100, 100]
+          domain: [-100, 100],
+          grid: true
         },
-        grid: true,
         data: [
           {
             fn: '1/x * cos(1/x)',