Published
Edited
Apr 7, 2020
1 fork
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
d3 = require("d3")
vegalite = require("@observablehq/vega-lite@0.2")
df = d3.csvParse(await Files.text(file))
df
Datamap = require('https://bundle.run/datamaps@0.5.9')
countries = uniqueValid(df, d => d.country)
{
const selectCounty = vl.selectSingle('Select Wine')
.fields('country')
.init({country: 'Italy'})
.bind({country: vl.menu(countries)});
return vl.markCircle().data(df)
.select(selectCounty)
.transform({filter: selectCounty})
.encode(
vl.x().fieldQ('points').bin(false),
vl.y().count(),
vl.tooltip(vl.y().count())
)
.width(600)
.height(500)
.render()
}
md`
# Top countries have highest points
`
viewof point = html`<input type=file accept="*">`
point_image = d3.csvParse(await Files.text(point))
vegalite({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"values": point_image},
"layer": [
{
"selection": {"brush": {"type": "interval", "encodings": ["x"]}},
"mark": "bar",
"encoding": {
"x": {"field": "country", "type": "ordinal"},
"y": {
"aggregate": "mean",
"field": "price",
"type": "quantitative"
},
"opacity": {
"condition": {"selection": "brush", "value": 1},
"value": 0.7
}
}
},
{
"transform": [{"filter": {"selection": "brush"}}],
"mark": "rule",
"encoding": {
"y": {
"aggregate": "mean",
"field": "price",
"type": "quantitative"
},
"color": {"value": "firebrick"},
"size": {"value": 3}
}
}
]
})
md`
# Top countries have highest points
`
margin = ({top: 20, right: 30, bottom: 30, left: 40})
import {Scrubber} from "@mbostock/scrubber"
import {ramp} from "@mbostock/color-ramp"
height = 240
viewof line_file = html`<input type=file accept="*">`
data = d3.csvParse(await Files.text(line_file))
line = d3.line().x(d => x(d.country)).y(d => y(d.price))
x = d3.scaleUtc()
.domain(d3.extent(data, d => d.country))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.price)])
.range([height - margin.bottom, margin.top])
xAxis = (g, scale = x) => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(scale).ticks(width / 80).tickSizeOuter(0))
yAxis = (g, scale = y) => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(scale).ticks(height / 40))
.call(g => g.select(".domain").remove())
reveal = path => path.transition()
.duration(5000)
.ease(d3.easeLinear)
.attrTween("stroke-dasharray", function() {
const length = this.getTotalLength();
return d3.interpolate(`0,${length}`, `${length},${length}`);
})
html`<svg viewBox="0 0 ${width} ${height}">
<path d="${line(data)}" fill="none" stroke="steelblue" stroke-width="1.5" stroke-miterlimit="1" stroke-dasharray="${lineLength * t},${lineLength}"></path>
${d3.select(svg`<g>`).call(xAxis).node()}
${d3.select(svg`<g>`).call(yAxis).node()}
</svg>`
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.
