Plot: Geo; unovis; Intopia Accessibility

On The Third Day Of Quick Drops 🎅🏽hrbrmstr🎅🏽 Gave To Me…

🎶 Data Vis Delights 🎶

While no 🐔 were harmed in the making of this drop, there are three resources, and @neocarto@vis.social is mentioned again (so, 🇫🇷 is implictly included); thus, there is at least some conformity to the lyrical source we’re riffing from.

Plot: Geo

Just not-in-time-at-all for the 2022 30-Day Map Challenge comes a truly game-changing addition to Observable’s Plot library: Geo marks!

There are nigh countless way to make maps in D3/JavaScript. That’s both a curse and a blessing. Until now, none of the ways felt as clean and simple as R’s {sf} + {ggplot2} packages. This all changed with Plot’s new Geo mark.

Want to make a choropleth (like the section header image) from a table of values? Easy. Peasy.

Plot.plot({
  color: {
    type: "sqrt",
    scheme: "Reds", // the section header image is inverted
    legend: true
  },
  width: width / 1.5,
  projection: "albers-usa",
  marks: [
    Plot.geo(ustopo, {
      stroke: "#3c3c3c",
      fill: (d) => lookup[d.properties.name],
      title: (d) => lookup[d.properties.name]
    })
  ]
})

That’s my very naive example.

Hit up the aforelinked main intro resource, and then linger on Nicolas’s rich creations.

unovis

Unovis [GH] is a “modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript” that comes from the new-ish owners of Nginx, F5 (a company I’ve worked with in some way, shape, or form of my cyber jobs for, like ever!).

Chart types supported include all the standard faire, plus maps, network graphs, and much, much more. They make extensive use of CSS to enable granular customization, and the library itself is modular enough to ensure short load times.

Their documentation is top-notch, as are the examples on the site and in the repo, but here’s all it takes to make a basic line chart:

<script lang="ts">
  import { VisXYContainer, VisLine, VisAxis } from '@unovis/svelte'

  type DataRecord = { x: number, y: number }
  export let data: DataRecord[] = [
    { x: 0, y: 0 },
    { x: 1, y: 2 },
    { x: 2, y: 1 },
  ]
</script>

<VisXYContainer>
  <VisLine {data} x={d => d.x} y={d => d.y}/>
  <VisAxis type="x"/>
  <VisAxis type="y"/>
</VisXYContainer>

The scatterplot in the section header is made with Unovis.

I’m going to try to get it working over at Observable. If I do, I’ll drop an addendum in a future newsletter.

Intopia Accessibility

On preview, Larene Le Gassick’s “Top 5 Accessibility Issues in 2022” post on Intopia‘s blog may not seem all datavis-centric, nor fit the tagline theme of “Data Vis Delights”, but hear me out, and I think I can sway you as to why I included it.

We’re performing a platform accessibility review at work (we have incredibly talented and knowledgeable designers!) that spans the product itself (including the datavis elements) and the brand website. Ensuring everyone can use a resource and navigate through content of any kind should be paramount. What we all build and publish out in the open internets is globally accessible, and not all humans have 20/20 vision, pitch-perfect hearing, or full use of input/interaction devices. Inaccessible data visualizations limits our audience and reduces our impact on the world. I’m as guilty of making inaccessible creations as the next datavis person.

The WCAG 2 Overview | Web Accessibility Initiative (WAI) | W3C has some detailed, useful guides to help ensure all aspects of web content are accessible to all. Larene used said guides to identify these members of the top 5 naughty list:

1. Not accessible with a keyboard

2. 400% zoom not supported

3. No visual focus indicator

4. Info and relationships

5. Missing or incorrect ARIA attributes

You can dig into Larene’s post (~10m read) for the details, then head over to UW–⁠Madison’s helpful primer on datavis accessibility as a starter resource.

UPDATE: Just got notified of this new resource which dropped after I hit “send”.

FIN

Here’s hoping 2023 is a far more accessible year. ☮