Faceți Iroshizuku interactiv cu Observable

Un set de date minuscul, o altă groapă de iepure 🐇🕳️

În postarea anterioară, am transformat 24 de cerneluri de stilou Pilot Iroshizuku într-un mic magazin folosind ggplot2.

Dar în timp ce sortam cernelurile după culoare, am început să mă întreb cum ar arăta dacă aș putea să le rearanjez interactiv.

De asemenea, am vrut să încerc ceva complet nou pentru mine: JS observabil într-un document Quarto.

Deci, această postare este parțial un experiment cu cerneală și parțial eu îmi dau seama cum se potrivesc R, Observable și Quarto.

Planul este destul de mic:

Luați aceleași 24 de cerneluri, transmiteți datele de la R la Observable și începeți să mutați lucrurile.

Și cât sunt aici, vreau să mă joc cu două reprezentări perceptuale de culoare:

• HCLpe care l-am folosit în postarea anterioară
• OKLCHpe care îl văd în continuare în discuțiile de culoare web/CSS moderne

Să vedem unde se duce asta.

Datele

Aceleași 24 de cerneluri ca înainte.

iroshizuku_colors <- tibble(
  ink_name = c(
    "Ajisai", "Asagao", "Konpeki", "Amairo", "Kujaku", "Rikka",
    "Tsukiyo", "Shinkai", "Syoro", "Shinryoku", "Suigyoku", "Takesumi",
    "Fuyusyogun", "Chikurin", "Hotarubi", "Hanaikada", "Murasakishikibu",
    "Yamabudo", "Momiji", "Fuyugaki", "Yuyake", "Toro", "Yamaguri", "Syungyo"
  ),
  ink_name_japanese = c(
    "紫陽花", "朝顔", "紺碧", "天色", "孔雀", "立夏",
    "月夜", "深海", "松露", "深緑", "翠玉", "竹炭",
    "冬将軍", "竹林", "蛍火", "花筏", "紫式部",
    "山葡萄", "紅葉", "冬柿", "夕焼け", "灯籠", "山栗", "春暁"
  ),
  hex = c(
    "#1255A2", "#04318E", "#0368B4", "#00A0DF", "#028986", "#1A7DA5",
    "#016D8C", "#1C3A65", "#077D5E", "#007E4F", "#037261", "#1E1D1E",
    "#6A869A", "#94BD4E", "#D9DA26", "#ED7E93", "#765FA8", "#660D5B",
    "#E12E2C", "#EA5A10", "#EF881F", "#F0B018", "#5B4532", "#674F4D"
  ),
  description = c(
    "Hydrangea",
    "Morning Glory",
    "Deep Cerulean Blue",
    "Sky Blue",
    "Peacock",
    "Early Summer",
    "Moonlit Night",
    "Deep Sea",
    "Dew on Pine Tree",
    "Forest Green",
    "Emerald",
    "Bamboo Charcoal",
    "Winter Commander",
    "Bamboo Forest",
    "Firefly Glow",
    "Floating Cherry Blossoms",
    "Murasaki Shikibu",
    "Wild Grape Vine",
    "Autumn Maple Leaves",
    "Winter Persimmon",
    "Sunset Glow",
    "Lantern Light",
    "Wild Chestnut",
    "Spring Dawn"
  )
)

Două moduri de a descrie culoarea

În ultimul post am folosit HCL pentru a sorta cernelurile.

Apoi mi-am amintit că fusesem și eu curios OKLCH — mai ales pentru că îl văd în continuare în CSS. Deci… de ce să nu adaugi și asta? 😆

Ambele îmi oferă o versiune a:

Totuși, nu sunt același spațiu de culoare, așa că nu mă aștept ca numerele – sau chiar ordinea – să se potrivească perfect.

Ceea ce de fapt face asta mai interesant. Ce se întâmplă când dau exact aceleași 24 de culori două sisteme de coordonate perceptive diferite?

Aceleași cerneluri, ordine diferită

Cele 24 de cerneluri în sine nu s-au schimbat. Valorile hexadecimale sunt exact aceleași.

Dar când le sortez nuanță, croma sau luminozitateHCL și OKLCH nu sunt întotdeauna de acord cu privire la comandă.

Unele cerneluri rămân aproape de aceiași vecini.

Alții schimbă brusc locurile.

Acest lucru are sens: HCL și OKLCH sunt spații de culoare perceptive diferite, așa că nu este de așteptat ca coordonatele lor să se alinieze perfect. Dar văzând diferența ca un rând real de mostre de cerneală o face mult mai tangibilă decât compararea coloanelor de numere.

Cu alte cuvinte:

aceleași culori, o hartă diferită a spațiului de culoare. 🎨

Și tocmai asta m-a făcut să vreau să transform sortarea în ceva interactiv.

# HCL / polar LUV
hcl_coords <- coords(
  as(hex2RGB(iroshizuku_colors$hex), "polarLUV")
) |>
  as_tibble() |>
  rename(
    hcl_h = H,
    hcl_c = C,
    hcl_l = L
  )

# OKLCH
oklch_coords <- farver::decode_colour(
  iroshizuku_colors$hex,
  to = "oklch"
) |>
  as_tibble() |>
  rename(
    oklch_l = l,
    oklch_c = c,
    oklch_h = h
  )

ink_data <- iroshizuku_colors |>
  bind_cols(hcl_coords, oklch_coords) |>
  mutate(
    original_order = row_number()
  ) |>
  select(
    original_order,
    ink_name,
    ink_name_japanese,
    description,
    hex,
    hcl_h,
    hcl_c,
    hcl_l,
    oklch_h,
    oklch_c,
    oklch_l
  )

ink_data

# A tibble: 24 × 11
   original_order ink_name ink_name_japanese description hex   hcl_h hcl_c hcl_l
                                        
 1              1 Ajisai   紫陽花            Hydrangea   #125…  254.  70.0  36.4
 2              2 Asagao   朝顔              Morning Gl… #043…  261.  67.8  24.2
 3              3 Konpeki  紺碧              Deep Cerul… #036…  250.  74.5  43.1
 4              4 Amairo   天色              Sky Blue    #00A…  237.  76.5  62.1
 5              5 Kujaku   孔雀              Peacock     #028…  189.  40.4  51.4
 6              6 Rikka    立夏              Early Summ… #1A7…  233.  52.4  49.0
 7              7 Tsukiyo  月夜              Moonlit Ni… #016…  228.  44.5  42.5
 8              8 Shinkai  深海              Deep Sea    #1C3…  253.  36.9  24.4
 9              9 Syoro    松露              Dew on Pin… #077…  156.  41.9  46.3
10             10 Shinryo… 深緑              Forest Gre… #007…  145.  48.9  46.3
# ℹ 14 more rows
# ℹ 3 more variables: oklch_h , oklch_c , oklch_l 

ggplot(plot_data, aes(x = x, y = y)) +
  geom_tile(
    aes(fill = I(hex)),
    width = 0.98,
    height = 0.96
  ) +
  geom_text(
    aes(
      label = label_vertical,
      colour = I(text_colour)
    ),
    family = "osaka",
    lineheight = 0.85,
    size = 3.5
  ) +
  facet_wrap(
    ~ prop_label,
    scales = "free",
    ncol = 1
  ) +
  theme_void(base_family = "osaka") +
  theme(
    plot.background = element_rect(
      fill = "#F5F1E8",
      colour = NA
    ),
    panel.background = element_rect(
      fill = "#F5F1E8",
      colour = NA
    ),
    strip.background = element_blank(),
    strip.text = element_text(
      size = 10,
      face = "bold",
      margin = margin(b = 8)
    ),
    panel.spacing = unit(1.1, "lines"),
    plot.title = element_text(
      size = 12,
      face = "bold",
      margin = margin(b = 12)
    ),
    plot.margin = margin(20, 20, 20, 20)
  ) +
  labs(
    title = "24 inks, 3 ways of seeing them"
  )

În cea mai mare parte, vreau doar să scot acest tabel mic din R și în JavaScript, astfel încât să pot începe să mișc lucrurile în browser!

R, cunoaște-te pe Observable 👋

Această parte a fost ușor magică prima dată când a funcționat.

Al lui Quarto ojs_define() îmi permite să creez ceva în R și să-l predau lui Observable care rulează în browser.

Deci R spune: Iată cele 24 de cerneluri ale mele.

Observable spune: Mulţumesc. Acum lasă-mă să mă joc cu ei.

flowchart LR
    R(R 🐣
prepare data) --> Q(Quarto 📦
hand it over)
    Q --> O(Observable ✨
play in the browser)

Acel transfer este practic întregul experiment.

R încă face disputele de date cu care mă simt confortabil. Quarto acționează ca punte. Observable preia odată ce vreau ca pagina însăși să reacționeze.

Referință: https://quarto.org/docs/computations/ojs.html

Cadrul de date R are nevoie de un mic pas de remodelare pe partea observabilă.

ink_rows = transpose(inks)

După aceea, Observable poate lucra cu el ca datele JavaScript obișnuite.

Inputs.table(ink_rows, {
  columns: (
    "ink_name_japanese",
    "ink_name",
    "description",
    "hex",
    "hcl_h",
    "oklch_h"
  ),
  header: {
    ink_name_japanese: "日本語",
    ink_name: "Ink",
    description: "Meaning",
    hex: "Hex",
    hcl_h: "HCL Hue",
    oklch_h: "OKLCH Hue"
  }
})

Acest mic transfer a fost unul dintre lucrurile pe care mi-am dorit cu adevărat să le înțeleg din acest experiment.

R pregătește datele. Observable începe să se joace cu el în browser.

Primul experiment observabil: rearanjați cernelurile

Încep cu ceva foarte simplu.

Două comenzi:

Ce spațiu de culoare?

viewof colour_space = Inputs.radio(
  ("HCL", "OKLCH"),
  {
    label: "Colour space",
    value: "OKLCH"
  }
)

Şi:

După ce ar trebui să sortez?

viewof arrange_by = Inputs.radio(
  ("Hue", "Chroma", "Lightness"),
  {
    label: "Arrange inks by",
    value: "Hue"
  }
)

Deoarece Observable este reactiv, schimbarea oricărei intrări schimbă automat orice depinde de el.

Mai întâi voi mapa opțiunile selectate în coloana de date corespunzătoare.

sort_field = {
  if (colour_space === "HCL") {
    if (arrange_by === "Hue") return "hcl_h";
    if (arrange_by === "Chroma") return "hcl_c";
    return "hcl_l";
  }

  if (arrange_by === "Hue") return "oklch_h";
  if (arrange_by === "Chroma") return "oklch_c";
  return "oklch_l";
}

Și apoi sortați.

Pentru nuanță vreau scăzut → înalt în jurul roții de culoare. Pentru croma și luminozitate, mi se pare că înaltă → scăzută este puțin mai ușor de citit.

sorted_inks = {
  const rows = (...ink_rows);

  if (arrange_by === "Hue") {
    return rows.sort((a, b) => a(sort_field) - b(sort_field));
  }

  return rows.sort((a, b) => b(sort_field) - a(sort_field));
}

Paleta interactivă

Pentru prima mea vizualizare observabilă, păstrez în mod deliberat geometria plictisitoare.

Fiecare cerneală este doar o placă colorată.

Partea interesantă este că poziția sa este reactivă.

ink_grid = sorted_inks.map((d, i) => ({
  ...d,
  column: i % 6,
  row: 3 - Math.floor(i / 6)
}))

Plot.plot({
  width: 850,
  height: 420,
  marginTop: 20,
  marginRight: 20,
  marginBottom: 20,
  marginLeft: 20,

  x: {
    axis: null,
    domain: d3.range(6)
  },

  y: {
    axis: null,
    domain: d3.range(4)
  },

  marks: (
    Plot.cell(ink_grid, {
      x: "column",
      y: "row",
      fill: "hex",
      inset: 3,
      tip: true,
      title: d => {
        const prefix =
          colour_space === "HCL"
            ? "hcl"
            : "oklch";

        return `${d.ink_name_japanese} · ${d.ink_name}
${d.description}
${d.hex}

${colour_space}
Hue ${d(`${prefix}_h`).toFixed(1)}°
Chroma ${d(`${prefix}_c`).toFixed(2)}
Lightness ${d(`${prefix}_l`).toFixed(2)}`;
      }
    }),

    Plot.text(ink_grid, {
      x: "column",
      y: "row",
      text: "ink_name_japanese",
      fill: "white",
      fontSize: 18,
      dy: -5
    }),

    Plot.text(ink_grid, {
      x: "column",
      y: "row",
      text: "ink_name",
      fill: "white",
      fontSize: 11,
      dy: 14
    })
  )
})

Încercați să schimbați ambele comenzi.

Aceleași 24 de cerneluri.

Aceleași culori hexagonale.

Reprezentare diferită, ordonare diferită.

Puneți cernelurile în spațiul de culoare

Sortarea este o modalitate de a folosi coordonatele.

Dar pot, de asemenea, să nu mai tratez poziția raftului ca fiind semnificativă și să las coordonatele de culoare să determine unde merge fiecare cerneală.

Mai întâi voi crea valori generice de nuanță și croma pe baza spațiului de culoare selectat.

colour_space_inks = ink_rows.map(d => ({
  ...d,

  display_h:
    colour_space === "HCL"
      ? d.hcl_h
      : d.oklch_h,

  display_c:
    colour_space === "HCL"
      ? d.hcl_c
      : d.oklch_c,

  display_l:
    colour_space === "HCL"
      ? d.hcl_l
      : d.oklch_l
}))

max_chroma = d3.max(colour_space_inks, d => d.display_c)

polar_inks = colour_space_inks.map(d => {
  const theta = (d.display_h - 90) * Math.PI / 180;

  // scale chroma to a plotting radius
  const r = (d.display_c / max_chroma) * 85;

  return {
    ...d,
    theta,
    radius_value: r,
    polar_x: r * Math.cos(theta),
    polar_y: r * Math.sin(theta)
  };
})

lightnessExtent = d3.extent(polar_inks, d => d.display_l)

lightnessScale = d3.scaleLinear()
  .domain(lightnessExtent)
  .range((20, 58))

Acum, același complot poate comuta între HCL și OKLCH.

Plot.plot({
  width: 850,
  height: 500,

  x: {
    label: `${colour_space} Hue →`,
    domain: (0, 360)
  },

  y: {
    label: `↑ ${colour_space} Chroma`,
    grid: true
  },

  marks: (
    Plot.dot(colour_space_inks, {
      x: "display_h",
      y: "display_c",
      fill: "hex",
      r: 20,
      stroke: "white",
      strokeWidth: 1.5,
      tip: true,

      title: d =>
        `${d.ink_name_japanese} · ${d.ink_name}
${d.description}

H ${d.display_h.toFixed(1)}°
C ${d.display_c.toFixed(2)}
L ${d.display_l.toFixed(2)}`
    })
  )
})

Plot.plot({
  width: 700,
  height: 700,
  margin: 40,
  aspectRatio: 1,

  x: {
    axis: null
  },

  y: {
    axis: null
  },
  
  r: {
    range: (12,30)
  },

  marks: (
    Plot.frame(),

    // faint reference rings
    Plot.circle(
      (20, 40, 60, 80),
      {
        x: 0,
        y: 0,
        r: d => d,
        stroke: "#d9d9d9",
        fill: null
      }
    ),

    // crosshair guides
    Plot.ruleX((0), {stroke: "#dddddd"}),
    Plot.ruleY((0), {stroke: "#dddddd"}),

    // labels for cardinal hue directions
    Plot.text(
      (
        {x: 0, y: 95, label: "0°"},
        {x: 95, y: 0, label: "90°"},
        {x: 0, y: -95, label: "180°"},
        {x: -95, y: 0, label: "270°"}
      ),
      {
        x: "x",
        y: "y",
        text: "label",
        fontSize: 11,
        fill: "#777"
      }
    ),

    Plot.dot(polar_inks, {
      x: "polar_x",
      y: "polar_y",
      fill: "hex",
      stroke: "white",
      strokeWidth: 1.5,

      // use lightness for dot size
      r: d => lightnessScale(d.display_l),
      //r: 25,

      tip: true,
      title: d =>
        `${d.ink_name_japanese} · ${d.ink_name}
${d.description}

${colour_space}
Hue ${d.display_h.toFixed(1)}°
Chroma ${d.display_c.toFixed(2)}
Lightness ${d.display_l.toFixed(2)}`
    })
  )
})

Acum, cel controlul spațiului de culoare modifică sistemul de coordonate în sinenu doar ordinea plăcilor.

Asta e mult mai distractiv.

Un avertisment important: nu ar trebui să interpretez scalele numerice ale cromului HCL și ale cromului OKLCH ca și cum ar fi direct comparabile. Ceea ce mă interesează aici este rezultatul structura relativă din cele 24 de culori.

Ce am învățat tocmai ajungând atât de departe

Este prima dată când pun Observable JS direct într-un document Quarto, iar cea mai mare ajustare de până acum este că nu-mi vine să scriu o altă secvență de celule de notebook.

Se întâmplă câteva lucruri diferite:

R pregătește setul de date.

Quarto îl trece în pagină.

Observabil se ocupă de valori reactive și dependențe.

Intreg observabil desenează vizualizarea din partea browserului.

Odată ce a făcut clic, acest lucru a început să se pară mult mai puțin misterios.

Și îmi place foarte mult ideea că pot continua să pregătesc datele în R în timp ce folosesc JavaScript numai pentru părțile în care interacțiunea cu browser-ul este de fapt utilă.