Engineer & data visualization lover | Tae Bo Enthusiast
Public
Edited
Apr 14, 2023
Draw a petal
barData = [45, 67, 96, 84, 41]
{
const rectWidth = 50
const svg = html`
<svg width=${rectWidth * barData.length} height=100 style="border" 1 px dashed >
<rect />
<rect />
<rect />
<rect />
<rect />
</svg>
`
d3.select(svg).selectAll('rect')
.data(barData)
.attr('x', (d, i) => i * rectWidth)
// change the orientation
.attr('y', d => 100 - d)
.attr('height', d => d)
.attr('width', rectWidth)
.attr('stroke-width', 2)
.attr('stroke', 'blue')
.attr('fill', 'pink')
return svg
}
exercise: movie genre -> color of petal
movies
pathObj
movies
calculateGridPos(15)
topGenres
movies[0]['genres'][0]
petalPaths
${textcolor('D3:', 'red')} Translate first and then scale
turn_into_flower = md`## Turn petals into flowers for each movie`
exercise time
updateBarsNew = (svg, data) => {
const rectWidth = 50
// ✨ OUR CODE HERE
const rect = d3.select(svg).selectAll('rect')
.data(data, d => d)
.join('rect')
.attr('x', (d, i) => i *rectWidth)
.attr('y', d => 100 - d)
.attr('height', d => d)
.attr('width', rectWidth)
.attr('fill', 'pink')
.attr('stroke', 'plum')
.attr('stroke-width', 2)
}
filteredFlowers = calculateData(filtered)
import {movies, colorObj, pathObj, slide, slide_style, scrollSVG, svgHeight, calculateGridPos, petalColors, topGenres, rated, petalPaths} from "@sxywu/workshop-utility-functions"
import {form} from "@mbostock/form-input"
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
import {calculateData} from '2683357905679f61'
import {checkbox} from "@jashkenas/inputs"
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.
