Public
Edited
Feb 19
pcaPointSources = FileAttachment("MPCA_PointSourceAirEmissionsInventory2023.csv").csv({typed: true})
pcaPointSources
Type Table, then Shift-Enter. Ctrl-space for more options.
pcaPointSourcesCO2 = pcaPointSources;
// TODO: put your filter code here
states = FileAttachment("states-10m.json").json()
{
let projection = d3.geoAlbers().scale(4500).translate([28, 900]);
let path = d3.geoPath(projection);
let svg = d3.create('svg').attr('width', 480).attr('height', 640);
svg.append('svg:g')
.append("path")
.attr("d", path(topojson.mesh(states, states.objects.states)))
.attr('fill', 'none')
.attr('stroke', 'gray');
return svg.node();
}
testPoints
Type Table, then Shift-Enter. Ctrl-space for more options.
{
let projection = d3.geoAlbers().scale(4500).translate([28, 900]);
let path = d3.geoPath(projection);
let svg = d3.create('svg').attr('width', 480).attr('height', 640);
svg.append('svg:g')
.append("path")
.attr("d", path(topojson.mesh(states, states.objects.states)))
.attr('fill', 'none')
.attr('stroke', 'gray');
// Group to hold all the circles
let allCircles = svg.append('svg:g');
// TODO: add a bunch of circles using `testPoints` instead of just this one
// Delete the example when you've got the `testPoints` working.
allCircles.append('circle')
// move the circle to its location (projection() gives a list,
// and then join with ',' to make it a valid css transform)
.attr('transform', `translate(${projection([-93.1, 44.3]).join(',')})`)
.attr('r', 50)
.attr('opacity', 0.5);
svg.append(() => allCircles.node());
return svg.node();
}
{
let width = 480,
height = 640,
legendCircleRadius = 10,
legendSpacing = legendCircleRadius * 2.5,
legendX = 150,
legendY = 350,
legendWidth = 150;
let projection = d3.geoAlbers().scale(4500).translate([28, 900]);
let path = d3.geoPath(projection);
let svg = d3.create('svg').attr('width', width).attr('height', height);
svg.append('svg:g')
.append("path")
.attr("d", path(topojson.mesh(states, states.objects.states)))
.attr('fill', 'none')
.attr('stroke', 'gray');
let legendData = ['red', 'blue'];
// Create the legend - a group with a bunch of groups inside of it,
// each has a rectangle (background), a circle (color), and text (label)
let legendEntries = svg.append('svg:g')
.selectAll('g.legendRow')
.data(legendData)
.join('g')
.attr('transform', (d, i) => `translate(${width - legendX},${height - legendY + legendCircleRadius + i * legendSpacing})`);
legendEntries.append('rect')
.attr('x', -legendCircleRadius)
.attr('y', -legendCircleRadius)
.attr('width', legendWidth)
.attr('height', legendSpacing)
.attr('fill', 'white')
legendEntries.append('circle')
.attr('r', legendCircleRadius)
.attr('opacity', 0.5)
.attr('fill', d => d);
legendEntries.append('text')
.attr('x', legendCircleRadius * 2)
.attr('y', legendCircleRadius / 2)
.text(d => d);
return svg.node();
}
// TODO: Add your code here
{
let width = 300,
height = 200;
const ctx = DOM.context2d(width, height);
ctx.canvas.style.maxWidth = "100%";
ctx.fillStyle = "green";
// Add a rectangle at (20, 20) with size 200x100 pixels
ctx.fillRect(20, 20, 200, 100);
return ctx.canvas;
}
{
let width = 300,
height = 200,
pixWidth = 20,
pixHeight = 20;
let numRows = height / pixHeight,
numCols = width / pixWidth;
const ctx = DOM.context2d(width, height);
ctx.canvas.style.maxWidth = "100%";
let colorMap = d3.scaleSequential([0, numRows * numCols], d3.interpolateTurbo);
for (let r = 0; r < numRows; r++)
{
for (let c = 0; c < numCols; c++)
{
ctx.fillStyle = colorMap(r * c);
ctx.fillRect(pixWidth * c, pixHeight * r, pixWidth, pixHeight);
}
}
return ctx.canvas;
}
{
let width = 300,
height = 200;
// TODO: use dimensions to calculate!
let numRows = 10,
numCols = 10;
// TODO: use dimensions and width/height to calculate!
let pixWidth = 10,
pixHeight = 10;
const ctx = DOM.context2d(width, height);
ctx.canvas.style.maxWidth = "100%";
// TODO: don't hardcode the range (use d3.extent on the data)
let colorMap = d3.scaleSequential([0, 10], d3.interpolateTurbo);
for (let r = 0; r < numRows; r++)
{
for (let c = 0; c < numCols; c++)
{
// TODO: look up the data at [row, col]
// since it's a 1D array, you'll need to calculate the index as r * numCols + c
ctx.fillStyle = colorMap(r * c);
ctx.fillRect(pixWidth * c, pixHeight * r, pixWidth, pixHeight);
}
}
return ctx.canvas;
}
cylinder2dRaw = FileAttachment("cylinder2d-lasttimestep@5.vti").arrayBuffer();
cylinder2d = {
const vtiReader = vtkXMLImageDataReader.newInstance();
vtiReader.parseAsArrayBuffer(cylinder2dRaw);
return vtiReader.getOutputData(0);
}
{
return {
dimensions: cylinder2d.getDimensions(),
variables: cylinder2d.getPointData().getArrays().map(a => a.getName()),
}
}
cylinder2d.getPointData() // TODO: add your code here
{
const ctx = DOM.context2d(300, 200);
ctx.canvas.style.maxWidth = "100%";
// go to middle of page and scale so we can see
ctx.translate(150, 100);
ctx.scale(3, 3);
// Draw arrow tail
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(20, 0);
ctx.closePath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
// Draw arrow head
ctx.beginPath();
ctx.moveTo(25, 0);
ctx.lineTo(20, -5);
ctx.lineTo(20, 0);
ctx.lineTo(20, 5);
ctx.closePath();
ctx.fillStyle = 'black';
ctx.fill();
return ctx.canvas;
}
viewof arrowAngle = htl.html`<input type=range min="0", max="359", step="1">`
viewof arrowLength = htl.html`<input type=range min="0", max="25", step="1">`
{
const ctx = DOM.context2d(300, 200);
ctx.canvas.style.maxWidth = "100%";
// go to middle of page and scale so we can see
ctx.translate(150, 100);
ctx.scale(3, 3);
// TODO: add rotation
// Draw arrow tail
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(20, 0); // TODO: change length
ctx.closePath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
// Draw arrow head
ctx.beginPath();
ctx.moveTo(25, 0); // TODO: change length
ctx.lineTo(20, -5); // TODO: change length
ctx.lineTo(20, 0); // TODO: change length
ctx.lineTo(20, 5); // TODO: change length
ctx.closePath();
ctx.fillStyle = 'black';
ctx.fill();
return ctx.canvas;
}
{
const ctx = DOM.context2d(300, 200);
ctx.canvas.style.maxWidth = "100%";
let positions = [
[50, 20],
[100, 70],
[150, 150],
];
for (const pos of positions)
{
// TODO: use ctx.save() to avoid arrows clobbering each other
// TODO: go to the correct x,y coordinate for each position
ctx.translate(0, 0);
ctx.scale(3, 3);
// Draw arrow tail
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(20, 0);
ctx.closePath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
// Draw arrow head
ctx.beginPath();
ctx.moveTo(25, 0);
ctx.lineTo(20, -5);
ctx.lineTo(20, 0);
ctx.lineTo(20, 5);
ctx.closePath();
ctx.fillStyle = 'black';
ctx.fill();
// TODO: use ctx.restore to avoid arrows clobbering each other
}
return ctx.canvas;
}
// TODO: your code here
// TODO: your code here
import { setupInstructions, yourTurn } from '@carleton-cs-314-w25/utilities-w25'
vtkPolyData = import('https://cdn.skypack.dev/@kitware/vtk.js@32.9.1/Common/DataModel/PolyData')
vtkXMLImageDataReader = import('https://cdn.skypack.dev/@kitware/vtk.js@32.9.1/IO/XML/XMLImageDataReader');
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.
