Public
Edited
Mar 14, 2023
xMax = d3.max(xDomain)
// what prizes did the awarding institutions present?
data = [...d3.rollup(data_prize,
v=> v.length ,
d=> d.prize_institution,
d=> d.prize_name)].map(([k,v])=>([[k],Array.from(v)]))
newData = []
data.forEach((col1, idx) => modifyData(col1));
g_colors = ['#fdcdac','#99d594','#f1e2cc','#e6f598','#66c2a5','#cccccc','#fee08B','#ffffbf','e6f5c9','#f4cae4','#b3e2cd','#fdae61','#fc8d59','#abdda4','#fff2ae','#f46d43','#d7191c','#d53e4f','#cbd5e8','#2b83ba','#1f6088']
waffleData = newData.flatMap(d => d3.range(Math.round(d.value / 10) < 1 ?
Math.round(d.value / 10) :
Math.round(d.value / 10)).map(() => d))
waffleChart = {
let total = 16,
rectDim = {width : 12, height: 4},
rectVal = total/(rectDim.width * rectDim.height),
waffDim = {width : 10, height: 20},
gap = {horizontal:15, vertical: 10},
wafHeight = height *6.5,
data_ = [];
const wafDatRemap = (data) =>
{
let prevSource = null,
sourceCount = 0,
currentRow = 1,
currentCol = 1,
maxCols = 40;
data.forEach((d,i)=>{
if (prevSource === d.source){
sourceCount += 1
}
else{
sourceCount += 1
for (let index = 1; index < sourceCount+1; ++index) {
data_.push({
source : d.source,
prize_count: sourceCount,
value : d.value,
xPos : index < maxCols ? index : 1,
yPos : index < maxCols ? currentRow : currentRow + 1 < sourceCount ? currentRow += 1 : currentRow += 2
})
}
prevSource = d.source
sourceCount = 0
currentCol = 1
currentRow += 1
}
})
}//------------------------------------------------------------------------------------------------------------- fxn1✅
wafDatRemap(waffleData)
//console.log(waffleData,data_)
let wafColor = d3.scaleOrdinal()
.domain(data_)
.range(g_colors), //-------------------------------------------------------------------- color✅
container = d3.create('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', wafHeight)
.style('font-family', 'OpenSans')
.style('font-size', '.8rem')
.style('background-color','grey'),//-------------------------------------------------- container✅
waffle = container.append('g')
.attr('class','#waffleContainer')
.attr('transform',`translate(${margin.left},${margin.top*2+margin.bottom})`)
.attr('width',width)
.attr('height',wafHeight)
.append('g')
.selectAll('rect')
.data(data_)
.enter().append('rect')
.attr('width', rectDim.width)
.attr('height', rectDim.height)
.attr('fill',d => wafColor(d.source))
.attr('rx', 1)
.attr('ry', 10)
.attr('x',(d,i) => d.xPos*gap.horizontal)
.attr('y', (d,i) => d.yPos*gap.vertical),
yAxis = container.append('g')
.attr('class','#waffleContainer')
.attr('transform',`translate(-30,${margin.top*2+11+margin.bottom})`)
.attr('width',width)
.attr('height',wafHeight)
.append('g')
.selectAll('text')
.data(data_)
.enter().append('text')
.attr("font-family", "OpenSans")
.attr('font-size','15')
.attr('font-weight','200')
.attr('fill','#444444')
.attr('x',margin.left)
.attr('y', (d,i) => d.yPos*gap.vertical)
.text(d => d.value),//------------------------------------------------------------------- waffle✅
legend = container.append('g')
.attr('class','#legend')
.attr('transform',`translate(${width-3*(margin.right+margin.left+margin.left)}, ${wafHeight/6})`)
.attr('width', width)
.attr('height', wafHeight)
.append('g')
.selectAll('div')
.data(data_.map(d=>d.source).filter((value, index, array) => array.indexOf(value) === index))
.enter()
.append('g')
.attr('transform',(d,i)=> 'translate(20,'+i*(margin.top)+')'),
title = container.append('g')
.attr('class','#title')
.append('g')
.attr('transform','translate(100,0)'),
writeUp = container.append('g')
.attr('class','#write_up')
.attr('max-width',width/2)
.attr('max-height',wafHeight/2)
.attr('transform',`translate(${width/6},${wafHeight- margin.bottom})`),
conclusion = 'There are 16 institutions which award literary prizes. 17 prizes were awarded by Columbia university.'; //while a single prize was awarded by 5 other institutions.';
legend.append('rect')
.attr('width', rectDim.width)
.attr('height', rectDim.height)
.attr('rx', 1)
.attr('ry', 10)
.style('fill', (d,i)=>wafColor(i))
legend.append('text')
.attr('x',rectDim.width+5)
.attr('y',rectDim.height-1)
.text(d => d) //---------------------------------------------------------------------------------------- legend✅
title.append('text')
.attr('transform',`translate(${margin.left*4},${margin.top*2})`)
.attr("font-family", "OpenSans")
.attr('domainant-baseline','middle')
.text(' Prize awarding institutions')
.attr('font-size','30')
.attr('font-weight','600')
.attr('fill','#444444'); //------------------------------------------------------------------------------- title✅
/*writeUp.append('text')
.attr("font-family", "OpenSans")
.attr('domainant-baseline','middle')
.text(conclusion.split('.'))
.attr('font-size','15')
.attr('font-weight','300')
.attr('max-width',width/2)
.attr('max-height',wafHeight/2)
.attr('fill','#444444'); */
return container.node()
}
prize_years
institutions = [...new Set(prize_years.map(d => d.prize_institution))] //prize_years,prize
chart = streamgraph(institution_years,
{
x: d => d.year,
y: d => d.prize_count,
z: d => d.prize_institution,
yLabel: '↑ Number of prizes',
width : width,
height: height/2
})
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.
