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 ChartCreative Professions by State Butterfly ChartWeek 7 : Animation and InteractivityCoding Challenge: 2D HeatmapBirth HeatmapCity RacersBrain.js Simple Example to Predict Color LightnessCensus Migration Data ExerciseCommunicating 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
Events Example
height = 200
circleData = [
{
startSize: 30,
endSize: 60,
startFill: "orange",
endFill: "lime",
x: width / 3,
backgroundColor: "steelblue"
},
{
startSize: 80,
endSize: 40,
startFill: "magenta",
endFill: "cyan",
x: width / 2,
backgroundColor: "#cda"
},
{
startSize: 45,
endSize: 20,
startFill: "yellow",
endFill: "purple",
x: (width * 2) / 3,
backgroundColor: "teal"
}
]
{
//create SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);
//create svg background color
svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#002")
.attr("id", "background");
//create circle visualization
svg
.selectAll(".circles")
.data(circleData)
.enter()
.append("circle")
.attr("cx", (d) => d.x)
.attr("cy", height / 2)
.attr("r", (d) => d.startSize)
//take the line below out to see what happens if a property isn't set before animation
.attr("stroke-width", 0)
.attr("stroke", "white")
.attr("class", "circles")
.attr("fill", (d) => d.startFill)
.on("mouseover", (e, d) => {
d3.select(e.currentTarget)
.transition()
.duration(2000)
.ease(d3.easeBounceOut)
.attr("r", d.endSize)
.attr("fill", d.endFill)
.attr("stroke-width", 10);
d3.select("#background")
.transition()
.duration(1000)
.attr("fill", d.backgroundColor);
})
.on("mouseout", (e, d) => {
d3.select(e.currentTarget)
.transition()
.delay(500)
.duration(1500)
.attr("r", d.startSize)
.attr("stroke-width", "0")
.attr("fill", d.startFill);
d3.select("#background").transition().duration(1000).attr("fill", "#002");
});
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.
