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 ExerciseEvents ExampleCommunicating Uncertain FuturesData Journal Entry 1 · Data Detective WorkData Journal Entry 2 · Data ExplorationSimple GeoJSON Custom MapData Journal Entry 3 · Data Time-KeepingData Journal Entry 4 · Data ArrangersData Journal Entry 5 · Summary and Wishlist
Line Chart Example
years = d3.range(2015, 2020)
//wait for everything to finish
rawCensusData = Promise.all(
//going each year one-by-one
years.map(
//go through each year in order
async (year) =>
//call census API
await d3.json(
"https://api.census.gov/data/" +
year +
"/acs/acs1?get=NAME,B28002_004E,B28002_001E&for=state:*"
)
)
)
cleanedData = rawCensusData.map((censusYear, i) =>
//remove the header row, and then iterate over all states
censusYear.slice(1).map((state) => ({
name: state[0],
internetHouseholds: parseInt(state[1]),
totalHouseholds: parseInt(state[2]),
internetPercentage: parseInt(state[1]) / parseInt(state[2]),
year: new Date(years[i], 0)
}))
)
states = cleanedData[0].map((state) => state.name)
//work through all the states
transposedData = states.map((state) =>
//work through each year, and find the correct state inside of it
cleanedData.map((year) => year.find((yearState) => yearState.name === state))
)
yearObjects = years.map((year) => new Date(year, 0))
xScale = d3
.scaleTime()
.domain(d3.extent(yearObjects))
.range([margin.left, width - margin.right])
xAxis = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale))
yScale = d3
.scaleLinear()
.domain(d3.extent(transposedData.flat(Infinity), (d) => d.internetPercentage))
.nice()
.range([height - margin.bottom, margin.top])
yAxis = (g) =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(yScale))
height = 600
margin = ({ top: 20, right: 20, bottom: 30, left: 80 })
lineGen = d3
.line()
.x((d) => xScale(d.year))
.y((d) => yScale(d.internetPercentage))
chart = {
// Create an empty SVG with specified width and height.
const svg = d3.create("svg").attr("width", width).attr("height", height);
// Draw the x and y axes.
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
// Draw the line.
transposedData.map((state) => {
svg
.append("path")
.datum(state)
.attr("d", lineGen)
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-width", 0.5);
});
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.
