margin = ({ top: 10, right: 10, bottom: 20, left: 40 })
x_time = d3
.scaleBand()
.domain(
_.map(
_.values(
iao
.filter(d => d.origin == 'DE300')
.select('date')
.objects()
),
'date'
)
)
.range([width * 0.36 + margin.left, width - margin.right])
.padding(0.3)
xAxis = g => {
const all_dates = _.map(
_.values(
iao
.filter(d => d.origin == 'DE300')
.select('date')
.objects()
),
'date'
);
const max_date = _.max(all_dates);
const min_date = _.min(all_dates);
const axis = d3
.scaleTime()
.domain([min_date, max_date])
.range([width * 0.36 + margin.left, width - margin.right]);
return g
.attr("transform", `translate(0,${450 - margin.bottom})`)
.call(d3.axisBottom(axis).ticks(7))
.append('text')
.attr('transform', `translate(0,${450 - margin.bottom}) rotate(-90)`)
.attr('text-anchor', 'end')
.attr('fill', 'black')
.attr('font-size', '12px')
.text('# trips');
}
bar_plot = function (data, cb_norm) {
const format = cb_norm === "normalize" ? "~%" : ".2s";
return vl
.markBar({ width: 6 })
.data(
data
.derive({ sum: (d) => d.inner + d.adjacent + d.other })
.derive({ long_distance: (d) => d.other })
.fold(["inner", "adjacent", "long_distance"], {
as: ["distance", "trips"]
})
.derive({ rel: (d) => op.round((100 * d.trips) / d.sum) / 100 })
.select("date", "distance", "trips", "rel")
)
.encode(
vl
.x()
.fieldT("date")
.axis({ title: "Date", titleFont: "Helvetica Neue" }),
vl
.y()
.fieldQ("trips")
.stack(cb_norm === "normalize" ? "normalize" : true)
.axis({ title: "Trips", titleFont: "Helvetica Neue", format: format }),
vl.color().fieldN("distance").sort(tri.order).scale({ range: tri.color }),
vl
.tooltip()
.field(cb_norm === "normalize" ? "rel" : "trips")
.format(format)
);
}
tri = Object({
order: ['inner', 'adjacent', 'other'],
color: ['#95c6ed', '#869e80', '#833471']
})
grad_tri02tri2 = [0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1]
.map(culori.interpolate([tri.color[0], tri.color[2]], 'lch'))
.map(culori.formatHex)
grad_white2tri2 = [.1, .2, .3, .4, .5, .6, .7, .8, .9, 1]
.map(culori.interpolate(['#F6F6F6', tri.color[2]], 'lch'))
.map(culori.formatHex)
tri_scale = d3
.scaleOrdinal()
.domain(tri.order)
.range(tri.color)
.unknown("#fff")
iao = aq
.fromCSV(await FileAttachment("iao_ml_20210301@3.csv").text())
.derive({ other: d => d.total - d.adjacent })
.derive({ adjacent: d => d.adjacent - d.inner })
nuts3 = await FileAttachment('nuts3de@1.json').json()
d3 = require("d3@7.4.4")
topojson = require("topojson@3.0.2")
import { vl } from "@vega/vega-lite-api"
import { aq, op } from '@adrianzachariae/arquero'
_ = require("lodash@4.17.21")
culori = require("culori@2.0.3")
import { checkbox, select, radio } from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
