{
const star = radius =>
[0, .4, .8, .2, .6, 0].map(d =>
round(radius*Math.cos(2*Math.PI*d - .5*Math.PI), 3)
+","+
round(radius*Math.sin(2*Math.PI*d - .5*Math.PI), 3)
)
return star(1);
}
colors = ['#8ea9f7',
'#d68ff7',
'#f783d3',
'#f88a9f',
'#f69335',
'#c3ab35',
'#8db934',
'#36c27a',
'#39beae',
'#3bbad0']
svg = d3.create("svg").attr("height", 500).attr("width", width)
{
//test
const newSVG = svg
viz(svg, 20)
return svg.node()
}
viz = (svg, numStars) => {
const size = numStars || 20
const starData = []
for(let i = 0; i < size; i++){
starData.push({
points,
})
}
const getRandomRotation = () => {
const minR = 0
const maxR = 360
return minR + Math.random() * (maxR - minR)
}
const leaderScale = d3.scaleLinear().domain([0, size]).range([0, 1])
const color = (d) => d3.interpolateRdPu(leaderScale(d)) // map our data to colors
const ordinalColor = d3.scaleOrdinal().range(colors)
const height = 500
svg.selectAll(".stars").remove()
svg.selectAll(".stars")
.data(starData)
.enter()
.append("polygon")
.attr("points", d => d.points)
.attr("opacity", 1)
.attr("class", "stars")
.attr("fill", (d,i) => ordinalColor(i))
.attr("transform", (d, i) => {
const x = i % 2 === 0 ? width: 0
return `translate(${x},${height}) rotate(0)`
})
.transition()
.duration(1500)
.attr("transform", (d, i) => {
let y = (height / 2) * Math.random()
let x = (width / 4) + (width / 4) * Math.random()
if (i % 2 !== 0) {
// We started at the left, so go to a little bit to the right
x = (width / 2) + (width / 4) * Math.random()
}
return `translate(${x},${y}) rotate(${getRandomRotation()})`
})
.ease(d3.easeCubicOut)
.attr('opacity', 0)
return svg
}
points
data = dataMaker(stepSize,nPoints)
points = pointMakerXL(data)
dataMaker = (stepSize,nPoints) => {
let data = []
for(let i = 0; i < nPoints; i++){
data.push(i*(stepSize/nPoints))
}
data.push(0)
return data
}
pointMaker = data => data.map(d =>
Math.round(100 * 50*Math.cos(2*Math.PI*d - .5*Math.PI) )/500
+","+
Math.round(100 * 50*Math.sin(2*Math.PI*d - .5*Math.PI) )/500
).join(' ')
pointMakerXL = data => data.map(d =>
Math.round(1000 * 50*Math.cos(2*Math.PI*d - .5*Math.PI) )/1000
+","+
Math.round(1000 * 50*Math.sin(2*Math.PI*d - .5*Math.PI) )/1000
).join(' ')
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.
