From 7bce12a15796a70130a3c559c967eeca3763729f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 11 Aug 2021 12:21:01 +0200 Subject: [PATCH 1/7] This example plot computes the median of cars' economy (mpg), grouped by number of cylinders The bins are sorted by decreasing r, so that they are all visible. The example would benefit from stackR (#197). It could also benefit from a strategy to create missing values for the line, so that it's broken when there are no data. However, it won't work with an approach such as "return empty bins" (#495), because returning empty bins will not create the *z* values for each and every category, which would be necessary if we wanted to create broken lines. This shows that a generic foolproof solution to #351 will require much more than #495 (and #489 and #491 are not better in that regard). --- test/output/carsMpg.svg | 270 ++++++++++++++++++++++++++++++++++++++++ test/plots/cars-mpg.js | 35 ++++++ test/plots/index.js | 1 + 3 files changed, 306 insertions(+) create mode 100644 test/output/carsMpg.svg create mode 100644 test/plots/cars-mpg.js diff --git a/test/output/carsMpg.svg b/test/output/carsMpg.svg new file mode 100644 index 0000000000..07853083a6 --- /dev/null +++ b/test/output/carsMpg.svg @@ -0,0 +1,270 @@ + + + + + 0 + + + + 5 + + + + 10 + + + + 15 + + + + 20 + + + + 25 + + + + 30 + + + + 35 + + + + 40 + + + + 45 + ↑ economy (mpg) + + + + 70 + + + 71 + + + 72 + + + 73 + + + 74 + + + 75 + + + 76 + + + 77 + + + 78 + + + 79 + + + 80 + + + 81 + + + 82 + year → + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/plots/cars-mpg.js b/test/plots/cars-mpg.js new file mode 100644 index 0000000000..fac40af0cf --- /dev/null +++ b/test/plots/cars-mpg.js @@ -0,0 +1,35 @@ +import * as Plot from "@observablehq/plot"; +import * as d3 from "d3"; + +export default async function() { + const data = await d3.csv("data/cars.csv", d3.autoType); + + return Plot.plot({ + x: {inset: 20, ticks: 10}, + y: {grid: true}, + color: { + type: "categorical", + legend: true // as soon as it's available + }, + marks: [ + Plot.ruleY([0], {filter: false}), + Plot.line(data, + Plot.binX({y: "mean"}, { + x: d => +d["year"], + y: "economy (mpg)", + stroke: "cylinders", + curve: "basis", + thresholds: 20 + }) + ), + Plot.dot(data, + Plot.reverse(Plot.sort("length", Plot.binY({ r: "count" }, { + x: "year", + y: "economy (mpg)", + fill: "cylinders", + thresholds: 20 + })) + )) + ] + }); +} diff --git a/test/plots/index.js b/test/plots/index.js index ea0e16fc6b..3224f0c5c2 100644 --- a/test/plots/index.js +++ b/test/plots/index.js @@ -17,6 +17,7 @@ export {default as athletesWeightCumulative} from "./athletes-weight-cumulative. export {default as ballotStatusRace} from "./ballot-status-race.js"; export {default as beckerBarley} from "./becker-barley.js"; export {default as caltrain} from "./caltrain.js"; +export {default as carsMpg} from "./cars-mpg.js"; export {default as carsParcoords} from "./cars-parcoords.js"; export {default as crimeanWarOverlapped} from "./crimean-war-overlapped.js"; export {default as crimeanWarStacked} from "./crimean-war-stacked.js"; From 6eaf67dc15faac99901620a3587165e62a05c411 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 11 Aug 2021 15:34:15 +0200 Subject: [PATCH 2/7] Update test/plots/cars-mpg.js Co-authored-by: Mike Bostock --- test/plots/cars-mpg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/plots/cars-mpg.js b/test/plots/cars-mpg.js index fac40af0cf..a8cf63b00b 100644 --- a/test/plots/cars-mpg.js +++ b/test/plots/cars-mpg.js @@ -15,7 +15,7 @@ export default async function() { Plot.ruleY([0], {filter: false}), Plot.line(data, Plot.binX({y: "mean"}, { - x: d => +d["year"], + x: "year", y: "economy (mpg)", stroke: "cylinders", curve: "basis", From 171ef958628582118e43ea4834c8f15dc87f3c29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 11 Aug 2021 15:35:43 +0200 Subject: [PATCH 3/7] Update test/plots/cars-mpg.js Co-authored-by: Mike Bostock --- test/plots/cars-mpg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/plots/cars-mpg.js b/test/plots/cars-mpg.js index a8cf63b00b..1034966236 100644 --- a/test/plots/cars-mpg.js +++ b/test/plots/cars-mpg.js @@ -23,7 +23,7 @@ export default async function() { }) ), Plot.dot(data, - Plot.reverse(Plot.sort("length", Plot.binY({ r: "count" }, { + Plot.reverse(Plot.sort("length", Plot.binY({r: "count"}, { x: "year", y: "economy (mpg)", fill: "cylinders", From c4c00718d387c37a5eecf4498cd71ecccccf1c42 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Wed, 11 Aug 2021 07:52:48 -0700 Subject: [PATCH 4/7] zero, not filter --- src/transforms/filter.js | 1 + test/plots/cars-mpg.js | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/transforms/filter.js b/src/transforms/filter.js index ec4f9cf5ee..2ccb733d8b 100644 --- a/src/transforms/filter.js +++ b/src/transforms/filter.js @@ -8,6 +8,7 @@ export function filter(value, options) { export function filterTransform(value) { return (data, facets) => { const V = valueof(data, value); + console.log("filterTransform", {value, V}); return {data, facets: facets.map(I => I.filter(i => V[i]))}; }; } diff --git a/test/plots/cars-mpg.js b/test/plots/cars-mpg.js index 1034966236..9c7f9e22c1 100644 --- a/test/plots/cars-mpg.js +++ b/test/plots/cars-mpg.js @@ -6,13 +6,12 @@ export default async function() { return Plot.plot({ x: {inset: 20, ticks: 10}, - y: {grid: true}, + y: {grid: true, zero: true}, color: { type: "categorical", legend: true // as soon as it's available }, marks: [ - Plot.ruleY([0], {filter: false}), Plot.line(data, Plot.binX({y: "mean"}, { x: "year", From 9e6029157a3e59a3d51b8af9210434ae57693517 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Wed, 11 Aug 2021 08:05:00 -0700 Subject: [PATCH 5/7] group, not bin --- test/output/carsMpg.svg | 389 ++++++++++++++++++++-------------------- test/plots/cars-mpg.js | 7 +- 2 files changed, 197 insertions(+), 199 deletions(-) diff --git a/test/output/carsMpg.svg b/test/output/carsMpg.svg index 07853083a6..9587e8cfd0 100644 --- a/test/output/carsMpg.svg +++ b/test/output/carsMpg.svg @@ -42,229 +42,228 @@ ↑ economy (mpg) - + 70 - + 71 - + 72 - + 73 - + 74 - + 75 - + 76 - + 77 - + 78 - + 79 - + 80 - + 81 - + 82 - year → + year - - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/plots/cars-mpg.js b/test/plots/cars-mpg.js index 9c7f9e22c1..9fa5030fbb 100644 --- a/test/plots/cars-mpg.js +++ b/test/plots/cars-mpg.js @@ -5,7 +5,7 @@ export default async function() { const data = await d3.csv("data/cars.csv", d3.autoType); return Plot.plot({ - x: {inset: 20, ticks: 10}, + x: {type: "point"}, y: {grid: true, zero: true}, color: { type: "categorical", @@ -13,12 +13,11 @@ export default async function() { }, marks: [ Plot.line(data, - Plot.binX({y: "mean"}, { + Plot.groupX({y: "mean"}, { x: "year", y: "economy (mpg)", stroke: "cylinders", - curve: "basis", - thresholds: 20 + curve: "basis" }) ), Plot.dot(data, From 880b66437076b92f565166777e223295b464c33b Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Wed, 11 Aug 2021 08:11:59 -0700 Subject: [PATCH 6/7] remove console.log --- src/transforms/filter.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/transforms/filter.js b/src/transforms/filter.js index 2ccb733d8b..ec4f9cf5ee 100644 --- a/src/transforms/filter.js +++ b/src/transforms/filter.js @@ -8,7 +8,6 @@ export function filter(value, options) { export function filterTransform(value) { return (data, facets) => { const V = valueof(data, value); - console.log("filterTransform", {value, V}); return {data, facets: facets.map(I => I.filter(i => V[i]))}; }; } From aa3b84ef12eea5b39d67c41a3320ced284e9f2ba Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Wed, 11 Aug 2021 08:12:15 -0700 Subject: [PATCH 7/7] stroke, not fill --- test/output/carsMpg.svg | 362 ++++++++++++++++++++-------------------- test/plots/cars-mpg.js | 41 +++-- 2 files changed, 201 insertions(+), 202 deletions(-) diff --git a/test/output/carsMpg.svg b/test/output/carsMpg.svg index 9587e8cfd0..91088b166d 100644 --- a/test/output/carsMpg.svg +++ b/test/output/carsMpg.svg @@ -83,187 +83,187 @@ year - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/plots/cars-mpg.js b/test/plots/cars-mpg.js index 9fa5030fbb..6ff72d6a4a 100644 --- a/test/plots/cars-mpg.js +++ b/test/plots/cars-mpg.js @@ -3,31 +3,30 @@ import * as d3 from "d3"; export default async function() { const data = await d3.csv("data/cars.csv", d3.autoType); - return Plot.plot({ - x: {type: "point"}, - y: {grid: true, zero: true}, + x: { + type: "point" + }, + y: { + grid: true, + zero: true + }, color: { - type: "categorical", - legend: true // as soon as it's available + type: "ordinal" }, marks: [ - Plot.line(data, - Plot.groupX({y: "mean"}, { - x: "year", - y: "economy (mpg)", - stroke: "cylinders", - curve: "basis" - }) - ), - Plot.dot(data, - Plot.reverse(Plot.sort("length", Plot.binY({r: "count"}, { - x: "year", - y: "economy (mpg)", - fill: "cylinders", - thresholds: 20 - })) - )) + Plot.line(data, Plot.groupX({y: "mean"}, { + x: "year", + y: "economy (mpg)", + stroke: "cylinders", + curve: "basis" + })), + Plot.dot(data, Plot.binY({r: "count"}, { + x: "year", + y: "economy (mpg)", + stroke: "cylinders", + thresholds: 20 + })) ] }); }