Published
Edited
Feb 9, 2020
Insert cell
import {vl} from '@vega/vega-lite-api'

Insert cell
import {printTable} from '@uwdata/data-utilities'
Insert cell
d3 = require("d3@5")
Insert cell
Quake_data = d3.csvParse(await FileAttachment("mc1-reports-data (1).csv").text(),d3.autoType)
Insert cell
line = vl.markArea({point:true})
.data(Quake_data)
.encode(
vl.x().fieldT('time').timeUnit('day'),
vl.y().average('power')).render();

Insert cell
line2= vl.markArea()
.data(Quake_data)
.encode (vl.x().fieldT('time').timeUnit('day'),
vl.y().average('power'),
vl.color().field('location')
).render();

Insert cell
line3= vl.markBar()
.data(Quake_data)
.encode (vl.x().fieldT('time').timeUnit('day'),
vl.y().average('medical'),
vl.color().field('location')
).render();
Insert cell
line4= vl.markLine()
.data(Quake_data)
.encode(
vl.x().month('time').timeUnit('day'),
vl.y().average(vl.repeat('column')),
vl.color().fieldN('location')
)
.width(240)
.height(180)
.repeat({column: ['medical', 'power', 'sewer_and_water', 'buildings']})
.render();
Insert cell
dateHist=vl.markCircle()
.data(Quake_data).encode(
Insert cell
vl.hconcat(
vl.layer(line),
vl.layer(line2),
).render();
Insert cell
vl.layer(line,point).render();
Insert cell
pie= d3.pie().padAngle(.005).sort(null).value(d=>d.value)
Insert cell
height = Math.min(width, 500)
Insert cell
arc = {
const radius = Math.min(width, height) / 2;
return d3.arc().innerRadius(radius * 0.67).outerRadius(radius);
}
Insert cell
color = d3.scaleOrdinal()
.domain(Quake_data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), Quake_data.length).reverse())
Insert cell
import {chartGen, pieGen, globals, setup, wrap, measureWidth, rasterize, toDataURL} from "@abeyang/globals"
Insert cell
import {rasterize} from "@mbostock/saving-svg";
Insert cell
import {DDGLogo} from "@abeyang/ddg-logo"
Insert cell
data1 = FileAttachment("mc1-reports-data (1).csv")
Insert cell
chart1 = {
var chartinfo = {
showMargins: false, // for visual debugging
height: 562, // this needs to be adjusted manually (for now)
title: "Average Level of Damage by Location",
footer: 'From Vast EarthQuake Challenge',
info: {
type: "pie",
order: "pos-neutral-neg",
legend: "default"
},
data: data1, // remember to use YOUR dataset here

// DO NOT EDIT BELOW THIS LINE
sub_y: 0,
main_y: 0
}

const svg = d3.select(DOM.svg(500, chartinfo.height))
.style("background-color", 999);
// let's generate the chart!
chartGen(svg, chartinfo);

return svg.node();
}
Insert cell
import {chartGen, pieGen, globals, setup, wrap, measureWidth, rasterize, toDataURL} from "@abeyang/globals"
import {rasterize} from "@mbostock/saving-svg"
import {DDGLogo} from "@abeyang/ddg-logo"
d3 = require("d3@5")
Insert cell
html`
<svg width="200" height="200">
<circle cx="100"
cy="100"
r="80"
style="fill:none; stroke:blue; stroke-width=2"
/>
</svg>
`
Insert cell
{
"data": {Quake_data},
"mark": "tick"
"encoding" : {
"x": {"field": "power", "type": "quantitative"}}}
Insert cell
{
"data": {"url": "data/seattle-weather.csv"},
"mark": "bar",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "ordinal"
},
"y": {
"aggregate": "mean",
"field": "precipitation",
"type": "quantitative"
}
}
}
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more