Software engineer and visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs.
Published
Edited
Aug 21, 2021
4 forks
Importers
110 stars
viewof result = ternarySlider()
result
viewof thanks = ternarySlider({
value: [0.6, 0.22, 0.18],
labels: ['Andrew', 'Dakota', 'Yuriy']
})
{ // Augment the chart with proportions from whiskey sour recipe data
let svg = viewof whiskeySour
d3.select(svg)
// Bind and insert data elements using a data-join
.selectAll('circle.data').data(whiskeySours).join('circle')
.attr('class', 'data')
// `projectX` and `projectY` compute coordinates in [-1, 1] for
// an input composition.
.attr('cx', d => svg.R * projectX(svg.corners, d.composition))
.attr('cy', d => svg.R * projectY(svg.corners, d.composition))
// Apply visual properties
.attr('r', 1)
.attr('stroke', '#fff')
.attr('fill', '#000')
// Move the data elements below the drag surface
.lower()
}
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.
