Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
Mar 29, 2021
Importers
vl.markLine()
.data(chart_data)
.encode(
vl.x().fieldO("Work").axis({labelAngle:0}),
vl.y().fieldQ("Revenue").axis({format:"$"})
)
.title("Sales on @hicetnunc")
.width(300)
.render()
d3 = require("d3")
sheet = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRlL9XaMcDfSxuWpDwo2_QNOGtc08swxajSpGmjIXSwbUe0bgFFc9AqRz0xsMtd-Gx0ARjCpxN2E845/pub?output=csv"
data = await d3.csv(sheet)
links = new Map(data.map(d => [d.Title, d.Link]))
import { vl } from "@vega/vega-lite-api"
table_styles = html`<style>
p code, li code {color: #c30771;}
code.error {
color:red;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
display: block;
overflow: auto;
white-space: nowrap;
width:${width}px;
min-width:${width}px;
max-height:500px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
td:first-of-type {
font-style: italic;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #d3d3d359;
}
</style>`
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.
