Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Part 1: OverviewPart 3: Foundations PracticePart 4: Noise and AnimationPart 5: Building Tools
Part 2: Observable + SVG Basics
// Create a globally scoped "city" of the city you are currently in
city = "Toronto"
md`I'm currently in ${city}.`
import {slider} from "@jashkenas/inputs"
// Here's an example of storing a *value* in a variable created by a slider:
viewof slider_value = slider({
min: 0,
max: 100,
step: 1,
value: 10,
title: "Slider Title",
description: "Description of the slider"
})
md`You can reference the value of the slider in a template literal using this syntax (note the automatic updates!): ${slider_value}`
// Load the lodash library
_ = require("lodash")
// Create an array from 0 to 10 using the range function
_.range(10)
// Load a file that has been uploaded to this notebook
sample_img = await FileAttachment("molnar.jpg").url()
// Display the image
md`<figure>
<img src="${sample_img}">
<figcaption>_Structure de Quadrilatères_, Vera Molnár. [Source](https://www.artsy.net/artwork/vera-molnar-structure-de-quadrilateres-14)</figcaption>
</figure>`
svg`
<svg height=300 width=${width}>
<rect x=10 y=10 width=30 height=40 />
<line x1=40 x2=100 y1=50 y2=100 stroke="green" />
<circle r=10 cx=100 cy=100 />
<text x=80 y=40 font-size="30" text-anchor="middle" fill="red">Text</text>
<polyline transform="translate(140,30)" fill="transparent" stroke-width="1" stroke="black"
points="${line_path}"/>
<path>
</svg>
`
// Create a string to describe the line path for the polyline above
line_path = _.range(400)
.map(d => `${d}, ${Math.cos(d / 10) * 20}`)
.join(' ')
concentric
svg`<svg width = ${width} height = ${320}>
<g transform="translate(${width / 2}, 150)">
${_.range(num_circles).map(
d =>
svg`<circle cx=10 cy=10 r=${10 + d * 6} stroke="black" opacity="${1 -
d / num_circles}" fill="transparent" />`
)}
</g>
</svg>`
md`Recall, in context, we're moving through these steps:`
steps
import { code_styles, displayCaution } from "@info474/utilities"
import { display_blobs } from "@mkfreeman/animated-svg-bezier-blobs"
import { concentric } from "@mkfreeman/generating-svgs/2"
code_styles
html`<style>
h2 {
text-decoration:underline;
}
</style>`
import { steps } from "@mkfreeman/part-5-building-tools"
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.
