columns = Object.keys(data[0]);
dataGroups = d3.group(selectedRows, d=>d[groupBy])
testData = {
let testData = [];
dataGroups.forEach((values, keys) => {
testData.push([keys, d3.mean(values.map( val => val[colToShow] )), d3.deviation(values.map( val => val[colToShow] ))])
})
return testData;
}
viewof groupvals = Inputs.select(data.map(d => d[groupBy]), {sort: true, unique: true, multiple:true});
viewof separate = Inputs.toggle({label: "Separate plots"})
viewof statsTable = Inputs.table(testData,{
header:["name", "mean", "sd"],
maxWidth:300})
viewof graphResult = {
if (separate) {
return Plot.plot({
grid: true,
x: {
domain: [0, 1]
},
y: {
label: null
},
facet: {
data:selectedRows,
y:groupBy,
},
marks: [
Plot.rectY(selectedRows, Plot.binX({y: "count"}, {x: colToShow, fill: groupBy})),
Plot.ruleY([0])
]
})
} else {
return Plot.plot({
grid: true,
x: {
domain: [0, 1]
},
marks: [
Plot.rectY(selectedRows, Plot.binX({y: "count"}, {x: colToShow, fill: groupBy, mixBlendMode: "multiply"})),
Plot.ruleY([0])
]
})
}
}
data = { // this is a JS Array of Objects; the key-value pairs consist of the column headers and the cell data
let names =[];
const spreadsheet = await d3.tsv(url).then(data => data.forEach(d => names.push(d))); // d3.tsv returns a Promise
return names;
}
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.
