UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Observable Basics
// Create a globally scoped "city" of the city you are currently in
city = "Toronto"
md`To write a multi-line JavaScript statement, simply use curly braces \`{}\`, and make sure to **return** any value you want.`
// Here's an example of a multi line statment
my_value = {
// First calculate something: note the "standard" use of const or let
const x = Math.random()
const y = Math.random()
return x * y // make sure to return something!
}
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 =>
`<circle cx=10 cy=10 r=${10 + d * 6} stroke="black" opacity="${1 -
d / num_circles}" fill="transparent" />`
)}
</g>
</svg>`
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>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.