From 91f76614294f48a29b31081cd3e87c7189d0696b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= Date: Fri, 28 May 2021 15:50:24 +0200 Subject: [PATCH 1/7] Add shape-rendering --- README.md | 1 + src/style.js | 5 ++++- test/marks/area-test.js | 1 + test/marks/bar-test.js | 2 ++ test/marks/cell-test.js | 1 + test/marks/dot-test.js | 1 + test/marks/line-test.js | 1 + test/marks/link-test.js | 1 + test/marks/rect-test.js | 1 + test/marks/rule-test.js | 2 ++ test/marks/text-test.js | 1 + test/marks/tick-test.js | 2 ++ 12 files changed, 18 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5bfa961035..5b8371251f 100644 --- a/README.md +++ b/README.md @@ -462,6 +462,7 @@ All marks support the following style options: * **strokeMiterlimit** - to limit the length of *miter* joins * **strokeDasharray** - a comma-separated list of dash lengths (in pixels) * **mixBlendMode** - the [blend mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) (*e.g.*, *multiply*) +* **shapeRendering** - the [shape-rendering mode](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering) (*e.g.*, *crispEdges*) All marks support the following optional channels: diff --git a/src/style.js b/src/style.js index 4343485697..638b9d82d7 100644 --- a/src/style.js +++ b/src/style.js @@ -12,7 +12,8 @@ export function Style(mark, { strokeLinecap, strokeMiterlimit, strokeDasharray, - mixBlendMode + mixBlendMode, + shapeRendering } = {}) { mark.fill = impliedString(fill, "currentColor"); mark.fillOpacity = impliedNumber(fillOpacity, 1); @@ -24,6 +25,7 @@ export function Style(mark, { mark.strokeMiterlimit = impliedNumber(strokeMiterlimit, 4); mark.strokeDasharray = string(strokeDasharray); mark.mixBlendMode = impliedString(mixBlendMode, "normal"); + mark.shapeRendering = string(shapeRendering); } export function applyIndirectStyles(selection, mark) { @@ -36,6 +38,7 @@ export function applyIndirectStyles(selection, mark) { applyAttr(selection, "stroke-linecap", mark.strokeLinecap); applyAttr(selection, "stroke-miterlimit", mark.strokeMiterlimit); applyAttr(selection, "stroke-dasharray", mark.strokeDasharray); + applyAttr(selection, "shape-rendering", mark.shapeRendering); } export function applyDirectStyles(selection, mark) { diff --git a/test/marks/area-test.js b/test/marks/area-test.js index 7c214bc2e8..6950b7a955 100644 --- a/test/marks/area-test.js +++ b/test/marks/area-test.js @@ -20,6 +20,7 @@ it("area(data, options) has the expected defaults", () => { assert.strictEqual(area.strokeMiterlimit, undefined); assert.strictEqual(area.strokeDasharray, undefined); assert.strictEqual(area.mixBlendMode, undefined); + assert.strictEqual(area.shapeRendering, undefined); }); it("area(data, {x1, y1, y2}) specifies an optional y2 channel", () => { diff --git a/test/marks/bar-test.js b/test/marks/bar-test.js index 93a1f3eff8..e1664a7f89 100644 --- a/test/marks/bar-test.js +++ b/test/marks/bar-test.js @@ -18,6 +18,7 @@ it("barX() has the expected defaults", () => { assert.strictEqual(bar.strokeMiterlimit, undefined); assert.strictEqual(bar.strokeDasharray, undefined); assert.strictEqual(bar.mixBlendMode, undefined); + assert.strictEqual(bar.shapeRendering, undefined); assert.strictEqual(bar.insetTop, 0); assert.strictEqual(bar.insetRight, 0); assert.strictEqual(bar.insetBottom, 0); @@ -105,6 +106,7 @@ it("barY() has the expected defaults", () => { assert.strictEqual(bar.strokeMiterlimit, undefined); assert.strictEqual(bar.strokeDasharray, undefined); assert.strictEqual(bar.mixBlendMode, undefined); + assert.strictEqual(bar.shapeRendering, undefined); assert.strictEqual(bar.insetTop, 0); assert.strictEqual(bar.insetRight, 0); assert.strictEqual(bar.insetBottom, 0); diff --git a/test/marks/cell-test.js b/test/marks/cell-test.js index f3d476a28e..85131e1fd8 100644 --- a/test/marks/cell-test.js +++ b/test/marks/cell-test.js @@ -20,6 +20,7 @@ it("cell() has the expected defaults", () => { assert.strictEqual(cell.strokeMiterlimit, undefined); assert.strictEqual(cell.strokeDasharray, undefined); assert.strictEqual(cell.mixBlendMode, undefined); + assert.strictEqual(cell.shapeRendering, undefined); assert.strictEqual(cell.insetTop, 0); assert.strictEqual(cell.insetRight, 0); assert.strictEqual(cell.insetBottom, 0); diff --git a/test/marks/dot-test.js b/test/marks/dot-test.js index 2d2230854f..89e220ff3f 100644 --- a/test/marks/dot-test.js +++ b/test/marks/dot-test.js @@ -19,6 +19,7 @@ it("dot() has the expected defaults", () => { assert.strictEqual(dot.strokeMiterlimit, undefined); assert.strictEqual(dot.strokeDasharray, undefined); assert.strictEqual(dot.mixBlendMode, undefined); + assert.strictEqual(dot.shapeRendering, undefined); }); it("dot(data, {r}) allows r to be a constant radius", () => { diff --git a/test/marks/line-test.js b/test/marks/line-test.js index 6df74281ef..0812f72277 100644 --- a/test/marks/line-test.js +++ b/test/marks/line-test.js @@ -20,6 +20,7 @@ it("line() has the expected defaults", () => { assert.strictEqual(line.strokeMiterlimit, 1); assert.strictEqual(line.strokeDasharray, undefined); assert.strictEqual(line.mixBlendMode, undefined); + assert.strictEqual(line.shapeRendering, undefined); }); it("line(data, {z}) specifies an optional z channel", () => { diff --git a/test/marks/link-test.js b/test/marks/link-test.js index 9c3e6110e2..ad5239bfc3 100644 --- a/test/marks/link-test.js +++ b/test/marks/link-test.js @@ -18,6 +18,7 @@ it("link(data, options) has the expected defaults", () => { assert.strictEqual(link.strokeMiterlimit, 1); assert.strictEqual(link.strokeDasharray, undefined); assert.strictEqual(link.mixBlendMode, undefined); + assert.strictEqual(link.shapeRendering, undefined); }); it("link(data, {title}) specifies an optional title channel", () => { diff --git a/test/marks/rect-test.js b/test/marks/rect-test.js index 9c4cd8676d..9a45b8213c 100644 --- a/test/marks/rect-test.js +++ b/test/marks/rect-test.js @@ -18,6 +18,7 @@ it("rect(data, options) has the expected defaults", () => { assert.strictEqual(rect.strokeMiterlimit, undefined); assert.strictEqual(rect.strokeDasharray, undefined); assert.strictEqual(rect.mixBlendMode, undefined); + assert.strictEqual(rect.shapeRendering, undefined); assert.strictEqual(rect.insetTop, 0); assert.strictEqual(rect.insetRight, 0); assert.strictEqual(rect.insetBottom, 0); diff --git a/test/marks/rule-test.js b/test/marks/rule-test.js index 14f47b6203..e2af6f7740 100644 --- a/test/marks/rule-test.js +++ b/test/marks/rule-test.js @@ -18,6 +18,7 @@ it("ruleX() has the expected defaults", () => { assert.strictEqual(rule.strokeMiterlimit, undefined); assert.strictEqual(rule.strokeDasharray, undefined); assert.strictEqual(rule.mixBlendMode, undefined); + assert.strictEqual(rule.shapeRendering, undefined); }); it("ruleX(data, {title}) specifies an optional title channel", () => { @@ -105,6 +106,7 @@ it("ruleY() has the expected defaults", () => { assert.strictEqual(rule.strokeMiterlimit, undefined); assert.strictEqual(rule.strokeDasharray, undefined); assert.strictEqual(rule.mixBlendMode, undefined); + assert.strictEqual(rule.shapeRendering, undefined); }); it("ruleY(data, {title}) specifies an optional title channel", () => { diff --git a/test/marks/text-test.js b/test/marks/text-test.js index 067e696746..e08f79fbb3 100644 --- a/test/marks/text-test.js +++ b/test/marks/text-test.js @@ -18,6 +18,7 @@ it("text() has the expected defaults", () => { assert.strictEqual(text.strokeMiterlimit, undefined); assert.strictEqual(text.strokeDasharray, undefined); assert.strictEqual(text.mixBlendMode, undefined); + assert.strictEqual(text.shapeRendering, undefined); assert.strictEqual(text.textAnchor, undefined); assert.strictEqual(text.dx, undefined); assert.strictEqual(text.dy, "0.32em"); diff --git a/test/marks/tick-test.js b/test/marks/tick-test.js index 0392077de3..f04414d9d8 100644 --- a/test/marks/tick-test.js +++ b/test/marks/tick-test.js @@ -18,6 +18,7 @@ it("tickX() has the expected defaults", () => { assert.strictEqual(tick.strokeMiterlimit, undefined); assert.strictEqual(tick.strokeDasharray, undefined); assert.strictEqual(tick.mixBlendMode, undefined); + assert.strictEqual(tick.shapeRendering, undefined); }); it("tickX(data, {y}) uses a band scale", () => { @@ -70,6 +71,7 @@ it("tickY() has the expected defaults", () => { assert.strictEqual(tick.strokeMiterlimit, undefined); assert.strictEqual(tick.strokeDasharray, undefined); assert.strictEqual(tick.mixBlendMode, undefined); + assert.strictEqual(tick.shapeRendering, undefined); }); it("tickY(data, {x}) uses a band scale", () => { From 8f73bc3dcdec8449391878522c0ecad8566f29e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= Date: Sun, 30 May 2021 11:51:00 +0200 Subject: [PATCH 2/7] Add tests --- ...s-presidential-forecast-2016-histogram.csv | 540 ++++++++++++++++ test/marks/bar-test.js | 10 + test/output/usPresidentialForecast2016.svg | 586 ++++++++++++++++++ test/plots/index.js | 1 + test/plots/us-presidential-forecast-2016.js | 22 + 5 files changed, 1159 insertions(+) create mode 100644 test/data/us-presidential-forecast-2016-histogram.csv create mode 100644 test/output/usPresidentialForecast2016.svg create mode 100644 test/plots/us-presidential-forecast-2016.js diff --git a/test/data/us-presidential-forecast-2016-histogram.csv b/test/data/us-presidential-forecast-2016-histogram.csv new file mode 100644 index 0000000000..b885e0beac --- /dev/null +++ b/test/data/us-presidential-forecast-2016-histogram.csv @@ -0,0 +1,540 @@ +dem_ev,prob +0,0 +1,0 +2,0 +3,0 +4,0 +5,0 +6,0 +7,0 +8,0 +9,0 +10,0 +11,0 +12,0 +13,0 +14,0 +15,0 +16,0 +17,0 +18,0 +19,0 +20,0 +21,0 +22,0 +23,0 +24,0 +25,0 +26,0 +27,0 +28,0 +29,0 +30,0 +31,0 +32,0 +33,0 +34,0 +35,0 +36,0 +37,0 +38,0 +39,0 +40,0 +41,0 +42,0 +43,0 +44,0 +45,0 +46,0 +47,0 +48,0 +49,0 +50,0 +51,0 +52,0 +53,0 +54,0 +55,0 +56,0 +57,0 +58,0 +59,0 +60,0 +61,0 +62,0 +63,0 +64,0 +65,0 +66,0 +67,0 +68,0 +69,0 +70,0 +71,0 +72,0 +73,0 +74,0 +75,1e-05 +76,0 +77,0 +78,0 +79,0 +80,0 +81,0 +82,0 +83,0 +84,0 +85,0 +86,0 +87,0 +88,0 +89,0 +90,0 +91,0 +92,0 +93,0 +94,1e-05 +95,0 +96,0 +97,0 +98,0 +99,0 +100,1e-05 +101,1e-05 +102,0 +103,0 +104,5e-05 +105,1e-05 +106,0 +107,0 +108,2e-05 +109,0 +110,0 +111,1e-05 +112,1e-05 +113,0 +114,0 +115,2e-05 +116,1e-05 +117,0 +118,1e-05 +119,2e-05 +120,2e-05 +121,1e-05 +122,2e-05 +123,2e-05 +124,2e-05 +125,1e-05 +126,1e-05 +127,1e-05 +128,3e-05 +129,3e-05 +130,2e-05 +131,3e-05 +132,2e-05 +133,1e-05 +134,1e-05 +135,3e-05 +136,3e-05 +137,2e-05 +138,2e-05 +139,4e-05 +140,2e-05 +141,3e-05 +142,5e-05 +143,3e-05 +144,3e-05 +145,3e-05 +146,4e-05 +147,4e-05 +148,4e-05 +149,5e-05 +150,6e-05 +151,7e-05 +152,5e-05 +153,8e-05 +154,7e-05 +155,9e-05 +156,6e-05 +157,1e-04 +158,9e-05 +159,5e-05 +160,5e-05 +161,0.00012 +162,0.00012 +163,7e-05 +164,0.00014 +165,2e-04 +166,1e-04 +167,8e-05 +168,1e-04 +169,2e-04 +170,7e-05 +171,0.00011 +172,2e-04 +173,0.00019 +174,0.00013 +175,0.00023 +176,0.00053 +177,0.00012 +178,0.00026 +179,0.00016 +180,2e-04 +181,0.00025 +182,0.00023 +183,6e-04 +184,0.00014 +185,0.00041 +186,0.00034 +187,0.00021 +188,0.00049 +189,0.00034 +190,0.00029 +191,0.00036 +192,0.00044 +193,0.00059 +194,3e-04 +195,0.00036 +196,0.00063 +197,0.00034 +198,0.00074 +199,0.00058 +200,4e-04 +201,0.00063 +202,0.00042 +203,0.00061 +204,6e-04 +205,0.00052 +206,0.00084 +207,0.00056 +208,0.00082 +209,0.00077 +210,7e-04 +211,0.00094 +212,0.00078 +213,0.00094 +214,0.00088 +215,0.00072 +216,0.00091 +217,0.001 +218,0.00085 +219,0.00101 +220,0.00109 +221,0.00116 +222,0.00119 +223,0.0013 +224,0.00125 +225,0.00097 +226,0.00126 +227,0.00166 +228,0.00104 +229,0.00168 +230,0.00132 +231,0.00139 +232,0.00162 +233,0.0018 +234,0.00127 +235,0.00127 +236,0.00199 +237,0.00207 +238,0.00209 +239,0.00263 +240,0.00143 +241,0.00165 +242,0.00221 +243,0.0029 +244,0.00165 +245,0.00181 +246,0.00245 +247,0.00236 +248,0.00377 +249,0.00281 +250,0.00207 +251,0.00158 +252,0.00479 +253,0.00272 +254,0.00295 +255,0.00189 +256,0.00317 +257,0.00243 +258,0.00548 +259,0.00459 +260,0.00191 +261,0.0025 +262,0.0037 +263,0.00526 +264,0.00277 +265,0.00309 +266,0.00315 +267,0.00361 +268,0.00953 +269,0.00421 +270,0.00363 +271,0.00225 +272,0.01238 +273,0.00469 +274,0.00772 +275,0.00266 +276,0.00335 +277,0.00351 +278,0.01386 +279,0.00476 +280,0.00292 +281,0.00419 +282,0.00241 +283,0.00625 +284,0.00532 +285,0.00397 +286,0.00279 +287,0.01133 +288,0.00512 +289,0.00555 +290,0.00536 +291,0.00446 +292,0.00475 +293,0.01406 +294,0.00703 +295,0.00321 +296,0.00749 +297,0.00843 +298,0.00435 +299,0.00657 +300,0.00407 +301,0.01161 +302,0.00721 +303,0.00823 +304,0.00337 +305,0.00607 +306,0.00376 +307,0.01798 +308,0.00809 +309,0.00429 +310,0.00346 +311,0.00845 +312,0.00883 +313,0.0089 +314,0.00583 +315,0.00359 +316,0.01231 +317,0.00844 +318,0.0093 +319,0.00796 +320,0.00529 +321,0.00398 +322,0.02563 +323,0.01613 +324,0.00568 +325,0.01237 +326,0.00811 +327,0.00386 +328,0.01411 +329,0.01198 +330,0.00535 +331,0.00813 +332,0.00757 +333,0.00484 +334,0.00992 +335,0.0069 +336,0.00569 +337,0.00489 +338,0.00584 +339,0.00491 +340,0.02218 +341,0.01878 +342,0.00723 +343,0.00594 +344,0.00676 +345,0.00479 +346,0.01553 +347,0.01919 +348,0.00811 +349,0.006 +350,0.0086 +351,0.00746 +352,0.00718 +353,0.00677 +354,0.00421 +355,0.00441 +356,0.00832 +357,0.0098 +358,0.00813 +359,0.00566 +360,0.00413 +361,0.00482 +362,0.00659 +363,0.00743 +364,0.00559 +365,0.0041 +366,0.00518 +367,0.00594 +368,0.00473 +369,0.00378 +370,0.00341 +371,0.0029 +372,0.00388 +373,0.00463 +374,0.00444 +375,0.00362 +376,0.00287 +377,0.00376 +378,0.0037 +379,0.00217 +380,0.00227 +381,0.00291 +382,0.00221 +383,0.00307 +384,0.00377 +385,0.00164 +386,0.00211 +387,0.00236 +388,0.00148 +389,0.00187 +390,0.00202 +391,0.00115 +392,0.00208 +393,0.00271 +394,0.00135 +395,0.00153 +396,0.00121 +397,0.00108 +398,0.00125 +399,0.00121 +400,0.00112 +401,0.00132 +402,0.00089 +403,0.00123 +404,0.00147 +405,0.00086 +406,9e-04 +407,0.00073 +408,0.00066 +409,0.00071 +410,0.00086 +411,0.00094 +412,0.00078 +413,0.00073 +414,0.00078 +415,0.00081 +416,0.00068 +417,0.00058 +418,0.00052 +419,0.00066 +420,0.00063 +421,0.00064 +422,0.00103 +423,0.00042 +424,0.00041 +425,0.00075 +426,0.00039 +427,0.00041 +428,7e-04 +429,3e-04 +430,0.00059 +431,0.00112 +432,0.00036 +433,5e-04 +434,0.00042 +435,0.00025 +436,0.00052 +437,0.00049 +438,0.00027 +439,0.00057 +440,0.00034 +441,0.00052 +442,0.00062 +443,0.00021 +444,0.00027 +445,0.00047 +446,0.00022 +447,0.00035 +448,0.00039 +449,0.00033 +450,0.00038 +451,0.00023 +452,0.00034 +453,0.00022 +454,0.00017 +455,0.00031 +456,0.00027 +457,0.00016 +458,3e-04 +459,0.00022 +460,0.00031 +461,0.00025 +462,0.00014 +463,0.00023 +464,0.00013 +465,0.00013 +466,0.00026 +467,0.00015 +468,7e-05 +469,0.00026 +470,0.00013 +471,0.00011 +472,0.00017 +473,7e-05 +474,9e-05 +475,0.00013 +476,6e-05 +477,0.00011 +478,0.00011 +479,5e-05 +480,9e-05 +481,9e-05 +482,4e-05 +483,8e-05 +484,7e-05 +485,5e-05 +486,7e-05 +487,4e-05 +488,3e-05 +489,6e-05 +490,3e-05 +491,2e-05 +492,6e-05 +493,3e-05 +494,2e-05 +495,6e-05 +496,2e-05 +497,2e-05 +498,2e-05 +499,2e-05 +500,3e-05 +501,3e-05 +502,1e-05 +503,3e-05 +504,2e-05 +505,1e-05 +506,3e-05 +507,1e-05 +508,2e-05 +509,2e-05 +510,2e-05 +511,1e-05 +512,2e-05 +513,1e-05 +514,1e-05 +515,1e-05 +516,1e-05 +517,1e-05 +518,1e-05 +519,1e-05 +520,0 +521,1e-05 +522,0 +523,1e-05 +524,1e-05 +525,1e-05 +526,0 +527,1e-05 +528,0 +529,0 +530,1e-05 +531,0 +532,0 +533,0 +534,1e-05 +535,0 +536,0 +537,1e-05 +538,0 diff --git a/test/marks/bar-test.js b/test/marks/bar-test.js index e1664a7f89..a57d0a467c 100644 --- a/test/marks/bar-test.js +++ b/test/marks/bar-test.js @@ -89,6 +89,11 @@ it("barX(data, {x, y}) defaults x1 to zero and x2 to x", () => { assert.strictEqual(y.scale, "y"); }); +it("barX(data, {shapeRendering}) allows shapeRendering to have a constant value", () => { + const bar = Plot.barX(undefined, {shapeRendering: "crispEdges"}); + assert.strictEqual(bar.shapeRendering, "crispEdges"); +}); + it("barY() has the expected defaults", () => { const bar = Plot.barY(); assert.strictEqual(bar.data, undefined); @@ -176,3 +181,8 @@ it("barY(data, {x, y}) defaults y1 to zero and y2 to y", () => { assert.strictEqual(y2.value.label, "1"); assert.strictEqual(y2.scale, "y"); }); + +it("barY(data, {shapeRendering}) allows shapeRendering to have a constant value", () => { + const bar = Plot.barY(undefined, {shapeRendering: "crispEdges"}); + assert.strictEqual(bar.shapeRendering, "crispEdges"); +}); diff --git a/test/output/usPresidentialForecast2016.svg b/test/output/usPresidentialForecast2016.svg new file mode 100644 index 0000000000..3a5e041bea --- /dev/null +++ b/test/output/usPresidentialForecast2016.svg @@ -0,0 +1,586 @@ + + + + 0.0% + + + 0.5% + + + 1.0% + + + 1.5% + + + 2.0% + + + 2.5% + ↑ prob + + + + 100 + + + 200 + + + 300 + + + 400 + + + 500 + Electoral votes for Hillary Clinton → + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/plots/index.js b/test/plots/index.js index e4d486a3dd..b9d271ee63 100644 --- a/test/plots/index.js +++ b/test/plots/index.js @@ -96,6 +96,7 @@ export {default as usCongressAgeGender} from "./us-congress-age-gender.js"; export {default as usPopulationStateAge} from "./us-population-state-age.js"; export {default as usPopulationStateAgeDots} from "./us-population-state-age-dots.js"; export {default as usPresidentialElection2020} from "./us-presidential-election-2020.js"; +export {default as usPresidentialForecast2016} from "./us-presidential-forecast-2016.js"; export {default as usRetailSales} from "./us-retail-sales.js"; export {default as usStatePopulationChange} from "./us-state-population-change.js"; export {default as wordLengthMobyDick} from "./word-length-moby-dick.js"; diff --git a/test/plots/us-presidential-forecast-2016.js b/test/plots/us-presidential-forecast-2016.js new file mode 100644 index 0000000000..c4b4148f40 --- /dev/null +++ b/test/plots/us-presidential-forecast-2016.js @@ -0,0 +1,22 @@ +import * as Plot from "@observablehq/plot"; +import * as d3 from "d3"; + +export default async function() { + const data = await d3.csv("data/us-presidential-forecast-2016-histogram.csv", d3.autoType); + return Plot.plot({ + x: { + label: 'Electoral votes for Hillary Clinton →', + labelAnchor: 'left', + ticks: [100, 200, 300, 400, 500] + }, + y: { + ticks: 5, + tickFormat: '%' + }, + marks: [ + Plot.barY(data, {x: "dem_ev", y: "prob", shapeRendering: 'crispEdges', fill:'dem_ev', stroke:'dem_ev' }), + Plot.ruleY([0]), + Plot.ruleX([270]) + ] + }); +} From 4a45868156ad905ef5f279e03ed2a34a99c47795 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Sun, 30 May 2021 12:23:43 +0200 Subject: [PATCH 3/7] Update test/plots/us-presidential-forecast-2016.js --- test/plots/us-presidential-forecast-2016.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/plots/us-presidential-forecast-2016.js b/test/plots/us-presidential-forecast-2016.js index c4b4148f40..1c463d8723 100644 --- a/test/plots/us-presidential-forecast-2016.js +++ b/test/plots/us-presidential-forecast-2016.js @@ -5,8 +5,8 @@ export default async function() { const data = await d3.csv("data/us-presidential-forecast-2016-histogram.csv", d3.autoType); return Plot.plot({ x: { - label: 'Electoral votes for Hillary Clinton →', - labelAnchor: 'left', + label: "Electoral votes for Hillary Clinton →", + labelAnchor: "left", ticks: [100, 200, 300, 400, 500] }, y: { From 499127d9dca50769eaaf6080c6e1a91ad2ef7410 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Sun, 30 May 2021 12:23:49 +0200 Subject: [PATCH 4/7] Update test/plots/us-presidential-forecast-2016.js --- test/plots/us-presidential-forecast-2016.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/plots/us-presidential-forecast-2016.js b/test/plots/us-presidential-forecast-2016.js index 1c463d8723..9ef0e3d80c 100644 --- a/test/plots/us-presidential-forecast-2016.js +++ b/test/plots/us-presidential-forecast-2016.js @@ -14,7 +14,7 @@ export default async function() { tickFormat: '%' }, marks: [ - Plot.barY(data, {x: "dem_ev", y: "prob", shapeRendering: 'crispEdges', fill:'dem_ev', stroke:'dem_ev' }), + Plot.barY(data, {x: "dem_ev", y: "prob", shapeRendering: "crispEdges", fill: "dem_ev", stroke: "dem_ev" }), Plot.ruleY([0]), Plot.ruleX([270]) ] From 8ede81a8ade3259b8df6e425c02f5ab418b1ff6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= Date: Sun, 30 May 2021 12:44:50 +0200 Subject: [PATCH 5/7] Consistent quotes --- test/plots/us-presidential-forecast-2016.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/plots/us-presidential-forecast-2016.js b/test/plots/us-presidential-forecast-2016.js index 9ef0e3d80c..aa2f35f123 100644 --- a/test/plots/us-presidential-forecast-2016.js +++ b/test/plots/us-presidential-forecast-2016.js @@ -11,7 +11,7 @@ export default async function() { }, y: { ticks: 5, - tickFormat: '%' + tickFormat: "%" }, marks: [ Plot.barY(data, {x: "dem_ev", y: "prob", shapeRendering: "crispEdges", fill: "dem_ev", stroke: "dem_ev" }), From 283ecf3a8fd7027954e18633004cdbd3945d3e2e Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Sat, 31 Jul 2021 20:14:50 -0700 Subject: [PATCH 6/7] shapeRendering defaults to auto --- src/style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style.js b/src/style.js index 638b9d82d7..7979bc7f53 100644 --- a/src/style.js +++ b/src/style.js @@ -25,7 +25,7 @@ export function Style(mark, { mark.strokeMiterlimit = impliedNumber(strokeMiterlimit, 4); mark.strokeDasharray = string(strokeDasharray); mark.mixBlendMode = impliedString(mixBlendMode, "normal"); - mark.shapeRendering = string(shapeRendering); + mark.shapeRendering = impliedString(shapeRendering, "auto"); } export function applyIndirectStyles(selection, mark) { From 038fb4539ca0eed55830a8188550c66cfc502d65 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Sat, 31 Jul 2021 20:22:38 -0700 Subject: [PATCH 7/7] rule, not bar --- ...s-presidential-forecast-2016-histogram.csv | 2 +- test/output/usPresidentialForecast2016.svg | 1121 +++++++++-------- test/plots/us-presidential-forecast-2016.js | 8 +- 3 files changed, 566 insertions(+), 565 deletions(-) diff --git a/test/data/us-presidential-forecast-2016-histogram.csv b/test/data/us-presidential-forecast-2016-histogram.csv index b885e0beac..7402812d69 100644 --- a/test/data/us-presidential-forecast-2016-histogram.csv +++ b/test/data/us-presidential-forecast-2016-histogram.csv @@ -1,4 +1,4 @@ -dem_ev,prob +dem_electoral_votes,probability 0,0 1,0 2,0 diff --git a/test/output/usPresidentialForecast2016.svg b/test/output/usPresidentialForecast2016.svg index 3a5e041bea..c83fdeedf4 100644 --- a/test/output/usPresidentialForecast2016.svg +++ b/test/output/usPresidentialForecast2016.svg @@ -1,586 +1,589 @@ - 0.0% + 0.0 - - 0.5% + + 0.5 - - 1.0% + + 1.0 - 1.5% + 1.5 - - 2.0% + + 2.0 - - 2.5% - ↑ prob + + 2.5 + ↑ probability (%) - + + 0 + + 100 - + 200 - + 300 - + 400 - + 500 - Electoral votes for Hillary Clinton → + Electoral votes for Hillary Clinton → - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + \ No newline at end of file diff --git a/test/plots/us-presidential-forecast-2016.js b/test/plots/us-presidential-forecast-2016.js index aa2f35f123..f9477471a2 100644 --- a/test/plots/us-presidential-forecast-2016.js +++ b/test/plots/us-presidential-forecast-2016.js @@ -5,16 +5,14 @@ export default async function() { const data = await d3.csv("data/us-presidential-forecast-2016-histogram.csv", d3.autoType); return Plot.plot({ x: { - label: "Electoral votes for Hillary Clinton →", - labelAnchor: "left", - ticks: [100, 200, 300, 400, 500] + label: "Electoral votes for Hillary Clinton →" }, y: { ticks: 5, - tickFormat: "%" + percent: true }, marks: [ - Plot.barY(data, {x: "dem_ev", y: "prob", shapeRendering: "crispEdges", fill: "dem_ev", stroke: "dem_ev" }), + Plot.ruleX(data, {x: "dem_electoral_votes", y: "probability", shapeRendering: "crispEdges", stroke: "dem_electoral_votes", strokeWidth: 1.5}), Plot.ruleY([0]), Plot.ruleX([270]) ]