diff --git a/src/layouts/hexbin.js b/src/layouts/hexbin.js index 2c3e0450c2..ebed5ddb40 100644 --- a/src/layouts/hexbin.js +++ b/src/layouts/hexbin.js @@ -99,7 +99,7 @@ function hexbinLayout(radius, outputs, options) { values[o.name] = o.output.transform(); } } - if (!channels.find(([key]) => key === "r")) values.r = Array.from(values.x).fill(radius); + if (!channels.find(([key]) => key === "r")) values.r = Array.from(values.x).fill(radius * w0); return {index: newIndex, values, channels}; }); diff --git a/src/symbols.js b/src/symbols.js index 4063cccfc4..af82955fd1 100644 --- a/src/symbols.js +++ b/src/symbols.js @@ -1,11 +1,11 @@ import {symbolAsterisk, symbolDiamond2, symbolPlus, symbolSquare2, symbolTriangle2, symbolX as symbolTimes} from "d3"; import {symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye} from "d3"; -const t = Math.sqrt(3) / 2; +const t1 = 2 / Math.sqrt(3); const symbolHexagon = { draw(context, size) { - const s = Math.sqrt(size / Math.PI), hs = s / 2, ts = s * t; + const ts = Math.sqrt(size / Math.PI), s = ts * t1, hs = s / 2; context.moveTo(0, s); context.lineTo(ts, hs); context.lineTo(ts, -hs); diff --git a/test/output/hexbin.svg b/test/output/hexbin.svg index f89dd31f6e..a16419b45c 100644 --- a/test/output/hexbin.svg +++ b/test/output/hexbin.svg @@ -99,50 +99,50 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -321,56 +321,56 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -552,14 +552,14 @@ - - - - - - - - + + + + + + + + diff --git a/test/output/hexbinConstantDot.svg b/test/output/hexbinConstantDot.svg new file mode 100644 index 0000000000..79dfd3fd67 --- /dev/null +++ b/test/output/hexbinConstantDot.svg @@ -0,0 +1,219 @@ + + + + + 35 + + + 40 + + + 45 + + + 50 + + + 55 + ↑ culmen_length_mm + + + + FEMALE + + + MALE + + + + sex + + + + + + 15 + + + 20 + + + + + + + 15 + + + 20 + + + + + + + 15 + + + 20 + culmen_depth_mm → + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/output/hexbinR.html b/test/output/hexbinR.html index 3be722b246..d0ccced09b 100644 --- a/test/output/hexbinR.html +++ b/test/output/hexbinR.html @@ -126,196 +126,196 @@ - + 0.036 - + 0.024 - + 0.012 - + 0.018 - + 0.018 - + 0.012 - + 0.006 - + 0.042 - + 0.006 - + 0.018 - + 0.018 - + 0.042 - + 0.006 - + 0.024 - + 0.024 - + 0.018 - + 0.018 - + 0.006 - + 0.024 - + 0.018 - + 0.012 - + 0.006 - + 0.006 - + 0.012 - + 0.006 - + 0.006 - + 0.024 - + 0.012 - + 0.012 - + 0.012 - + 0.024 - + 0.006 - + 0.012 - + 0.012 - + 0.006 - + 0.012 - + 0.006 - + 0.006 - + 0.012 - + 0.012 - + 0.012 - + 0.006 - + 0.006 - + 0.006 - + 0.006 - + 0.006 - + 0.018 - + 0.018 - + 0.042 - + 0.012 - + 0.006 - + 0.018 - + 0.018 - + 0.048 - + 0.006 - + 0.018 - + 0.024 - + 0.048 - + 0.018 - + 0.024 - + 0.006 - + 0.006 - + 0.006 - + 0.006 @@ -323,220 +323,220 @@ - + 0.03 - + 0.012 - + 0.006 - + 0.006 - + 0.006 - + 0.006 - + 0.006 - + 0.012 - + 0.012 - + 0.006 - + 0.048 - + 0.054 - + 0.012 - + 0.012 - + 0.006 - + 0.006 - + 0.018 - + 0.012 - + 0.018 - + 0.006 - + 0.018 - + 0.006 - + 0.012 - + 0.006 - + 0.012 - + 0.006 - + 0.018 - + 0.012 - + 0.012 - + 0.012 - + 0.006 - + 0.006 - + 0.006 - + 0.012 - + 0.03 - + 0.012 - + 0.018 - + 0.012 - + 0.012 - + 0.006 - + 0.006 - + 0.03 - + 0.03 - + 0.006 - + 0.018 - + 0.006 - + 0.012 - + 0.006 - + 0.012 - + 0.042 - + 0.006 - + 0.03 - + 0.024 - + 0.03 - + 0.065 - + 0.006 - + 0.018 - + 0.006 - + 0.006 - + 0.012 - + 0.012 - + 0.006 - + 0.006 - + 0.006 - + 0.006 - + 0.012 - + 0.012 - + 0.012 - + 0.006 - + 0.018 - + 0.006 - + 0.006 @@ -544,28 +544,28 @@ - + 0.091 - + 0.091 - + 0.182 - + 0.091 - + 0.091 - + 0.091 - + 0.091 - + 0.091 diff --git a/test/plots/hexbin-constant-dot.js b/test/plots/hexbin-constant-dot.js new file mode 100644 index 0000000000..0bffb94f2d --- /dev/null +++ b/test/plots/hexbin-constant-dot.js @@ -0,0 +1,21 @@ +import * as Plot from "@observablehq/plot"; +import * as d3 from "d3"; + +export default async function() { + const penguins = await d3.csv("data/penguins.csv", d3.autoType); + return Plot.plot({ + width: 820, + height: 320, + facet: { + data: penguins, + x: "sex", + marginRight: 80 + }, + color: {scheme: "magma", reverse: true}, + inset: 14, + marks: [ + Plot.frame(), + Plot.dot(penguins, Plot.hexbin({fill: "count"}, {x: "culmen_depth_mm", y: "culmen_length_mm", symbol:"circle", stroke: "none"})) + ] + }); +} diff --git a/test/plots/hexbin-text-opacity.js b/test/plots/hexbin-text-opacity.js index 8ab4086588..011adfefc8 100644 --- a/test/plots/hexbin-text-opacity.js +++ b/test/plots/hexbin-text-opacity.js @@ -14,7 +14,7 @@ export default async function() { inset: 14, marks: [ Plot.frame(), - Plot.dot(penguins, Plot.hexbin({fillOpacity: "count"}, {x: "culmen_depth_mm", y: "culmen_length_mm", fill: "brown", stroke: "black", strokeWidth: 0.5})), + Plot.dot(penguins, Plot.hexbin({fillOpacity: "count"}, {x: "culmen_depth_mm", y: "culmen_length_mm", fill: "brown", stroke: "black", strokeWidth: 0.5, _symbol:"circle"})), Plot.text(penguins, Plot.hexbin({text: "count"}, {x: "culmen_depth_mm", y: "culmen_length_mm"})) ] }); diff --git a/test/plots/index.js b/test/plots/index.js index 05c7e85cb7..4d66eeea32 100644 --- a/test/plots/index.js +++ b/test/plots/index.js @@ -63,6 +63,7 @@ export {default as googleTrendsRidgeline} from "./google-trends-ridgeline.js"; export {default as gridChoropleth} from "./grid-choropleth.js"; export {default as hadcrutWarmingStripes} from "./hadcrut-warming-stripes.js"; export {default as hexbin} from "./hexbin.js"; +export {default as hexbinConstantDot} from "./hexbin-constant-dot.js"; export {default as hexbinDot} from "./hexbin-dot.js"; export {default as hexbinR} from "./hexbin-r.js"; export {default as hexbinTextOpacity} from "./hexbin-text-opacity.js";