// modified by #SkyFi to use a function instead of in-lined code - the function allows the code to be shared
viewof choice = inputEmojiPicker()
sortedEmojis = sorted.map(d => d.Emoji)
sizeScale = d3
.scaleLog()
.domain(d3.extent(emojis, d => d.Occurrences))
.range([2, 64])
opacityScale = d3
.scaleLinear()
.domain(d3.extent(emojis, d => d.Occurrences))
.range([0.1, 1])
emojis = FileAttachment("Emoji_Sentiment_Data_v1.0.csv").csv({ typed: false })
emojisWithMoreData = emojis.map(e => {
e.descLength = e['Unicode name'].length;
e.descWords = e['Unicode name'].split(' ').length;
// e.topColors = topColors(e.Emoji);
return e;
})
//sorted = emojisWithMoreData.sort((a, b) => b.Occurrences - a.Occurrences)
sorted = emojis.sort((a, b) => a.descWords - b.descWords)
// chosen = ({
// // Emoji: "🙈"
// // Emoji: "😱"
// Emoji: "🍁"
// })
// //sorted[6]
// viewof chosen = Scrubber(emojisWithMoreData, {
// delay: 2500,
// autoplay: false,
// format: e => e.Emoji
// })
// chosen = ({ Emoji: "🔥" })
fontSize = 40
canvasSize = fontSize + 10
emojipixels = emojicanvas
.getContext("2d")
.getImageData(0, 0, canvasSize, canvasSize)
seedSize = 100
result = dominantColors(chosen)
topcolors = result.centroids
.filter(d => {
return d.variance && (d[0] < 253 && d[1] < 253 && d[2] < 253);
})
.map(d => {
return {
color: d,
value: d.points.length
};
})
.sort((a, b) => b.value - a.value)
// preprocessed = sorted.slice(0, 1000).map(d => {
// console.log(d.Emoji);
// return {
// ...d,
// topColors: dominantColors(d.Emoji)
// .centroids.filter(d => {
// return d.variance && (d[0] < 252 && d[1] < 252 && d[2] < 252);
// })
// .map(d => {
// return {
// color: d,
// value: d.points.length
// };
// })
// .sort((a, b) => b.value - a.value)
// };
// })
promises = files.map(file => file.json())
datasets = Promise.all(promises)
treemapWidth = 100
treemapHeight = 100
data = ({
name: "emojis",
children: topcolors
})
root = d3
.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
pixelSize = 10
reconstructed = {
let canvas = d3
.create("canvas")
.attr("width", canvasSize * pixelSize)
.attr("height", canvasSize * pixelSize)
.node();
// canvas.width = `${canvasSize}px`;
// canvas.height = `${canvasSize}px`;
let ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
// ctx.fillRect(0, 0, canvasSize, canvasSize);
let a = emojipixels.data;
for (let i = 0; i < emojipixels.data.length; i += 4) {
let x = ((i / 4) % canvasSize) * pixelSize;
let y = Math.floor(i / 4 / canvasSize) * pixelSize;
ctx.fillStyle = `rgba(${[a[i], a[i + 1], a[i + 2], a[i + 3]]})`;
ctx.fillRect(x, y, pixelSize - 2, pixelSize - 2);
}
return canvas;
}
function renderImageData(imageData) {
let canvas = d3
.create("canvas")
.attr("width", canvasSize * pixelSize)
.attr("height", canvasSize * pixelSize)
.node();
// canvas.width = `${canvasSize}px`;
// canvas.height = `${canvasSize}px`;
let ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
// ctx.fillRect(0, 0, canvasSize, canvasSize);
let a = imageData.data;
for (let i = 0; i < a.length; i += 4) {
let x = ((i / 4) % canvasSize) * pixelSize;
let y = Math.floor(i / 4 / canvasSize) * pixelSize;
ctx.fillStyle = `rgba(${[a[i], a[i + 1], a[i + 2], a[i + 3]]})`;
ctx.fillRect(x, y, pixelSize - 2, pixelSize - 2);
}
return canvas;
}
d3.extent(emojipixels.data)
d3.extent(emojis, d => d.Position)
Q5 = require("https://cdn.jsdelivr.net/gh/LingDong-/q5xjs/q5.min.js").catch(
() => window.Q5
)
import { Scrubber } from "@mbostock/scrubber"
inputEmojiPicker = (control) => {
let div = html`<div></div>`;
div.value = sorted[0];
d3.select(div)
.selectAll("div.emoji")
.data(sorted)
.join("div")
.classed("emoji", true)
// .style("font-size", d => sizeScale(d.Occurrences) + "px")
.style("font-size", "25px")
.style("display", "inline-block")
.style("cursor", "pointer")
.style("opacity", d => {
return opacityScale(d.Occurences);
})
.attr("title", d => d["Unicode name"])
.text(d => d.Emoji)
.on("click", (event, d) => {
div.value = d;
div.dispatchEvent(new CustomEvent("input", { bubbles: true }));
// THIS IS THE CODE THE UPDATES THE MAIN INPUT:
if (control) {
control.value += d["Emoji"]
control.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
});
return div;
}
viewof someInputText = Inputs.text({value: "👍"})
inputEmojiPicker(viewof someInputText)
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.
