Published
Edited
Aug 12, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dc = require('dc')
Insert cell
d3 = require('d3')
Insert cell
crossfilter = require("crossfilter2")
Insert cell
Insert cell
data = require('@observablehq/cars')
Insert cell
Insert cell
import {wrangle} from "@bumbeishvili/utils"
Insert cell
wrangle(data)
Insert cell
Insert cell
Insert cell
ndx = crossfilter(data)
Insert cell
Insert cell
originDimension = ndx.dimension(d=> d.Origin);
Insert cell
cylindersDimension = ndx.dimension(d=> d.Cylinders);
Insert cell
Insert cell
originGroup = originDimension.group();
Insert cell
cylindersGroup = cylindersDimension.group();
Insert cell
Insert cell
originChart = {
htmlView;
return new dc.PieChart('#origin-chart')
.width(250)
.height(250)
.radius(250)
.dimension(originDimension)
.group(originGroup)
}
Insert cell
cylindersChart = {
htmlView;
return new dc.PieChart('#cylinders-chart')
.width(250)
.height(250)
.radius(250)
.dimension(cylindersDimension)
.group(cylindersGroup)
}
Insert cell
Insert cell
import {collapsedCSS} from "@j-f1/css-template-tag"
Insert cell
Insert cell
Insert cell
htmlView = {
yield html`
<div style="height:300px;">

<div style="display:inline-block;margin:20px">
<b>Makers</b>

<div id='origin-chart'></div>

</div>

<div style="display:inline-block;margin:20px">
<b>Cylinders</b>

<div id='cylinders-chart'></div>

</div>

<div>`
}
Insert cell
rendering = {
// Wait for html view
htmlView;
// Wait for originChart init
originChart;
// Wait for cylindersChart init
cylindersChart;
// Finally render all of them
dc.renderAll();
}
Insert cell

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.
Learn more