Skip to content

Commit eef0280

Browse files
committed
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.
1 parent 6466a78 commit eef0280

File tree

8 files changed

+50
-43
lines changed

8 files changed

+50
-43
lines changed

site/js/site.js

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ function onSiteDependenciesLoaded() {
66

77
functionPlot({
88
target: '#description-sample',
9-
y: { domain: [-1, 9] },
9+
x: { grid: true },
10+
y: { domain: [-1, 9], grid: true },
1011
tip: {
1112
renderer: function () {}
1213
},
13-
grid: true,
1414
data: [
1515
{
1616
fn: 'x^2',
@@ -119,17 +119,18 @@ function onSiteDependenciesLoaded() {
119119
/**
120120
* ### Grid
121121
*
122-
* Set `grid: true` in the options sent to function plot
122+
* Set `grid: true` in the axis objects to draw a grid.
123123
*/
124124
functionPlot({
125125
target: '#grid',
126126
x: {
127-
label: 'real'
127+
label: 'real',
128+
grid: true
128129
},
129130
y: {
130-
label: 'imaginary'
131+
label: 'imaginary',
132+
grid: true
131133
},
132-
grid: true,
133134
data: [{ fn: 'sqrt(1 - x * x)' }, { fn: '-sqrt(1 - x * x)' }]
134135
})
135136

@@ -142,12 +143,13 @@ function onSiteDependenciesLoaded() {
142143
functionPlot({
143144
target: '#sticky',
144145
x: {
145-
position: 'sticky'
146+
position: 'sticky',
147+
grid: true
146148
},
147149
y: {
148-
position: 'sticky'
150+
position: 'sticky',
151+
grid: true
149152
},
150-
grid: true,
151153
data: [{ fn: 'cos(x)' }]
152154
})
153155

@@ -277,12 +279,13 @@ function onSiteDependenciesLoaded() {
277279
target: '#logarithmic',
278280
x: {
279281
type: 'log',
280-
domain: [0.01, 1]
282+
domain: [0.01, 1],
283+
grid: true
281284
},
282285
y: {
283-
domain: [-100, 100]
286+
domain: [-100, 100],
287+
grid: true
284288
},
285-
grid: true,
286289
data: [
287290
{
288291
fn: '1/x * cos(1/x)',
@@ -943,8 +946,8 @@ function onSiteDependenciesLoaded() {
943946
*/
944947
functionPlot({
945948
target: '#vector',
946-
x: { domain: [-3, 8] },
947-
grid: true,
949+
x: { domain: [-3, 8], grid: true },
950+
y: { grid: true },
948951
data: [
949952
{
950953
vector: [2, 1],

site/partials/examples.html

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,27 +49,29 @@
4949
}
5050
]
5151
})</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>
52-
<p>Set <code>grid: true</code> in the options sent to function plot</p></div><div class="code"><pre><code class="javascript">functionPlot({
52+
<p>Set <code>grid: true</code> in the axis objects to draw a grid.</p></div><div class="code"><pre><code class="javascript">functionPlot({
5353
target: '#grid',
5454
x: {
55-
label: 'real'
55+
label: 'real',
56+
grid: true
5657
},
5758
y: {
58-
label: 'imaginary'
59+
label: 'imaginary',
60+
grid: true
5961
},
60-
grid: true,
6162
data: [{ fn: 'sqrt(1 - x * x)' }, { fn: '-sqrt(1 - x * x)' }]
6263
})</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>
6364
<p>Set <code>position: 'sticky'</code> on an axis to keep it centered
6465
in the screen and constrained to the viewport on pan and zoom.</p></div><div class="code"><pre><code class="javascript">functionPlot({
6566
target: '#sticky',
6667
x: {
67-
position: 'sticky'
68+
position: 'sticky',
69+
grid: true
6870
},
6971
y: {
70-
position: 'sticky'
72+
position: 'sticky',
73+
grid: true
7174
},
72-
grid: true,
7375
data: [{ fn: 'cos(x)' }]
7476
})</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>
7577
<p>The domains of both axes can be changed with the following configurations:</p>
@@ -165,12 +167,13 @@
165167
target: '#logarithmic',
166168
x: {
167169
type: 'log',
168-
domain: [0.01, 1]
170+
domain: [0.01, 1],
171+
grid: true
169172
},
170173
y: {
171-
domain: [-100, 100]
174+
domain: [-100, 100],
175+
grid: true
172176
},
173-
grid: true,
174177
data: [
175178
{
176179
fn: '1/x * cos(1/x)',
@@ -667,8 +670,8 @@
667670
<li><code>graphType: 'polyline'</code> to render a nice segment from <code>offset</code> to <code>offset + vector</code></li>
668671
</ul></div><div class="code"><pre><code class="javascript">functionPlot({
669672
target: '#vector',
670-
x: { domain: [-3, 8] },
671-
grid: true,
673+
x: { domain: [-3, 8], grid: true },
674+
y: { grid: true },
672675
data: [
673676
{
674677
vector: [2, 1],

site/playground-rerender.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333

3434
let obj = {
3535
target: plot,
36-
grid: true,
3736
data: [
3837
{ fn: 'x' }
3938
]

src/chart.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -286,11 +286,11 @@ export class Chart extends EventEmitter.EventEmitter {
286286
if (!this.meta.xAxis) {
287287
this.meta.xAxis = d3AxisBottom(this.meta.xScale)
288288
}
289-
this.meta.xAxis.tickSize(this.options.grid ? -this.meta.height : 0).tickFormat(formatter)
289+
this.meta.xAxis.tickSize(this.options.x.grid ? -this.meta.height : 0).tickFormat(formatter)
290290
if (!this.meta.yAxis) {
291291
this.meta.yAxis = d3AxisLeft(this.meta.yScale)
292292
}
293-
this.meta.yAxis.tickSize(this.options.grid ? -this.meta.width : 0).tickFormat(formatter)
293+
this.meta.yAxis.tickSize(this.options.y.grid ? -this.meta.width : 0).tickFormat(formatter)
294294

295295
this.line = d3Line()
296296
.x(function (d) {

src/graph-types/scatter.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,8 @@ export default function Scatter(chart: Chart) {
1414
function scatter(selection: Selection<any, FunctionPlotDatum, any, any>) {
1515
selection.each(function (d) {
1616
const index = d.index
17-
const computedColor = color(d, index)
18-
const evaluatedData = builtInEvaluate(chart, d)
1917

18+
const evaluatedData = builtInEvaluate(chart, d)
2019
// scatter doesn't need groups, therefore each group is
2120
// flattened into a single array
2221
const joined = []
@@ -31,6 +30,7 @@ export default function Scatter(chart: Chart) {
3130
const cls = `scatter scatter-${index}`
3231
const innerSelectionEnter = innerSelection.enter().append('circle').attr('class', cls)
3332

33+
const computedColor = color(d, index)
3434
const selection = innerSelection
3535
.merge(innerSelectionEnter)
3636
.attr('fill', d3Hsl(computedColor.toString()).brighter(1.5).formatHex())

src/types.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@ export interface FunctionPlotOptionsAxis {
4040
* - `yAxis`: `left`
4141
*/
4242
position?: 'sticky' | 'left' | 'bottom'
43+
44+
/**
45+
* True to display a grid.
46+
*/
47+
grid?: boolean
4348
}
4449

4550
export interface FunctionPlotTip {
@@ -404,11 +409,6 @@ export interface FunctionPlotOptions {
404409
*/
405410
tip?: FunctionPlotTip
406411

407-
/**
408-
* True to display a grid
409-
*/
410-
grid?: boolean
411-
412412
/**
413413
* True to disable panning and zoom
414414
*/

test/e2e/graphs.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ describe('Function Plot', () => {
6969
expect(firstImage).toMatchImageSnapshot(matchSnapshotConfig)
7070

7171
const secondRender = `
72-
dualRender.data[0].fn = 'x'
72+
dualRender.data[0] = { fn: 'x' }
7373
functionPlot(dualRender)
7474
`
7575
await page.evaluate(secondRender.toString())

test/e2e/snippets.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,13 @@ const snippets = [
5555
functionPlot({
5656
target: '#playground',
5757
x: {
58-
label: 'real'
58+
label: 'real',
59+
grid: true
5960
},
6061
y: {
61-
label: 'imaginary'
62+
label: 'imaginary',
63+
grid: true
6264
},
63-
grid: true,
6465
data: [
6566
{ fn: 'sqrt(1 - x * x)' } as LinearFunction,
6667
{ fn: '-sqrt(1 - x * x)' } as LinearFunction
@@ -161,12 +162,13 @@ const snippets = [
161162
target: '#playground',
162163
x: {
163164
type: 'log',
164-
domain: [0.01, 1]
165+
domain: [0.01, 1],
166+
grid: true
165167
},
166168
y: {
167-
domain: [-100, 100]
169+
domain: [-100, 100],
170+
grid: true
168171
},
169-
grid: true,
170172
data: [
171173
{
172174
fn: '1/x * cos(1/x)',

0 commit comments

Comments
 (0)