screenshot20230327At141548 = FileAttachment("Screenshot 2023-03-27 at 14.15.48.png").image()
screenshot20230327At141643 = FileAttachment("Screenshot 2023-03-27 at 14.16.43.png").image()
screenshot20230327At141723 = FileAttachment("Screenshot 2023-03-27 at 14.17.23.png").image()
steve_jobs_data = [
{name: "IBM", share: 0.39},
{name: "Apple", share: 0.20},
{name: "Palm", share: 0.10},
{name: "Motorola", share: 0.07},
{name: "Nokia", share: 0.03},
{name: "Other", share: 0.21},
]
Plot.plot({
marks: [
Plot.barY(steve_jobs_data, {x: "name", y: "share", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
import {DonutChart} from "@d3/donut-chart"
DonutChart(steve_jobs_data, {name: d => d.name, value: d => d.share, innerRadius: 50})
import {PieChart} from "@d3/pie-chart"
chart = PieChart(steve_jobs_data, {
name: d => d.name,
value: d => d.share,
width,
height: 500
})
screenshot20230327At141751 = FileAttachment("Screenshot 2023-03-27 at 14.17.51.png").image()
screenshot20230327At141841 = FileAttachment("Screenshot 2023-03-27 at 14.18.41.png").image()
screenshot20230327At142119 = FileAttachment("Screenshot 2023-03-27 at 14.21.19.png").image()
screenshot20230327At142157 = FileAttachment("Screenshot 2023-03-27 at 14.21.57.png").image()
high_school_data = [
{year: 2007, percent: 0.75},
{year: 2008, percent: 0},
{year: 2009, percent: 0},
{year: 2010, percent: 0},
{year: 2011, percent: 0},
{year: 2012, percent: 0},
{year: 2013, percent: 0.82},
{year: 2014, percent: 0},
]
data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
class_grades_json = [
{grade: "A", count: 3},
{grade: "B", count: 4},
{grade: "C", count: 5},
{grade: "D", count: 3},
{grade: "F", count: 0},
]
Plot.plot({
marks: [
Plot.barY(class_grades , {x: "grade", y: "c", sort: {x: "y", reverse: true}}),
]
})
screenshot20230327At142248 = FileAttachment("Screenshot 2023-03-27 at 14.22.48.png").image()
html`<img src="${await FileAttachment("IMG_5527.JPG").url()}" style="height: 800px"/>`
banks performance - Sheet1 (1).csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
x: {
axis: null,
domain: bankperf.bank
},
y: {
grid: true,
tickFormat: "s"
},
color: {
domain: bankperf.Month,
legend: true
},
facet: {
data: bankperf,
x: "bank"
},
marks: [
Plot.barY(bankperf, Plot.groupX({y: "sum"}, {x: "Month", y: "price", fill: "Month"})),
Plot.ruleY([0])
]
})
screenshot20230326At232355 = FileAttachment("Screenshot 2023-03-26 at 23.23.55.png").image()
screenshot20230326At232408 = FileAttachment("Screenshot 2023-03-26 at 23.24.08.png").image()
screenshot20230326At232434 = FileAttachment("Screenshot 2023-03-26 at 23.24.34.png").image()
sport_factors.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof selectedData = Inputs.select(d3.group(sport_factors, d => d.factor), {label: "Factor"})
Plot.plot({
marks: [
Plot.areaY(selectedData, {x: "year", , x: "temp_max", curve: "step"})
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(selectedData, {x: "year", y: "percent", z: "factor"})
],
y :{
domain: [d3.min(selectedData, d => d.percent), d3.max(selectedData, d => d.percent)]
}
})
d3.min(selectedData, d => d.percent)
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.
