In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
HTML radar, buttons and name/discription :
<div id = 'qButtons'></div><hr>
<div id = 'rtext'></div>
<div id = 'rsvg_div'><svg id = rsvg></svg></div>
text_dis = {
let selected = 0 // the active quadrent
let name_selected = "" // which name has expanded discription
// add buttons
d3.selectAll('#qButtons')
.selectAll('div')
.data(quadrants)
.join('div')
.html(d => `${d}`)
.attr('id',d => `button_${d}`)
.style("background-color",'#A4969B')
.style('cursor', 'pointer')
.on('click', d => {
let it = _.replace(d.path[0].id,'button_','')
d3.select(`#${name_selected}_dis`).style('display','none')
name_selected = ""
d3.select(`#${quadrants[selected]}`).style('display','none')
d3.select(`#${it}`) .style('display', 'block')
selected = quadrants.indexOf(it)
});
const text = d3.select('#rtext') // should all be visabley none
.selectAll('div')
.data(BS)
.join('div')
.attr('id',(d,i) => `${quadrants[i]}`)
.html((d,i) => `<h3 style="background-color:Tomato;">${quadrants[i]}</h3>`)
.style('display', (d,i) => (i==0)?'block':'none')
.selectAll("div") // populating each with blips name
.data(d => d)
.join('div')
.html(b => `${b.name}`)
.attr('id', b => `${_.camelCase(_.deburr(b.name)).replace(/\d/g,'')}`)
.style('cursor', 'pointer')
.on('click', e => {
let it = e.path[0].id
if(it==name_selected){
d3.select(`#${name_selected}_dis`).style('display','none')
name_selected = ""
} else {
d3.select(`#${name_selected}_dis`).style('display','none')
name_selected = it
d3.select(`#${it}_dis`).style('display','block')
}
})
.append('div')
.attr('id', b => `${_.camelCase(_.deburr(b.name)).replace(/\d/g,'')}_dis`)
.html(b=> `${b.description}`)
.style('display', 'none')
}
GoogleSheet[0] // example element from the loaded CSV file.
GoogleSheet = await d3.csv("https://docs.google.com/spreadsheets/d/18A7oDuavlh89rAmqcaXpqle8QLqIvlAkoEUxcObzuUM/gviz/tq?tqx=out:csv&sheet=1985253373")
GoogleSheet.columns
blips = _.map(GoogleSheet, new InputSanitizer().sanitize)
quadrants = _.uniq(blips.map(d => d.quadrant))
BS = {
let m = []
quadrants.forEach( q => {
m.push([])
})
blips.forEach( b => {
m[quadrants.indexOf(b.quadrant)].push({name:b.name, ring:b.ring, isNew:b.isNew, description:b.description, quadrant:b.quadrant})
})
return m
}
Inputs.table(blips)
style = html`<style>
.katex-display,p,h1,h2,h3,table,li
{
max-width: 1100px;
min-width: 1100px;
}
.observablehq {
padding-left: 14px;
}
</style>`
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.
