Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
chart = {
const div = html`<div class="waffle"></div>`
const waffle = d3.select(div)
// Create an array with numbers 0 - 99
const numbers = d3.range(100);
// For each item in the array, add a div element
// if the number is < 5, color it red, otherwise gray
waffle
.selectAll('.block')
.data(numbers)
.enter()
.append('div')
.attr('class', 'block')
.style('background-color', d => {
if (d < threshold) {
return '#00A99D'
} else if (d < a2) {
return '#CC8685'
} else {
return '#CCCCCC'
}
})
.style('width', d => {
if (d < threshold && d >= a2) {
return '10px'
} else {
return '20px'
}
})
.style('height', d => {
if (d < threshold && d >= a2) {
return '10px'
} else {
return '20px'
}
})
.style('margin', d => {
if (d < threshold && d >= a2) {
return '9px'
} else {
return '4px'
}
})
return div
}
numbers
html`
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';
font-size: 22px;
}
.waffle {
display: flex;
flex-wrap: wrap;
width: 280px;
}
.display {
width: 280px;
display: flex;
justify-content: space-between;
align-items: baseline
}
.block {
border-radius: 50px;
}
</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.
