Design/Code
Published
Edited
Feb 11, 2019
1 fork
43 stars
{
const container = html`<div></div>`
while (true) {
ReactDOM.render(
React.createElement(ReactD3, {data: randomData()}),
container
);
yield container;
await Promises.delay(1500);
}
}
useD3 = (fn) => {
const ref = React.useRef();
React.useEffect(() => {
fn(d3.select(ref.current));
});
return ref;
}
ReactD3 = ({data}) => {
// The useD3 hook gives us a ref that is turned into a d3 Selection
// (the first argument to useD3's callback function, here called `root`)
const ref = useD3(root => {
// Inside the callback function, we can use D3
root.selectAll("div")
.data(data, d => d)
.join(
enter => enter
.append("div")
.style("position", "absolute")
.style("transform", (d, i) => `translate(${i * 50}px,-50px)`)
.style("opacity", 0)
.style("font-size", "50px")
.style("line-height", 1)
.text(d => d),
update => update,
exit => exit
.call(exit =>
exit.transition()
.duration(1000)
.delay((d, i) => i * 100)
.style("transform", (d,i) => `translate(${i * 50}px,50px)`)
.style("opacity", 0)
.remove()
)
)
.transition()
.duration(1000)
.delay((d, i) => i * 100)
.style("transform", (d, i) => `translate(${i * 50}px,0px)`)
.style("opacity", 1);
});
// Don't forget to pass the `ref` prop to the React element which will act as the root element for our D3 hook
return React.createElement("div", {ref, style: {position: "relative", padding: 50, height: 50}});
}
function randomData() {
return d3.shuffle(["😀", "😙", "🤓", "😎", "😍", "🤩", "😴"])
.slice(0, Math.floor(2 + Math.random() * 5))
;
}
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.
