Public
Edited
Jul 6, 2023
{
let data = iris.map((row, i) => {
return { ...row, index: i };
});
return Plot.plot({
marks: [Plot.barY(data, { x: "index", y: "petal_length" })]
});
}
dotplot = {
let speciesCounts = {};
let maxData = {};
let data = iris.flatMap((row, i) => {
if (speciesCounts[row.species] == undefined) {
speciesCounts[row.species] = { val: 0 };
maxData[row.species] = { val: row["petal_length"], ind: i };
}
speciesCounts[row.species].val += 1;
return {
...row,
totalIndex: i,
speciesIndex: speciesCounts[row.species].val
};
});
let plt = Plot.plot({
marks: [
Plot.dot(data, {
x: "speciesIndex",
y: "petal_length",
z: "species",
stroke: "species"
}),
Plot.line(data, {
x: "speciesIndex",
y: "petal_length",
z: "species",
stroke: "species"
})
]
});
return plt;
}
Arizona_cities(1)@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
{
let cityCounts = {};
let maxData = {};
let data = arizona_cities.flatMap((row, i) => {
if (cityCounts[row.names] == undefined) {
cityCounts[row.names] = { val: 0 };
maxData[row.names] = {
val: row["tmax"],
ind: cityCounts[row.names].val
};
}
// technically we are seeking out the point where the petal length becomes the highest
cityCounts[row.names].val += 1;
if (row["tmax"] > maxData[row.names].val) {
maxData[row.names] = {
val: row["tmax"],
ind: cityCounts[row.names].val
};
}
return {
...row,
totalIndex: i,
speciesIndex: cityCounts[row.names].val
};
});
console.log(maxData);
let maxArray = [];
for (let key in maxData) {
maxArray.push({
names: key,
val: maxData[key].val,
ind: maxData[key].ind
});
}
console.log(maxArray);
let plt = Plot.plot({
width: (width * 3) / 4,
y: { label: "Temperature" },
x: { label: "Index" },
marks: [
Plot.dot(maxArray, { x: "ind", y: "val", stroke: "names", r: 20 }),
Plot.dot(data, {
x: "speciesIndex",
y: "tmax",
z: "names",
stroke: "names"
}),
Plot.line(data, {
x: "speciesIndex",
y: "tmax",
z: "names",
stroke: "#bdc0c69e"
})
]
});
return plt;
}
barley = FileAttachment("barley.json").json()
selyear = 1931
selvar = "Glabron"
fb = barley.filter((e) => e.variety == selvar && e.year == selyear)
barleyplot = {
let speciesCounts = {};
let maxData = {};
let data = fb.flatMap((row, i) => {
if (speciesCounts[row.variety] == undefined) {
speciesCounts[row.variety] = { val: 0 };
maxData[row.variety] = {
val: row["yield"],
ind: speciesCounts[row.variety].val
};
}
speciesCounts[row.variety].val += 1;
if (row["yield"] > maxData[row.variety].val) {
maxData[row.variety] = {
val: row["yield"],
ind: speciesCounts[row.variety].val
};
}
return {
...row,
totalIndex: i,
varietyIndex: speciesCounts[row.variety].val
};
});
let maxArray = [];
for (let key in maxData) {
maxArray.push({
variety: key,
val: maxData[key].val,
ind: maxData[key].ind
});
}
let plt = Plot.plot({
y: { label: "Yield" },
x: { label: "Index" },
marks: [
Plot.dot(maxArray, { x: "ind", y: "val", stroke: "variety", r: 10 }),
Plot.dot(data, {
x: "varietyIndex",
y: "yield",
z: "variety",
stroke: "variety"
}),
Plot.line(data, {
x: "varietyIndex",
y: "yield",
z: "variety",
stroke: "#bdc0c69e"
})
]
});
return plt;
}
barleyplot2 = {
let speciesCounts = {};
let maxData = {};
let filtered = barley.filter(
(e) =>
e.site == "Waseca" ||
e.site == "Grand Rapids" ||
e.site == "University Farm"
);
let data = filtered.flatMap((row, i) => {
if (speciesCounts[row.site] == undefined) {
speciesCounts[row.site] = { val: 0 };
maxData[row.site] = {
val: row["yield"],
ind: speciesCounts[row.site].val
};
}
speciesCounts[row.site].val += 1;
if (row["yield"] > maxData[row.site].val) {
maxData[row.site] = {
val: row["yield"],
ind: speciesCounts[row.site].val
};
}
return {
...row,
totalIndex: i,
siteIndex: speciesCounts[row.site].val
};
});
let maxArray = [];
for (let key in maxData) {
maxArray.push({
site: key,
val: maxData[key].val,
ind: maxData[key].ind
});
}
let plt = Plot.plot({
y: { label: "Yield" },
x: { label: "Site Index" },
width: 767 - 252,
height: 220,
marks: [
Plot.dot(maxArray, { x: "ind", y: "val", stroke: "site", r: 10 }),
Plot.dot(data, {
x: "siteIndex",
y: "yield",
z: "site",
stroke: "site"
}),
Plot.line(data, {
x: "siteIndex",
y: "yield",
z: "site",
stroke: "#bdc0c69e"
})
]
});
return plt;
}
Plot.dot(iris, {
x: "petal_length",
y: "sepal_width",
stroke: "species"
}).plot()
import { Swatches } from "@d3/color-legend"
iris = FileAttachment("iris.json").json()
import { aq, op } from "@uwdata/arquero"
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.
