Published
Edited
Dec 30, 2021
1 fork
data = FileAttachment("final.csv").csv()
embed = require('vega-embed@3')
import {rangeSlider} from '@mootari/range-slider'
import {radio, checkbox} from "@jashkenas/inputs"
viewof range = rangeSlider({
min: d3.min(data, d => d.table),
max: d3.max(data, d => d.table),
value: this ? this.value : [49, 69],
title: 'table (49 - 69 )'
})
viewof familyJob = embed({
data: {values: data},
hconcat: [
{
selection: {
price: {type: "single", on: "mouseover"}
},
mark :{type: "rect"},
autosize:"fit",
width: 200,
height: 200,
transform: [
{filter: {field: "table", lte: range[1]}},
{filter: {field: "table", gte: range[0]}}
],
encoding: {
y : {field: "color", type: "nominal", title: "color"},
x : {field: "clarity", type: "ordinal", title: "clarity"},
color: {
condition: {selection: "price", field: "price", aggregate: "mean",
type: "quantitative"
},
value: "lightgray"
}
},
config: {
axis: {grid: true, tickBand: "extent"}
}
},
{
mark: {type:"bar", tooltip: {"content": "data"}},
autosize:"fit",
width: 200,
height: 200,
selection: {
area: {type: "interval"}
},
transform: [{filter: {field: "table", lte: range[1]}}, {filter: {field: "table", gte: range[0]}}],
encoding: {
x:{field:"clarity", type:"nominal", title: "clarity"},
y:{field: "price", type: "quantitative", title: "Number of price", aggregate:"mean"},
color: {
condition: {selection: "area", title: "color", field: "color", type: "nominal"},
value: "lightgray"
}
}
}
]
})
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.
