Crate autumn_plugin_d3 

This crate adds D3.js charts to Autumn apps. It works with Maud and htmx.

Add D3Plugin to the app. Put d3_stylesheet() and d3_script() in the page <head>. Then render a Chart:

use autumn_plugin_d3::{Chart, D3Plugin, Format, Scale, Series, d3_script, d3_stylesheet};
use autumn_web::prelude::*;

#[get("/")]
async fn index() -> Markup {
    html! {
        html {
            head { (d3_stylesheet()) (d3_script()) }
            body {
                (Chart::bar([("Apples", 30.0), ("Pears", 60.0)])
                    .label("Fruit sold")
                    .format(Format::integer()))
                (Chart::line([Series::new("Visits", [(0.0, 3.0), (1.0, 5.0)])])
                    .label("Visits"))
            }
        }
    }
}

autumn_web::app()
    .plugin(D3Plugin::new())
    .routes(routes![index])
    .run()
    .await;

How it works

• The crate contains D3 7.9.0 (ISC). It does not use npm or a bundler. D3_ASSETS serves it under /static/_plugins/d3/ at hashed URLs with SRI.
• The builder renders a <figure data-d3="KIND"> with data-d3-* attributes and a data table. init.js reads the attributes and draws an SVG. You can also write the attributes by hand.
• Without JavaScript, the table shows. When the chart is ready, the table stays for screen readers only. The runtime updates it with the data.
• init.js starts charts on load, after htmx swaps, and on each DOM insertion. It redraws on resize and on attribute changes. It frees a chart when its element leaves the document.
• Your own scripts get window.d3, the d3:ready event, the el.autumnD3 handle, and AutumnD3.register for custom kinds.

Limits

• Built-in kinds: bar, line, area, scatter, pie. Write other kinds in JavaScript with AutumnD3.register.
• The palette has 8 colors. More series repeat colors (the runtime warns). Keep to 8 or fewer, or set Chart::colors.
• Bars and areas do not stack. There is one value axis.
• data-d3-src loads same-origin URLs only.
• Do not let user content keep data-d3-* attributes or id="AutumnD3". User markup could then start charts and load same-origin URLs.

Structs

Area

Area chart kind.

Bar

Bar chart kind.

Chart

A D3 chart. Render it in a Maud template.

Color

An sRGB color.

Custom

Custom chart kind. Register the draw function in JavaScript with AutumnD3.register(name, draw).

D3Plugin

Installs the D3 assets in an Autumn app.

Datum

One labelled value. Bar and pie charts use it.

Format

A number format. It maps to a d3-format specifier.

Line

Line chart kind.

Pie

Pie and donut chart kind.

Point

One (x, y) point. Line, area, and scatter charts use it.

Scatter

Scatter chart kind.

Series

A named list of points.

Enums

Curve

Line and area interpolation.

Error

An error from the chart builder.

Scale

A continuous scale type.

Constants

ASSETS_NAMESPACE

URL namespace of the bundle. Files are served under /static/_plugins/d3/.

D3_JS_INTEGRITY

sha384 SRI of the upstream bytes in assets/d3.min.js.

D3_SOURCE

jsDelivr URL of the vendored UMD build.

D3_VERSION

Pinned D3 version.

PLUGIN_NAME

The plugin name in Autumn diagnostics.

Statics

D3_ASSETS

The plugin asset bundle.

Traits

Axes

Kinds with x and y axes: bar, line, area, scatter, custom.

BuiltIn

Built-in kinds. They have a fixed name.

Curved

Kinds with a curve and point dots: line, area, custom.

Kind

A chart kind. The crate defines all kinds.

Legend

Kinds with a legend: line, area, scatter, pie.

Xy

Kinds with a continuous x axis: line, area, scatter, custom.

Functions

d3_script

Renders the <script> tags that load D3 and the plugin runtime.

d3_stylesheet

Renders the <link> tag for the plugin stylesheet.