Published
Edited
Feb 9, 2020
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
d3 = require("d3@5")
Quake_data = d3.csvParse(await FileAttachment("mc1-reports-data (1).csv").text(),d3.autoType)
line = vl.markArea({point:true})
.data(Quake_data)
.encode(
vl.x().fieldT('time').timeUnit('day'),
vl.y().average('power')).render();
line2= vl.markArea()
.data(Quake_data)
.encode (vl.x().fieldT('time').timeUnit('day'),
vl.y().average('power'),
vl.color().field('location')
).render();
line3= vl.markBar()
.data(Quake_data)
.encode (vl.x().fieldT('time').timeUnit('day'),
vl.y().average('medical'),
vl.color().field('location')
).render();
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();
dateHist=vl.markCircle()
.data(Quake_data).encode(
vl.hconcat(
vl.layer(line),
vl.layer(line2),
).render();
vl.layer(line,point).render();
pie= d3.pie().padAngle(.005).sort(null).value(d=>d.value)
height = Math.min(width, 500)
arc = {
const radius = Math.min(width, height) / 2;
return d3.arc().innerRadius(radius * 0.67).outerRadius(radius);
}
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())
import {chartGen, pieGen, globals, setup, wrap, measureWidth, rasterize, toDataURL} from "@abeyang/globals"
import {rasterize} from "@mbostock/saving-svg";
import {DDGLogo} from "@abeyang/ddg-logo"
data1 = FileAttachment("mc1-reports-data (1).csv")
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();
}
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")
html`
<svg width="200" height="200">
<circle cx="100"
cy="100"
r="80"
style="fill:none; stroke:blue; stroke-width=2"
/>
</svg>
`
{
"data": {Quake_data},
"mark": "tick"
"encoding" : {
"x": {"field": "power", "type": "quantitative"}}}
{
"data": {"url": "data/seattle-weather.csv"},
"mark": "bar",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "ordinal"
},
"y": {
"aggregate": "mean",
"field": "precipitation",
"type": "quantitative"
}
}
}
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.
