Hello world.
Published
Edited
Aug 26, 2019
2 stars
d3 = require("d3-fetch@1")
logs = d3.csv("https://gist.githubusercontent.com/wsargent/8c48fa2aab664cbb265e341c5de362c0/raw/d348c701af9f70b1b0014616e17a90a8f7614a83/application.csv")
import {table} from "@tmcw/tables@513"
table(logs, { style: "compact" })
trace = logs.filter(function (e) {
return e["trace.trace_id"] != "";
}).map(function (e) {
e.end_ms = parseInt(e.start_ms, 10) + parseInt(e.duration_ms, 10);
return e;
});
md`And we then can render it as a [horizontal bar chart](https://vega.github.io/vega-lite/docs/bar.html#bar-chart) with [Vega Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite):`
vegalite = require('@observablehq/vega-lite')
vegalite({
"title": "Tracing",
data: { values: trace },
transform: [
{"calculate": "datetime(parseInt(datum.start_ms, 10))", "as": "start_ts"},
{"calculate": "datetime(datum.end_ms)", "as": "end_ts"}
],
autosize: "fit",
width: width,
layer: [
{
mark: "bar",
encoding: {
"y": {
"field": "name",
"type": "ordinal"
},
"x": {"field": "duration_ms", "type": "quantitative"},
tooltip: [
{"field": "message"},
{"field": "start_ts"},
{"field": "end_ts"},
{"field": "duration_ms"}
]
}
}
],
})
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.
