IIT Institute of Design Data Viz Workshop IntroductionWeek 1 : Programmatic ImagesWeek 2 : Intro to Javascript for VisualizationWeek 2 Homework ChallengesWeek 3 : Intro to D3 and Data SynthesisWeek 4 : D3 Data JoiningWeek 5 : Animation and InteractivityWeek 6 : Animation and Interactivity ContinuedWeek 5-6 Challenge CodeWeek 8: Cellular Automata and Conway's Game of LifeProject BriefCity Transit SimINC5000 Stacked Area ChartDelaunay TrianglesLime Bike Status
Two SVG Areas
chart = {
let totalWidth = 800;
let totalHeight = 400;
let width = totalWidth / 2;
let height = totalHeight;
let svg = d3
.create("svg")
.attr("width", totalWidth)
.attr("height", totalHeight);
let leftG = svg.append('g').attr('id', "leftG");
let rightG = svg
.append('g')
.attr('id', "rightG")
//magic line - shift all geometry over by half of the artboard
.attr('transform', 'translate(' + width + ',0)');
leftG
.append("rect")
.attr('x', 0)
.attr('y', 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "blue");
rightG
.append("rect")
.attr('x', 0)
.attr('y', 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "cyan");
let data = [];
for (let i = 0; i < 50; i++) {
data.push({ x: Math.random() * width, y: Math.random() * height });
}
leftG
.selectAll("leftPoints")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 5)
.attr("fill", "cyan")
.attr('id', (d, i) => "point" + i)
.attr('class', 'leftPoints')
.attr('stroke', 'white')
.attr('stroke-width', 0)
.on('mouseover', function(d, i) {
d3.select(this)
.transition()
.attr('stroke-width', 3);
rightG
.select("#point" + i)
.transition()
.attr('stroke-width', 3);
})
.on('mouseout', function(d, i) {
d3.select(this)
.transition()
.attr('stroke-width', 0);
rightG
.select("#point" + i)
.transition()
.attr('stroke-width', 0);
});
rightG
.selectAll("rightPoints")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 5)
.attr("fill", "blue")
.attr('id', (d, i) => "point" + i)
.attr('class', 'rightPoints')
.attr('stroke', 'white')
.attr('stroke-width', 0)
.on('mouseover', function(d, i) {
d3.select(this)
.transition()
.attr('stroke-width', 3);
leftG
.select("#point" + i)
.transition()
.attr('stroke-width', 3);
})
.on('mouseout', function(d, i) {
d3.select(this)
.transition()
.attr('stroke-width', 0);
leftG
.select("#point" + i)
.transition()
.attr('stroke-width', 0);
});
return svg.node();
}
d3 = require("d3@5.0")
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.
