Published
Edited
Oct 6, 2022
Butterfly Coding Challenge
allDancers = FileAttachment("Table2hDancers.xlsx").xlsx()
allMusicians = FileAttachment("Table2iMusicians.xlsx").xlsx()
// fetch Black artists sheet
blackDancers = allDancers.sheet("Black-African-American")
blackMusicians = allMusicians.sheet("Black-African-American")
blackDancers[3]
blackMusicians[3]
blackDancerData = blackDancers
.slice(6)
.filter((d) => d.A)
.map((s) => ({
state: s.A,
abbreviation: stateLabels.find((d) => d.name == s.A),
allWorkers: s.B,
creatorCount: s.C,
creatorPercentage: s.C / s.B,
creatorLabel: "BlackDancers"
}))
blackMusicianData = blackMusicians
.slice(6)
.filter((d) => d.A)
.map((s) => ({
state: s.A,
abbreviation: stateLabels.find((d) => d.name == s.A),
allWorkers: s.B,
creatorCount: s.C,
creatorPercentage: s.C / s.B,
creatorLabel: "BlackMusicians"
}))
allBlackCreatorsData = blackDancerData.concat(blackMusicianData)
Inputs.table(allBlackCreatorsData)
minMax = d3.extent(allBlackCreatorsData,d=>d.creatorCount)
widthScale = d3
.scalePow()
.exponent(power)
.domain(minMax)
.range([0, width / 2 - margin])
height = 600
viewof power = Inputs.range([0, 2], { label: "power", step: ".01" })
viewof margin = Inputs.range([0,100],{label:"margin"})
barHeight = (height - margin * 2) / blackMusicianData.length
widthScale(1700)
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height);
const baground = svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#AAAAAA");
// const frame = svg
// .append("rect")
// .attr("width", 50)
// .attr("height", 1400)
// .attr("x", 475)
// .attr("y", 100)
// .attr("fill", "none")
// .attr("stroke-width", 3)
// .attr("stroke", "#FF0000");
//determining extents for black musicians and dancers
//const blackDancerMin = d3.min(blackDancerData, (d) => d.creatorCount);
//const blackDancerMax = d3.max(blackDancerData, (d) => d.creatorCount);
//looping through the first half of the dataset for Dancers
for (let i = 0; i < blackMusicianData.length; i++) {
//draw labels
svg
.append("text")
.attr("x", width/2)
.attr("y", i*barHeight + margin)
.style("font-family", "Nunito")
.style("font-size", 10)
.style("text-anchor", "middle")
.style("alignment-baseline", "hanging")
.style("fill", "white")
.text(blackMusicianData[i].abbreviation.abbreviation);
//bars for musicians
svg
.append("rect")
.attr("width", widthScale(blackMusicianData[i].creatorCount))
.attr("height", barHeight)
.attr("x", width/2)
.attr("y", i*barHeight + margin)
.attr("fill", "none")
.attr("stroke-width", 3)
.attr("stroke", "#FF0000");
//bars for dancers & choreogrpahers
svg
.append("rect")
.attr("width", widthScale(blackDancerData[i].creatorCount))
.attr("height", barHeight)
.attr("x", width/2 - widthScale(blackDancerData[i].creatorCount))
.attr("y", i*barHeight + margin)
.attr("fill", "none")
.attr("stroke-width", 3)
.attr("stroke", "#FF0000");
}
return svg.node();
}
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.
