Public
Edited
Jun 10, 2024
html_fragment = `
<div class="outline">
<h3>Mark's <span class="favorite">favorite</span> things</h3>
<p>Some of my favorite things include:</p>
<ul class="framed-list">
<li>Bikes</li> <li>Beer</li> <li>OSU Football</li>
</ul>
<div class="row">
<div class="wide-column">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Bicycle_diagram-en.svg">
</div>
<div class="wide-column">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/François_Louis_Jaques_Paysans_fribourgeois_au_bistrot.jpg">
</div>
<div class="column">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Ohio_State_Buckeyes_logo.svg">
</div>
</div>
<div class="attribution">
All images from <a href="https://www.wikimedia.org/">WikiMedia</a> and licensed via <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</div>
</div>
`
<style>
.outline {
border: solid 3px black;
padding: 10px
}
ul.framed-list {
border: solid 1px black;
padding: 20px;
width: 180px
}
.favorite {
font-style: italic;
color: red
}
.row {
display: flex;
}
.wide-column {
flex: 40%;
padding: 5px;
}
.column {
flex: 20%;
padding: 40px 5px;
}
.attribution {
font-size: 60%
}
img {
width: 100%
}
</style>
svg_code = `
<svg width=500 height=300 style="border: 2px solid black;">
<rect x=80 y=20 width=340 height=260 fill=red></rect>
<line x1="0" x2="500" y1="0" y2="300" stroke="black" stroke-width="4"></line>
<circle cx="250" cy="150" r="100" fill=lightgray stroke="black" stroke-width="4"></circle>
</svg>
`
{
// Create the SVG and specify its width and height.
// We'll give it a border, too.
let svg = d3
.create("svg")
.attr("width", 500)
.attr("height", 300)
.style("border", "solid black 2px");
// Note that we use method chaining here!
// Add the rectangle and its attributes
svg
.append("rect")
.attr("x", 80)
.attr("y", 20)
.attr("width", 340)
.attr("height", 260)
.attr("fill", "red");
// Add the line and its attributes
svg
.append("line")
.attr("x1", 0)
.attr("x2", 500)
.attr("y1", 0)
.attr("y2", 300)
.attr("stroke", "black")
.attr("stroke-width", 4);
// Add the circle and its attributes.
svg
.append("circle")
.attr("cx", 250)
.attr("cy", "150")
.attr("r", 100)
.attr("fill", "lightgray")
.attr("stroke", "black")
.attr("stroke-width", 4);
// Return the SVG element.
return svg.node();
}
{
let svg = d3
.create("svg")
.attr("width", "500") // Try '100%' in place of 500
.attr("viewBox", [-1.2, -1.2, 2.4, 2.4]) // A new attribute
.style("border", "solid black 2px");
// Here are the vertices of the pentagon:
let n = 5;
let pts = d3
.range(n)
.map((i) => [
Math.sin((2 * Math.PI * i) / n),
Math.cos((2 * Math.PI * i) / n)
]);
// You can examine the points, if you like.
// return pts;
// Append the polygon to the SVG and specify its
// points and other attributes.
svg
.append("polygon")
.attr("points", pts)
.attr("fill", "lightgray")
.attr("stroke-width", 0.01) // Try commenting this out
.attr("stroke", "black");
return svg.node();
}
{
// Generate a bunch of random points of the form:
// {x, y}. <-- That's an object.
let w = 800;
let h = 500;
let pts = d3.range(100).map(() => ({
x: d3.randomUniform(0, w)(),
y: d3.randomUniform(0, h)()
}));
// You can uncomment this to see what pts looks like.
// return pts;
// Create the SVG as before.
let svg = d3
.create("svg")
.attr("width", "100%")
.attr("viewBox", [0, 0, w, h])
.style("border", "solid black 2px");
// Add a group for the circles
let g = svg
.append("g")
// .attr("transform", "translate(400)") // Uncomment to see the effect
.attr("fill", "black");
// Join the circles to the group using a selection join.
g.selectAll("circle")
.data(pts)
.join("circle")
.attr("cx", (c) => c.x)
.attr("cy", (c) => c.y)
// .attr("fill", (c, i) => d3.schemeCategory10[i % 10]) // Try this!
.attr("r", 4);
return svg.node();
}
d3.schemeCategory10
// Night time starter template
{
// Set up the SVG itself
let w = 800;
let h = 500;
let svg = d3
.create("svg")
.attr("viewBox", `0 0 ${w} ${h}`)
.style("border", "solid 1px black");
// This chunk of code defines a gradient for the background
let defs = svg.append("defs");
let gradient = defs
.append("linearGradient")
.attr("id", "gradient")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", 1)
.attr("y2", 0);
gradient.append("stop").attr("offset", "0%").attr("stop-color", "white");
gradient.append("stop").attr("offset", "60%").attr("stop-color", "#ccc");
gradient.append("stop").attr("offset", "100%").attr("stop-color", "black");
// The gradient is applied to an SVG Rect element that fills the whole SVG
svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", w)
.attr("height", h)
.attr("fill", "url(#gradient");
// Your code goes here!!!
return svg.node();
}
tippy_style = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}">`
tippy = require("tippy.js@6")
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.
