UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
// Randomly pick numbers between 0 and 1
random_values = _.range(10000).map(d => Math.random())
// Require a library for generating simplex noise
SimplexNoise = require('simplex-noise@2.4')
// Create a new instance of our simplex noise object
simplex = new SimplexNoise()
svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="black"></rect>
<g>
${_.range(num_rects)
.map(i => {
const angle = (Math.PI * 2 * i) / num_rects;
const mag = w / 4 + 70;
const size = 50;
const pos = PVector((w - size) / 2, (h - size) / 2).add(
PVector()
.setMag(mag)
.rotateBy(angle)
);
return `<rect
width="${size}"
height="${size}"
stroke="white"
fill="none"
transform="translate(${pos.x},${pos.y})"
/>`;
})
.join('\n')}
</g>
</svg>`
svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="black"></rect>
<g>
${_.range(num_rects).map(i => {
const angle = (Math.PI * 2 * i) / num_rects;
const mag = w / 4 + 70;
const pos = PVector((w - 50) / 2, (h - 50) / 2).add(
PVector()
.setMag(mag)
.rotateBy(angle)
);
const size = 75 * Math.abs(simplex.noise2D(pos.x / 500, pos.y / 500));
return `<rect
width="${size}"
height="${size}"
stroke="white"
fill="none"
transform="translate(${pos.x},${pos.y})"
/>`;
})}
</g>
</svg>`
iterator = now
loop = Math.sin(now / 1000) * 100
roses = await FileAttachment("roses.jpg").url()
html`<img id="roses" src=${roses} />`
img_points = {
// Render as canvas to sample the colors
const img = document.querySelector("#roses");
img.src = roses;
img.crossOrigin = "Anonymous";
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
return svg`<svg height=${img.height} width=${width}>${_.range(1000).map(d => {
const x = Math.random() * width;
const y = Math.random() * img.height;
const rgb_color = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
const color = `rgb(${rgb_color[0]},${rgb_color[1]},${rgb_color[2]})`;
return `<circle cx=${x} cy=${y} fill=${color} r=10 />`;
})}
</svg>`;
}
animated_img_points = {
// Render as canvas to sample the colors
const img = document.querySelector("#roses");
img.src = roses;
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const max_radius = 50;
const min_radius = 2;
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
return svg`<svg height=${img.height} width=${width}>${positions.map(
(d, i) => {
const r = Math.abs(loop - i) % 100;
const rgb_color = canvas.getContext('2d').getImageData(d.x, d.y, 1, 1)
.data;
const color = `rgb(${rgb_color[0]},${rgb_color[1]},${rgb_color[2]})`;
return `<circle cx=${d.x} cy=${d.y} fill=${color} r=${r} />`;
}
)}
</svg>`;
}
// Positions for the above points
positions = {
const img = await document.querySelector("#roses");
return _.range(100).map(d => ({
x: Math.random() * width,
y: Math.random() * img.height
}));
}
_ = require("lodash")
// Assigning a label to use with the imported histogram function
rv = Object.assign(random_values, {
y: "Number of Observations"
})
import { slider } from "@jashkenas/inputs"
import { chart as histogram } with { rv as data } from "@d3/histogram"
import { code_styles, displayCaution } from "@info474/utilities"
PVector = require('https://bundle.run/pvectorjs@1.2.0')
w = 500
num_rects = 200
h = 500
code_styles
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.
