function addDottedBars()

in resources/charts/observable-plot.js [151:193]


function addDottedBars() {
    if (!isReady())
        throw new Error("Please prepare the data first.");

    const data = [...preparedData.flightsByAirport]
        .flatMap(([iata, { origin, destination }]) => {
            const airportInformation = preparedData.byAirport.get(iata);
            return [
                { ...airportInformation, value: -origin },
                { ...airportInformation, value: destination },
            ];
        })
        .filter((d) => d.value);

    const options = {
        ...DEFAULT_OPTIONS,
        color: { type: "threshold", domain: [0] },
        x: {
            domain: preparedData.stateSortedArray,
        },
        y: {
            grid: true,
            label: "← outward          Number of flights          inward →",
            labelAnchor: "center",
            tickFormat: (v) => d3Format("~s")(Math.abs(v)),
            type: "pow",
            exponent: 0.2,
        },
        marks: [
            Plot.dot(data, {
                x: "state",
                y: "value",
                r: 4,
                stroke: "value",
                strokeWidth: 3,
                title: (d) => `${d.iata === "Other" ? "Other" : `${d.name}, ${d.city} (${d.iata})`}\n${d3Format(",")(Math.abs(d.value))} ${d.value > 0 ? "inward" : "outward"} flights`,
            }),
            Plot.ruleY([0]),
        ],
    };

    ROOT.append(Plot.plot(options));
}