Skip to content

text font-size as an unscaled numerical channel #300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 10, 2021
Merged

Conversation

Fil
Copy link
Contributor

@Fil Fil commented Apr 5, 2021

Interestingly, the result is quite smaller than a circle defined with the same accessor. So it seems that we need to introduce fontSizeAdjust (which isn't much supported as a css property https://caniuse.com/font-size-adjust), and rescale the resulting channel values in the font-size attribute. See for example https://observablehq.com/d/f5698ebfc65d2b5c#FSA

closes #296

Plot.plot({
  style: { background: "#fffbeb" },
  r: {
   range: [9, 25]
  },
  x: {
    label: "Birth Rate (per 1000 people) →"
  },
  y: {
    type: "sqrt",
    label: "↑ Death Rate (per 1000 people)"
  },
  color: {
    domain,
    range: color.range()
  },
  marks: [
    Plot.dot(data, {
      x: "birthRate", y: "deathRate", r: "population", stroke: "population", strokeWidth: 0.5,
      fill: asText ? null : "population",
    }),
    asText ? Plot.text(data, {
      x: "birthRate", y: "deathRate", fill: "population",
      text: "code", fontFamily: "Yanone Kaffeesatz", fontWeight: 700,
      fontSize: "population",
      fontSizeAdjust: .5
    })
      : [],
    Plot.ruleX([7]),
    Plot.ruleY([2.01])
  ],
  width: 954,
  height: 600
})

Capture d’écran 2021-04-05 à 17 12 25

Interestingly, the result is quite smaller than a circle defined with the same accessor. So it seems that we need to introduce fontSizeAdjust (which isn't much supported https://caniuse.com/font-size-adjust), and rescale the resulting channel values in the font-size attribute. See for example https://observablehq.com/d/f5698ebfc65d2b5c#FSA

closes #296
@Fil Fil requested review from enjalot and mbostock April 5, 2021 15:11
@mbostock
Copy link
Member

mbostock commented Apr 5, 2021

Do you prefer this to a fontSize scale where you can set the range separately? Or perhaps no scale at all, and simply using the literal value similar to how we handle the rotate option? That feels like it might make the most sense for me, since font size is inherently fiddly and I don’t think we’d try to make a legend for it. But maybe it’s inconsistent?

Related, I’ve been thinking we need a strokeWidth scale or similar so that a line or link’s stroke width can be used as an encoding. That I think we would want a scale for, and we would also probably want a legend.

@Fil
Copy link
Contributor Author

Fil commented Apr 5, 2021

In the example of the image it makes sense to bind it to the r scale, but I agree it might be a rare case in which you would compute the scale outside the plot.

strokeWidth on links is definitely something that needs a scale. Not so sure about the legend, but if we follow #236 / #299 we can add as many legends as we want as plugins.

@mbostock
Copy link
Member

mbostock commented Apr 8, 2021

Binding to the r scale feels surprising to me. I think we should probably not use a scaled channel here and have people compute font sizes manually. Then we won’t need the fontSizeAdjust property also.

@Fil
Copy link
Contributor Author

Fil commented Apr 8, 2021

Agreed, I'll update this accordingly.

@Fil
Copy link
Contributor Author

Fil commented Apr 8, 2021

Discussion loosely connected to #56 (comment)

@Fil
Copy link
Contributor Author

Fil commented Apr 9, 2021

ready

@Fil Fil changed the title text font-size as a channel, bound to the scale *r* text font-size as an unscaled numerical channel Apr 9, 2021
@mbostock mbostock merged commit 75b009c into main Apr 10, 2021
@mbostock mbostock deleted the fil/fontSize-296 branch April 10, 2021 15:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

fontSize should be a channel
2 participants