Published
Edited
Jul 15, 2021
1 fork
Importers
2 stars
md`# Emoji Chart for Daily Weather Polls`
emoji_chart = {
const svg = d3
.create("svg")
.attr('width', width)
.attr('height', 1150)
const g = svg.append('g')
const polls = g.selectAll('.radarChart')
.data(pollData)
.join('g')
.attr('class', 'radarChart')
.attr('transform', (d,i) => `translate(${i%7 * width/7}, ${Math.floor(i/7) * width/7})`)
polls.selectAll('text')
.data(d=> d.polls.reduce((init, item) => init.concat(Array(item.voters).fill(item.text)),[]))
.join('text')
.attr('x', (d, i)=> i %5 * 25)
.attr('y', (d, i)=> Math.floor(i/5) * 25 + 20)
.text(d => d)
return svg.node()
}
width =1200
treemapSize = 120
chart = {
const svg = d3
.create("svg")
.attr('viewBox', [0, 0, width, width]);
const g = svg.append('g')
// .attr('transform', `translate(${width/14}, ${width/14})`)
const polls = g.selectAll('.treemap')
.data(pollData)
.join('g')
.attr('class', 'treemap')
.attr('transform', (d,i) => `translate(${i%7 * width/7}, ${Math.floor(i/7) * width/7})`)
const getLeaves = (d) => {
const data = {name: 'emoji', children: d.polls};
const root = d3.hierarchy(data)
.sum(d => d.voters)
.sort((a, b) => b.voters - a.voters);
return treemap(root).leaves()
}
const leaf = polls.selectAll("g")
.data(d => getLeaves(d))
.join("g")
.attr("transform", d => {
console.log(d)
return `translate(${d.x0},${d.y0})`
});
leaf
.append("rect")
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.attr("fill", (d,i) => colorList[i])
// .attr("fill-opacity", 0.5);
return svg.node();
}
// unit_chart = {
// const svg = d3
// .create("svg")
// .attr('width', width)
// .attr('height', height)
// const g = svg.append('g')
// const polls = g.selectAll('.radarChart')
// .data(pollData)
// .join('g')
// .attr('class', 'radarChart')
// .attr('transform', (d,i) => `translate(${i%7 * width/7}, ${Math.floor(i/7) * width/7})`)
// const poll= polls.selectAll('g')
// .data(d=> d.polls)
// .join('g')
// .attr('transform', (d,i) => `translate(${ i * 25}, 0)`)
// poll.append('rect')
// .attr('width', d => d.voters * 8)
// .attr('height',d => d.voters * 8)
// .attr('fill', (d,i) => colorScale(i))
// .attr('fill-opacity', 0.5)
// return svg.node();
// }
colorList = ['#fe938c', '#e6b89c', '#ead2ac', '#9cafb7', '#4281a4']
// colorScale = d3.scaleSequential([0,4], d3[`interpolate${interpolatorSelect}`])
colorScale = d3.scaleLinear()
.domain([4,0])
.range(colorRange)
.interpolate(d3.interpolateLab)
treemap = d3
.treemap()
.tile(d3.treemapSquarify)
.size([treemapSize, treemapSize])
.padding(1);
// .round(true)
md`# Data`
weathers_raw = ['🌅','☀️','⛅','🌥','🌦️','🌧️','🌪️','🏝','🏞️','📈','🏖','❄️']
weathers = ['☀️','⛅','🌦️','🌧️','🌪️']
pollData = poll.map(d => ({
date: parseDate(d.date.slice(0,10)),
total: d.poll.total_voters,
mostChose: d3.max(d.poll.answers.map(d => d.voters)),
polls: d.poll.answers.map((item, i) => ({...item, text: weathers[i], category: i, mostchose: item.voters === d3.max(d.poll.answers.map(d => d.voters))})),
chosen: d.poll.answers.findIndex(d => d.chosen == true) > -1 ? d.poll.answers.findIndex(d => d.chosen == true): 0
})).slice(1,64)
parseDate = d3.timeParse("%Y-%m-%d");
import {select} from "@jashkenas/inputs"
d3 = require("d3@6")
md`# Reference
https://observablehq.com/@codingwithfire/emoji-treemap-small-multiples
`
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.
