md `# Challenge Visualizations - Adrienne`
md `### Overview of plots from various challenge submissions`
md `
* Add to comparison button, below the submission slider.
* Fill overview with multiple submission, with all lung segments.
* Add the selection of lung segments (change this in all submission plots).
* And add a clear/reset button.
`
{
// Visalization types: markTick, markCircle
const plot1 = vl.markCircle({size:12}).data(tableResult).encode(
vl.x().fieldQ('subject'),
vl.y().fieldQ('dice'),
vl.color().field('segment'),
vl.tooltip(['subject', 'segment', 'dice']),
)
// .width(200)
// .height(200)
return vl.vconcat(plot1)
// .autosize({type: 'fit-x', contains: 'padding'})
// .repeat({column: ['Acceleration', 'Horsepower', 'Displacement']})
.render();
}
{
tableResult.length = 0
if(selectedSegment === 'all'){
dataLola11.map(
(row,index) => { // index = 0 to 142
Object.entries(row.metrics).slice(0,7).map((metric, j)=>{
metric[1].map((dice,k)=>{ // k = 0 to 55
tableResult.push({ subject: k+1, dice: dice, segment: metric[0]})
})
})
}
)
}
else{
// Filter by Segment
dataLola11.map(
(row,index) => { // index = 0 to 142
Object.entries(row.metrics).slice(0,7).map((metric, j)=>{
if(metric[0]=== selectedSegment){
metric[1].map((dice,k)=>{ // k = 0 to 55
tableResult.push({ subject: k+1, dice: dice, segment: metric[0]})
})
}
})
}
)
}
}
// printTable(dataLola11.slice(0, 10))
dataLeftLung
import { slider, select } from '@jashkenas/inputs'
vegalite = require("@observablehq/vega-lite@0.3")
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.
