tip.ts

import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import {feature, mesh} from "topojson-client";
import {test} from "test/plot";

test(async function tipAreaBand() {
  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
  return Plot.areaY(aapl, {x: "Date", y1: "Low", y2: "High", tip: true, curve: "step", stroke: "currentColor"}).plot();
});

test(async function tipAreaStack() {
  const industries = await d3.csv<any>("data/bls-industry-unemployment.csv", d3.autoType);
  return Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry", tip: true}).plot({marginLeft: 50});
});

test(async function tipBar() {
  const olympians = await d3.csv<any>("data/athletes.csv", d3.autoType);
  return Plot.plot({
    marginLeft: 100,
    marks: [Plot.barX(olympians, Plot.groupY({x: "count"}, {y: "sport", sort: {y: "x"}, tip: true}))]
  });
});

test(async function tipBin() {
  const olympians = await d3.csv<any>("data/athletes.csv", d3.autoType);
  return Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight", tip: true})).plot();
});

test(async function tipBinStack() {
  const olympians = await d3.csv<any>("data/athletes.csv", d3.autoType);
  return Plot.rectY(olympians, Plot.binX({y: "count", sort: "z"}, {x: "weight", fill: "sex", tip: true})).plot();
});

test(async function tipCell() {
  const olympians = await d3.csv<any>("data/athletes.csv", d3.autoType);
  return Plot.plot({
    height: 400,
    marginLeft: 100,
    color: {scheme: "blues"},
    marks: [Plot.cell(olympians, Plot.group({fill: "count"}, {x: "sex", y: "sport", tip: "y"}))]
  });
});

test(async function tipCellFacet() {
  const olympians = await d3.csv<any>("data/athletes.csv", d3.autoType);
  return Plot.plot({
    height: 400,
    marginLeft: 100,
    color: {scheme: "blues"},
    marks: [Plot.cell(olympians, Plot.groupY({fill: "count"}, {fx: "sex", y: "sport", tip: "y"}))]
  });
});

test(async function tipDodge() {
  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
  return Plot.dot(penguins, Plot.dodgeY({x: "culmen_length_mm", r: "body_mass_g", tip: true})).plot({height: 160});
});

test(async function tipDot() {
  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
  return Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "sex", tip: true}).plot();
});

test(async function tipDotX() {
  return Plot.dotX(d3.range(10), {tip: true}).plot();
});

test(async function tipDotFacets() {
  const athletes = await d3.csv<any>("data/athletes.csv", d3.autoType);
  return Plot.plot({
    grid: true,
    fy: {
      label: "decade of birth",
      interval: "10 years"
    },
    marks: [
      Plot.dot(athletes, {
        x: "weight",
        y: "height",
        fx: "sex",
        fy: "date_of_birth",
        stroke: "#aaa",
        filter: (d) => !d.info
      }),
      Plot.dot(athletes, {
        x: "weight",
        y: "height",
        fx: "sex",
        fy: "date_of_birth",
        filter: (d) => d.info,
        title: (d) => [d.name, d.info].join("\n"),
        tip: true
      })
    ]
  });
});

test(async function tipDotFilter() {
  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
  const xy = {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "sex"};
  return Plot.plot({
    marks: [
      Plot.dot(penguins, {...xy, filter: (d) => d.sex === "MALE", tip: true}),
      Plot.dot(penguins, {...xy, filter: (d) => d.sex === "FEMALE", tip: true})
    ]
  });
});

test(async function tipGeoNoProjection() {
  const counties = await d3.json<any>("data/us-counties-10m.json").then((us) => feature(us, us.objects.counties));
  counties.features = counties.features.filter((d) => {
    const [x, y] = d3.geoCentroid(d);
    return x > -126 && x < -68 && y > 25 && y < 49;
  });
  return Plot.geo(counties, Plot.centroid({title: (d) => d.properties.name, tip: true})).plot();
});

test(async function tipGeoProjection() {
  const counties = await d3.json<any>("data/us-counties-10m.json").then((us) => feature(us, us.objects.counties));
  counties.features = counties.features.filter((d) => {
    const [x, y] = d3.geoCentroid(d);
    return x > -126 && x < -68 && y > 25 && y < 49;
  });
  return Plot.geo(counties, Plot.centroid({title: (d) => d.properties.name, tip: true})).plot({projection: "albers"});
});

test(async function tipGeoCentroid() {
  const [[counties, countymesh]] = await Promise.all([
    d3
      .json<any>("data/us-counties-10m.json")
      .then((us) => [feature(us, us.objects.counties), mesh(us, us.objects.counties)])
  ]);
  // Alternatively, using centroid (slower):
  // const pointer = Plot.pointer(Plot.centroid());
  const {x, y} = Plot.geoCentroid();
  const pointer = Plot.pointer({px: x, py: y, x, y});
  return Plot.plot({
    width: 960,
    height: 600,
    projection: "albers-usa",
    marks: [
      Plot.geo(countymesh),
      Plot.geo(counties, {...pointer, stroke: "red", strokeWidth: 2}),
      Plot.tip(counties.features, {...pointer, channels: {name: (d) => d.properties.name}})
    ]
  });
});

test(async function tipGroupPrimitives() {
  return Plot.plot({
    height: 80,
    x: {type: "band"},
    marks: [Plot.barY("de156a2fc8", Plot.groupX({y: "count"}, {x: (d) => d, tip: true}))]
  });
});

test(async function tipHexbin() {
  const olympians = await d3.csv<any>("data/athletes.csv", d3.autoType);
  return Plot.hexagon(olympians, Plot.hexbin({r: "count"}, {x: "weight", y: "height", tip: true})).plot();
});

// Normally you would slap a tip: true on the hexagon, as above, but here we
// want to test that the hexbin transform isn’t applying an erroneous stroke:
// none to the tip options (which would change the tip appearance).
test(async function tipHexbinExplicit() {
  const olympians = await d3.csv<any>("data/athletes.csv", d3.autoType);
  return Plot.plot({
    marks: [
      Plot.hexagon(olympians, Plot.hexbin({fill: "count"}, {x: "weight", y: "height"})),
      Plot.tip(olympians, Plot.pointer(Plot.hexbin({fill: "count"}, {x: "weight", y: "height"})))
    ]
  });
});

test(async function tipLineX() {
  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
  return Plot.lineX(aapl, {y: "Date", x: "Close", tip: true}).plot();
});

test(async function tipLineY() {
  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
  return Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}).plot();
});

test(async function tipTextOverflowNull() {
  return Plot.tip([{x: "Long sentence that does not get clipped no matter how long it gets; it can be really long"}], {
    x: "x",
    textOverflow: null,
    anchor: "top" // otherwise it would be bottom
  }).plot();
});

test(async function tipTextOverflowClipEnd() {
  return Plot.tip([{x: "Long sentence that gets clipped at the end"}], {
    x: "x",
    textOverflow: "clip" // shorthand for "clip-end"
  }).plot();
});

test(async function tipTextOverflowDefault() {
  return Plot.tip([{x: "Long sentence that gets an ellipsis at the end"}], {
    x: "x"
  }).plot();
});

test(async function tipTextOverflowEllipsisEnd() {
  return Plot.tip([{x: "Long sentence that gets an ellipsis at the end"}], {
    x: "x",
    textOverflow: "ellipsis" // shorthand for "ellipsis-end"
  }).plot();
});

test(async function tipTextOverflowEllipsisMiddle() {
  return Plot.tip([{x: "Long sentence that gets an ellipsis in the middle"}], {
    x: "x",
    textOverflow: "ellipsis-middle"
  }).plot();
});

test(async function tipTextOverflowEllipsisStart() {
  return Plot.tip([{x: "Long sentence that gets an ellipsis at the start"}], {
    x: "x",
    textOverflow: "ellipsis-start"
  }).plot();
});

test(async function tipNewLines() {
  return Plot.plot({
    height: 40,
    style: "overflow: visible;",
    x: {axis: "top", label: null},
    marks: [
      Plot.tip(
        [
          {x: "after", label: `Hello\n\n`},
          {x: "before", label: `\n\nWorld`},
          {x: "between", label: `{\n\n}`}
        ],
        {
          x: "x",
          anchor: "top",
          title: "label"
        }
      ),
      Plot.tip([{x: "no name"}], {
        x: "x",
        channels: {a: ["first"], b: ["second"], "": [""]}
      })
    ]
  });
});

test(async function tipRaster() {
  const ca55 = await d3.csv<any>("data/ca55-south.csv", d3.autoType);
  const domain = {type: "MultiPoint", coordinates: ca55.map((d) => [d.GRID_EAST, d.GRID_NORTH])} as const;
  return Plot.plot({
    width: 640,
    height: 484,
    projection: {type: "reflect-y", inset: 3, domain},
    color: {type: "diverging"},
    marks: [Plot.raster(ca55, {x: "GRID_EAST", y: "GRID_NORTH", fill: "MAG_IGRF90", interpolate: "nearest", tip: true})]
  });
});

test(async function tipRule() {
  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
  return Plot.ruleX(penguins, {x: "body_mass_g", tip: true}).plot();
});

test(async function tipRuleAnchored() {
  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
  return Plot.plot({
    x: {insetLeft: 110},
    marks: [
      Plot.ruleX(penguins, {x: "body_mass_g"}),
      Plot.tip(penguins, Plot.pointer({px: "body_mass_g", frameAnchor: "left", anchor: "middle", dx: 42}))
    ]
  });
});

test(async function tipTransform() {
  return Plot.plot({
    width: 245,
    color: {percent: true, legend: true},
    marks: [Plot.dotX([0, 0.1, 0.3, 1], {fill: Plot.identity, r: 10, frameAnchor: "middle", tip: true})]
  });
});

test(async function tipFacetX() {
  const data = d3.range(100).map((i) => ({f: i > 60 || i % 2 ? "b" : "a", x: i, y: i / 10}));
  return Plot.plot({
    inset: 10,
    y: {domain: [0, 7]},
    marks: [
      Plot.frame(),
      Plot.dot(data, {fy: "f", x: "x", y: "y", tip: "x", fill: "f"}),
      Plot.dot(
        [
          {f: "a", y: 3},
          {f: "b", y: 1}
        ],
        {fy: "f", x: 90, y: "y", r: 30, fill: "f", fillOpacity: 0.1, stroke: "currentColor", strokeDasharray: 4}
      )
    ]
  });
});

test(async function tipColorLiteral() {
  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
  return Plot.plot({
    grid: true,
    marks: [
      Plot.dot(penguins, {
        x: "culmen_length_mm",
        y: "culmen_depth_mm",
        fill: (d) => (d.species === "Adelie" ? "orange" : "steelblue"),
        tip: true
      })
    ]
  });
});

test(async function tipDispatch() {
  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
  const plot = Plot.plot({
    marks: [
      Plot.dot(penguins, {
        x: "culmen_length_mm",
        y: "culmen_depth_mm",
        title: "island",
        tip: true
      })
    ]
  });
  plot.dispatchEvent(
    new PointerEvent("pointermove", {
      pointerType: "mouse",
      clientX: 200,
      clientY: 200
    })
  );
  return Object.assign(plot, {ready: new Promise((resolve) => setTimeout(resolve, 100))}); // postrender
});

test(async function tipNull() {
  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
  const plot = Plot.plot({
    marks: [
      Plot.dot(penguins, {
        x: "culmen_length_mm",
        y: "culmen_depth_mm",
        title: (d) => (d.island === "Torgersen" ? null : d.island),
        tip: true
      })
    ]
  });
  plot.dispatchEvent(
    new PointerEvent("pointermove", {
      pointerType: "mouse",
      clientX: 200,
      clientY: 200
    })
  );
  return plot;
});