← All examples

Histogram

Little Delving #0005: a histogram (gapless binned bars) with axis titles and a leader-line annotation to the longest-paragraph outlier.

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

Result

Source examples/histogram.svgn

<diagram width="1440" height="1080" padding="70">
  <!-- Little Delving #0005: a histogram (gapless binned bars) with axis titles
       and a leader-line annotation to the longest-paragraph outlier. -->
  <style>
    svg { --sv-bg: #f6f6f6; --sv-font: "Noto Sans","Helvetica Neue",Arial,sans-serif;
          --sv-text: #000; --sv-edge: #000; --sv-muted: #000; --sv-mark: #6b93c7;
          /* the background is pinned, so every ink over it must be too --
             --sv-title was left to flip and the callout vanished in dark mode */
          --sv-title: #336699; }
  </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="60" label="${title}"/>
        <text font-family="Merriweather, Georgia, serif" color="#336699" font-size="38" 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="Distribution of Words Per Paragraph" subtitle="in The Hobbit" num="0005">
    <histogram data="wpp" y="n" bin-size="10" width="1125" height="500"
               x-title="Words per Paragraph" y-title="Number of Paragraphs"
               annotate-title="Longest Paragraph" annotate-label="01.123 = 462 words"/>
  </delving-blue>

  <data name="wpp">
    <record n="105"/>
    <record n="161"/>
    <record n="271"/>
    <record n="263"/>
    <record n="212"/>
    <record n="159"/>
    <record n="115"/>
    <record n="83"/>
    <record n="59"/>
    <record n="42"/>
    <record n="31"/>
    <record n="22"/>
    <record n="16"/>
    <record n="12"/>
    <record n="9"/>
    <record n="7"/>
    <record n="5"/>
    <record n="4"/>
    <record n="3"/>
    <record n="2"/>
    <record n="2"/>
    <record n="1"/>
    <record n="1"/>
    <record n="1"/>
    <record n="1"/>
    <record n="1"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="0"/>
    <record n="1"/>
  </data>
</diagram>

Open the SVG →