Published
Edited
Nov 30, 2020
6 stars
chart = {
if (box==true) { console.log("true") }
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.style("background-color", "#000")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
// every 10ms, planets move by one step: below is the setInterval function
// the size of the step will vary for each planet depending on its rating
let step = 10000000;
const planets = svg
.selectAll("g")
.data(data)
.join("g")
.attr("class","planet-object")
.attr("data-book-title", d => d.book)
planets
.append("circle")
.attr("class", "planets")
.attr("data-book-title", d => d.book)
.attr("data-date", d => d.pub_date)
.attr("fill", "#fff")
.attr("fill-opacity", i => 0.7+ (Math.random()*0.3))
.attr("stroke", "#5C12A6")
.attr("stroke-width", 0.5)
.attr("stroke-opacity", 1)
.attr("r", d => z(d.nb_ratings))
.attr("cx", d => y(d.pub_date) * Math.cos(y(d.pub_date) * d.review_score/3 * step/50000 * Math.PI / data.length))
.attr("cy", d => y(d.pub_date) * Math.sin(y(d.pub_date) * d.review_score/3 * step/50000 * Math.PI / data.length))
planets
.append("text")
.attr("class", "text-book")
.style("visibility", (box!="toggle") ? "visible" : "hidden")
.style("font-style", "italic")
.attr("font-size", 8)
.attr("x", d => y(d.pub_date) * Math.cos(y(d.pub_date) * d.review_score/3 * step/50000 * Math.PI / data.length) + 10)
.attr("y", d => y(d.pub_date) * Math.sin(y(d.pub_date) * d.review_score/3 * step/50000 * Math.PI / data.length) + 10)
.attr("fill", "#fff")
.text(d => `${d.book}`)
planets
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
function rotating() {
step+=1
planets
.selectAll("circle.planets")
.attr("cx", d => y(d.pub_date) * Math.cos(y(d.pub_date) * d.review_score/3 * step/50000 * Math.PI / data.length))
.attr("cy", d => y(d.pub_date) * Math.sin(y(d.pub_date) * d.review_score/3 * step/50000 * Math.PI / data.length))
planets
.selectAll(".text-book")
.attr("x", d => y(d.pub_date) * Math.cos(y(d.pub_date) * d.review_score/3 * step/50000 * Math.PI / data.length) + 10)
.attr("y", d => y(d.pub_date) * Math.sin(y(d.pub_date) * d.review_score/3 * step/50000 * Math.PI / data.length) + 10)
}
setInterval(rotating, 10);
svg.append("g")
.call(yAxis);
return svg.node();
}
// Scale to measure the distance from the center
y = d3.scaleLinear()
.domain([d3.min(data, d => d.pub_date), d3.max(data, d => d.pub_date)])
.range([innerRadius, outerRadius - 30])
// Scale to measure the size of a planet
z = d3.scaleLinear()
.domain([d3.min(data, d => d.nb_ratings), d3.max(data, d => d.nb_ratings)])
.range([3,30])
yAxis = g => g
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.call(g => g.selectAll("g")
.data(y.ticks(data.length).reverse())
.join("g")
.attr("fill", "none")
.call(g => g.append("circle")
.attr("stroke", "#F2E205")
.attr("stroke-width", (d,i) => Math.random())
.attr("stroke-opacity", (d,i) => Math.random())
.attr("r", y))
.call(g => g.append("text")
.attr("y", d => y(d))
.attr("dy", "0.35em")
.attr("stroke", "#000")
.attr("stroke-width", 2)
// displaying 3 arbitrary dates
.text((x,d) => (d === 1 || d === 10 || d === 20) ? x : "")
.clone(true)
.attr("fill", "#fff")
.attr("stroke", "none"))
)
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.
