💻 Developer / software architect.
📢 Frequent speaker.
🎨 Occasional designer.
🍸 Mediocre bartender.
Published
Edited
May 4, 2020
1 fork
3 stars
chart.update(emojis)
emote = id => `https://static-cdn.jtvnw.net/emoticons/v1/${id}/2.0`;
import { chart, textTween, barSize, n, x, y, formatNumber, emojis as TwitterEmojis } with { imageLabels as labels } from '@mbostock/twitter-emoji-race'
function imageLabels(svg) {
let label = svg.append("g")
.attr("font-weight", "bold")
.attr("font-size", barSize * 0.6)
.attr("font-family", "sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji")
.attr("text-anchor", "end")
.selectAll("text");
return (data, transition) => label = label
.data(data.slice(-n).reverse(), ([name]) => name)
.join(
enter => enter.append("image")
.attr("href", ([name]) => emote(name))
.attr("width", "30px")
.attr("height", "30px")
.attr("transform", ([, value]) => `translate(${x(value)},${y(n)})`)
.attr("y", y.bandwidth() / 2 - 15)
.attr("x", -50),
update => update,
exit => exit.transition(transition).remove()
.attr("transform", ([, value]) => `translate(${x(value)},${y(n)})`)
)
.call(bar => bar.transition(transition)
.attr("transform", ([, value], i) => `translate(${x(value)},${y(i)})`)
.call(g => g.select("tspan").tween("text", function([, value]) { return textTween(+this.textContent.replace(/,/g, ""), value); })));
}
socket = Generators.observe(notify => {
const socket = new WebSocket(url);
socket.onopen = () => {
notify(socket);
}
socket.onclose = () => {
notify(null);
}
return () => {
socket.close();
}
})
url = "wss://limitless-lake-36433.herokuapp.com/jlengstorf"
d3 = require('d3')
EmojiData = require('https://bundle.run/emoji-data@0.2.0')
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.
