Week 2: Data-Driven ImageryZach's Sol Lewitt ChallengeWeek 3 : Intro to Javascript for VisualizationZach's Hello World Map ChallengeZach's 2x2 ExampleWeek 5 : Data Access and APIsWeek 6 : D3 Scales, Statistics, and ChartsLanguage Scatter PlotCoding Challenge: 2D HeatmapBirth HeatmapData JoiningEvents, Animation, and InteractivityWorking with Geo Data
Week 4: Data Capture and Interactivity
greetings = "Hello World"
studentsInClass = 16
alphabeticalStateArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut"
//...
]
alphabeticalStateArray[2]
illinois = ({
joinedUnionOrder: 21,
joinedUnionYear: 1818,
fipsCode: 17,
postalAbbreviation: "IL"
})
viewof interactiveSlider = Inputs.range([0, 25], {
label: "Slide!",
step: 0.1,
value: 10
})
interactiveSlider
Inputs
viewof minSlider = Inputs.range([0, 100], {
label: "Slider Minimum",
step: 1,
value: 20
})
viewof maxSlider = Inputs.range([0, 100], {
label: "Slider Maximum",
step: 1,
value: 80
})
viewof dynamicSlider = Inputs.range([minSlider, maxSlider], {
label: "Dynamic Slider",
step: 1
})
viewof aLength = Inputs.range([0, 100], {
label: "A Length",
step: 0.01,
value: 80
})
viewof bLength = Inputs.range([0, 100], {
label: "B Length",
step: 0.01,
value: 50
})
Pythagoras says that a triangle with one side measuring ${aLength} and another side measuring ${bLength} has a hypotenuse measuring ${(Math.sqrt(aLength**2 + bLength**2)).toFixed(2)}. This was calculated by first summing ${aLength}<sup>2</sup> and ${bLength}<sup>2</sup>, which is ${(aLength**2 + bLength **2 ).toFixed()}, and then taking the square root.
{
const margin = 50;
const size = 100 + margin * 2;
const svg = d3.create("svg").attr("width", size).attr("height", size);
svg
.append("line")
.attr("x1", margin)
.attr("y1", size - margin)
.attr("x2", aLength + margin)
.attr("y2", size - margin)
.attr("stroke", "red");
svg
.append("text")
.text("a = " + aLength)
.attr("x", aLength / 2 + margin)
.attr("y", size - margin + 10)
.attr("dominant-baseline", "hanging")
.attr("text-anchor", "middle")
.attr("font-style", "italic")
.attr("font-size", 12);
svg
.append("line")
.attr("x1", aLength + margin)
.attr("y1", size - margin)
.attr("x2", aLength + margin)
.attr("y2", size - margin - bLength)
.attr("stroke", "blue");
svg
.append("text")
.text("b = " + bLength)
.attr("dominant-baseline", "middle")
.attr("x", aLength + margin + 10)
.attr("y", size - margin - bLength / 2)
.attr("font-style", "italic")
.attr("font-size", 12);
svg
.append("line")
.attr("x1", margin)
.attr("y1", size - margin)
.attr("x2", aLength + margin)
.attr("y2", size - margin - bLength)
.attr("stroke", "green");
svg
.append("text")
.text("c = " + Math.sqrt(aLength ** 2 + bLength ** 2).toFixed(2))
.attr("text-anchor", "end")
.attr("x", aLength / 2 + margin - 10)
.attr("y", size - margin - bLength / 2 - 10)
.attr("font-style", "italic")
.attr("font-size", 12);
return svg.node();
}
viewof markdownSlider = Inputs.range([0, 25], {
label: "Markdown Slider",
step: 0.001,
value: 10
})
The slider above reads ${markdownSlider}. This value with two decimal places, ${markdownSlider.toFixed(3)} is ${markdownSlider >= 12.5 ? "**larger than or equal to**" : "**smaller than**"} 12.500.
markdownSlider < 12.5 ? "📉" : "📈"
viewof svgSlider = Inputs.range([0, 25], {
label: "SVG Slider",
step: 0.1,
value: 10
})
<svg height="100" width=${width}>
<rect height="100" width=${width} fill="#490a3d"/>
<circle cx=${width/4} cy=${100/2} r="${25 - svgSlider}" fill="#e97f02" stroke="#f8ca00" stroke-width="4"/>
<circle cx=${width/2} cy=${100/2} r="${svgSlider}" fill="#bd1550" stroke="#f8ca00" stroke-width="4"/>
<circle cx=${width*3/4} cy=${100/2} r="${25 - svgSlider}" fill="#e97f02" stroke="#f8ca00" stroke-width="4"/>
</svg>
viewof jsSlider = Inputs.range([0, 100], {
label: "JS Slider",
step: 1,
value: 25
})
{
const height = 100;
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#6d819c");
for (let i = 0; i < jsSlider; i++) {
//this looks complicated, but it's just dividing the width of the SVG into evenly spaced parts
let spacing = (width / (jsSlider - 1)) * i;
let size = (50 / jsSlider) * i;
svg
.append("circle")
.attr("cx", spacing)
.attr("cy", height / 2)
.attr("r", size + 1)
.attr("fill", "hsl(" + (360 / jsSlider) * i + ",100%,50%)");
}
return svg.node();
}
viewof toggleValue = Inputs.toggle({ label: "True or False?", value: true })
toggleValue
viewof rangeValue = Inputs.range([0, 100], {
label: "Slide!",
value: 1,
step: 5
})
rangeValue
viewof colorValue = Inputs.color({ label: "Favorite Color?", value: "#FF00FF" })
colorValue
viewof textValue = Inputs.text({
label: "Type",
placeholder: "write something!"
})
textValue
viewof dateValue = Inputs.date({
label: "When is your Birthday?"
//instead of "now", you could pass in strings like "September 15, 2024" and JS will try to create a date
//be careful though, the format parsing will depend on browser and computer preferences!
})
dateValue
viewof dropdownValue = Inputs.select(
["Cats", "Dogs", "Rabbits", "Ferrets", "Birds", "Lizards", "Frogs"],
{ label: "Favorite Pet?", value: "Rabbits" }
)
dropdownValue
viewof checkboxValue = Inputs.checkbox(
["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet"],
{
label: "Choose some colors!",
value: ["Green", "Indigo"]
}
)
checkboxValue
viewof radioValue = Inputs.radio(
["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet"],
{
label: "Choose a single color!",
value: "Orange"
}
)
radioValue
viewof tableValue = Inputs.table([
{
Country: "India",
"Population 2024": "1441719852",
"Density (/km2)": "485.0",
"Growth Rate": "0.0092",
"World %": "0.1801"
},
{
Country: "China",
"Population 2024": "1425178782",
"Density (/km2)": "151.0",
"Growth Rate": "-0.0003",
"World %": "0.178"
},
{
Country: "United States",
"Population 2024": "341814420",
"Density (/km2)": "37.0",
"Growth Rate": "0.0053",
"World %": "0.0427"
},
{
Country: "Indonesia",
"Population 2024": "279798049",
"Density (/km2)": "149.0",
"Growth Rate": "0.0082",
"World %": "0.035"
},
{
Country: "Pakistan",
"Population 2024": "245209815",
"Density (/km2)": "318.0",
"Growth Rate": "0.0196",
"World %": "0.0306"
}
])
countries = [
{
Country: "India",
"Population 2024": "1441719852",
"Density (/km2)": "485.0",
"Growth Rate": "0.0092",
"World %": "0.1801"
},
{
Country: "China",
"Population 2024": "1425178782",
"Density (/km2)": "151.0",
"Growth Rate": "-0.0003",
"World %": "0.178"
},
{
Country: "United States",
"Population 2024": "341814420",
"Density (/km2)": "37.0",
"Growth Rate": "0.0053",
"World %": "0.0427"
},
{
Country: "Indonesia",
"Population 2024": "279798049",
"Density (/km2)": "149.0",
"Growth Rate": "0.0082",
"World %": "0.035"
},
{
Country: "Pakistan",
"Population 2024": "245209815",
"Density (/km2)": "318.0",
"Growth Rate": "0.0196",
"World %": "0.0306"
}
]
import { worldMapCoordinates } from "@jashkenas/inputs"
viewof geoValue = worldMapCoordinates([-87.62, 41.87])
geoValue
viewof hsl = Inputs.form({
h: Inputs.range([0, 360], { step: 1, label: "Hue", value: 200 }),
s: Inputs.range([0, 100], { step: 1, label: "Saturation", value: 100 }),
l: Inputs.range([0, 100], { step: 1, label: "Lightness", value: 50 })
})
hsl
<svg height="100" width="100">
<rect height="100" width="100" fill="hsl(${hsl.h},${hsl.s}%,${hsl.l}%)"/>
</svg>
{
const height = 200;
const svg = d3.create("svg").attr("width", width).attr("height", 200);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", backgroundColor);
svg
.append("line")
.attr("x1", margin)
.attr("y1", margin)
.attr("x2", width - margin)
.attr("y2", height - margin)
.attr("stroke", "white")
.attr("stroke-width", strokeWidth);
svg
.append("text")
.attr("x", width / 2)
.attr("y", margin)
.attr("fill", "white")
.text("Example Text")
.attr("dominant-baseline", "middle")
.attr("text-anchor", "start")
.attr("font-family", fontFamily)
.attr("font-size", 18);
svg
.append("circle")
//remember that x is a percentage slider above
.attr("cx", x * width)
//and y is a pixel value, so no additional calculation needed
.attr("cy", y)
.attr("r", 15)
.attr("stroke", "white")
.attr("fill", circleColor)
.attr("stroke-width", strokeWidth);
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.
