← All examples

Precious

Little Delving #0014: single-series bars, each coloured by position (fill="index" -> the oklch rainbow), in the reusable blue slide frame.

Charts 1440 × 1080 <bars><column><data><define><delving-blue><plot><record><slot><style><text>

Result

Source examples/precious.svgn

<diagram width="1440" height="1080" padding="70">
  <!-- Little Delving #0014: single-series bars, each coloured by position
       (fill="index" -> the oklch rainbow), in the reusable blue slide frame. -->
  <style>
    svg { --sv-bg: #f6f6f6; --sv-font: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
          --sv-text: #000; --sv-edge: #000; --sv-muted: #000; }
    .sv-grid { stroke: none; }
  </style>

  <define name="delving-blue">
    <column justify="space-between" align="center">
      <column align="center" gap="6">
        <text font-family="Merriweather, Georgia, serif" color="#336699" font-size="64" label="${title}"/>
        <text font-family="Merriweather, Georgia, serif" color="#336699" font-size="40" font-style="italic"
              label="${subtitle}"/>
      </column>
      <slot/>
      <column align-self="end" align="end" gap="4">
        <text color="#777788" font-size="30" font-family="Menlo, monospace" label="Little Delving #${num}"/>
        <text color="#777788" font-size="30" font-family="Menlo, monospace" label="digitaltolkien.com"/>
      </column>
    </column>
  </define>

  <delving-blue title="Mentions of ‘precious’" subtitle="by book of Lord of the Rings" num="0014">
    <plot data="p" width="1125" height="500" y-max="90">
      <bars x="book" y="count" fill="index"/>
    </plot>
  </delving-blue>

  <data name="p">
    <record book="Book 1" count="12"/>
    <record book="Book 2" count="3"/>
    <record book="Book 3" count="11"/>
    <record book="Book 4" count="87"/>
    <record book="Book 5" count="1"/>
    <record book="Book 6" count="20"/>
  </data>
</diagram>

Open the SVG →