Communication Systems Workshop : Communicating Uncertain FuturesWeek 3: Instructional ImageryZach's Sol Lewitt ChallengeWeek 4 : Intro to Javascript for VisualizationZach's Hello World Map ChallengeWeek 5 : Intro to D3 and Data SynthesisLanguage Scatter PlotWeek 6 : D3 Data Binding/JoiningCoding Challenge: Butterfly ChartWeek 7 : Animation and InteractivityCoding Challenge: 2D HeatmapBirth HeatmapCity RacersBrain.js Simple Example to Predict Color LightnessCensus Migration Data ExerciseEvents ExampleCommunicating Uncertain FuturesData Journal Entry 1 · Data Detective WorkData Journal Entry 2 · Data ExplorationSimple GeoJSON Custom MapLine Chart ExampleData Journal Entry 3 · Data Time-KeepingData Journal Entry 4 · Data ArrangersData Journal Entry 5 · Summary and Wishlist
Creative Professions by State Butterfly Chart
{
//create svg
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", backgroundColor);
//loop through architects - though it does not really matter which is chosen since they have the same length
for (let i = 0; i < leftData.length; i++) {
const leftState = leftData[i];
const rightState = rightData[i];
//right side bars
svg
.append("rect")
.attr("width", barWidthScale(rightState[dataKey]))
.attr("height", barHeight)
.attr("x", width / 2 + innerMargin / 2)
.attr("y", i * barHeight + margin)
.attr(
"fill",
d3.interpolateOranges(1 - rightColorScale(rightState[dataKey]))
)
.attr("stroke", "white")
.attr("stroke-width", 2);
//left side bars
svg
.append("rect")
.attr("width", barWidthScale(leftState[dataKey]))
.attr("height", barHeight)
.attr(
"x",
width / 2 - barWidthScale(leftState[dataKey]) - innerMargin / 2
)
.attr("y", i * barHeight + margin)
.attr(
"fill",
d3.interpolatePurples(1 - leftColorScale(leftState[dataKey]))
)
.attr("stroke", "white")
.attr("stroke-width", 2);
//middle text labels
svg
.append("text")
.text(leftData[i].abbreviation)
.attr("x", width / 2)
.attr("y", i * barHeight + margin + barHeight / 2)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("fill", "white")
.attr("font-family", "courier");
}
//left label
svg
.append("text")
.text(leftCreatorType + " : " + leftRacialCategory)
.attr("x", margin / 2)
.attr("y", height / 2)
.attr("fill", "white")
.attr("font-family", "courier")
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
.attr("transform", `rotate(-90 ${margin / 2} ${height / 2} )`);
//right label
svg
.append("text")
.text(rightCreatorType + " : " + rightRacialCategory)
.attr("x", width - margin / 2)
.attr("y", height / 2)
.attr("fill", "white")
.attr("font-family", "courier")
.attr("text-anchor", "end")
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
.attr("transform", `rotate(90 ${width - margin / 2} ${height / 2} )`);
//title
svg
.append("text")
.attr("x", width / 2)
.attr("y", margin / 2)
.text(
`${leftCreatorType} (${leftRacialCategory}) Compared with ${rightCreatorType} (${rightRacialCategory}) | ${dataMode}`
)
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("font-family", "courier");
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.
