The avatar for @anjana
Anjana Vakil
Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
Published
Building Generative Art Tools with Observable
Edited
Sep 30, 2021
Fork of Part 2: Observable + SVG Basics
•
1 fork
3 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
#### Markdown

Markdown mode lets you quickly add text content to your notebook. See the [Markdown quick reference](https://observablehq.com/@observablehq/markdown-quick-reference) for details.
Insert cell
<h4>HTML</h4>
<p style="padding: 1em; background-color: #eeeee; border: 1px solid #e5e5e5">
Similarly, HTML mode lets you directly add arbitrary
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML" style="color:blue;">HTML</a>
snippets to your notebooks. We'll use this mode to create SVGs.
</p>
Insert cell
Insert cell
// Create a globally scoped "city" of the city you are currently in
city = "St. Louis"
Insert cell
Insert cell
year = 2000 + 21
Insert cell
Insert cell
hello = {
const hello = "hello";
let world = "world";
world += "!";
// Return the desired value, because behind the scenes, each JS cell is secretly a function!
return [hello, world].join(", ");
}
Insert cell
Insert cell
Insert cell
I'm currently in ${city} in ${year}...
Insert cell
<p> ...and I just want to say:
<span style="text-transform: uppercase;">${hello}</span>
</p>
Insert cell
Insert cell
Insert cell
// Create your new cells below
Insert cell
Insert cell
Insert cell
width // Try resizing your browser window & watch it change!
Insert cell
Insert cell
now // This can be useful for animation - we'll see how later!
Insert cell
Insert cell
Insert cell
// Create an array of numbers between 0 and 128 with a step size of 10
range = _.range(0, 128, 10)
Insert cell
Insert cell
circles = d3
.create("svg")
.call((svg) =>
svg
.selectAll("circle")
.data(range)
.join("circle")
.attr("fill", d3.scaleSequential(d3.interpolateViridis).domain([128, 0]))
.attr("r", (d) => 128 - d)
)
.node()
Insert cell
Insert cell
Insert cell
viewof slider = Inputs.range([0, 10], { step: 1, label: "Change this value:" })
Insert cell
Insert cell
slider
Insert cell
*The slider value is currently **${slider}***
Insert cell
Insert cell
viewof name = Inputs.text({ placeholder: "Type your name here" })
Insert cell
"Hello, " + name
Insert cell
Insert cell
viewof color = Inputs.text({
type: "color",
value: "#008080",
label: "Pick a color"
})
Insert cell
<span style="color: ${color}; font-weight: bold;">${color} is the prettiest color</span>
Insert cell
Insert cell
Insert cell
// Create the first slider here
Insert cell
// Create the second slider here
Insert cell
// Add their values together here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more