Published
Edited
Feb 5, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`## Load libraries, look at data`
Insert cell
md`Load in libraries`
Insert cell
import {vl} from '@vega/vega-lite-api'
Insert cell
d3 = require('d3')
Insert cell
import {printTable} from '@uwdata/data-utilities'
Insert cell
Insert cell
stats = d3.csvParse(await FileAttachment("cityfixitdata@2.csv").text(), d3.autoType)
Insert cell
md`Take a look at the first five records, using a nice formatter`
Insert cell
printTable(stats.slice(0,5))
Insert cell
md`Look at the end of the table with negative indexing`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<figure>
${await FileAttachment("linechart2.png").image()}

</figure>`
Insert cell
Insert cell
html`<figure>
${await FileAttachment("linechart3.png").image()}

</figure>`
Insert cell
Insert cell
html`<figure>
${await FileAttachment("linechart4.png").image()}

</figure>`
Insert cell
Insert cell
html`<figure>
${await FileAttachment("linechart5.png").image()}

</figure>`
Insert cell
Insert cell
Insert cell
Insert cell
html`<figure>
${await FileAttachment("barchart3.png").image()}

</figure>`
Insert cell
Insert cell
html`<figure>
${await FileAttachment("barchart4.png").image()}

</figure>`
Insert cell
Insert cell
html`<figure>
${await FileAttachment("barchart5.png").image()}

</figure>`
Insert cell
Insert cell
html`<figure>
${await FileAttachment("combined_chart1.png").image()}

</figure>`
Insert cell
Insert cell
html`<figure>
${await FileAttachment("combined_withclickfix@1.png").image()}

</figure>`
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