Public
Edited
Jul 26, 2023
Fork of Repeater
Importers
Insert cell
Insert cell
Insert cell
Insert cell
<mark class="name"></mark>
Insert cell
Insert cell
## <mark class="example">Cool Thing</mark>
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(cars, {
x: "power (hp)",
y: "economy (mpg)"
}),
Plot.tip(cars, Plot.pointer({
// Include the assignmentTipTheme in the options
...assignmentTipTheme,
x: "power (hp)",
y: "economy (mpg)"
})),
]
})
Insert cell
Insert cell
<mark class="question"></mark>What is the answer?
Insert cell
<mark class="answer"></mark>

Insert cell
Insert cell
<mark class="challenge"></mark>Demonstrate how to do this:
Insert cell
<mark class="response"></mark>

Insert cell
Insert cell
<style>
/* Name, Examples, Questions & Answers, Challenges & Responses */
:root {
counter-reset: example question challenge;
}
mark.name,
mark.example,
mark.question,
mark.answer,
mark.challenge,
mark.response {
color: inherit;
background: inherit;
}
mark.name::before,
mark.question::before,
mark.answer::before,
mark.challenge::before,
mark.response::before {
font-weight: bold;
background: yellow;
border-radius: 1rem;
padding: 0.0675rem 0.375rem;
margin-left: -0.375rem;
}
mark.name::before {
content: "Name:";
}
mark.example::before {
counter-increment: example;
content: "Example " counter(example) ". ";
}
mark.question::before {
counter-increment: question;
content: "Question " counter(question) ":";
}
mark.answer::before {
content: "Answer " counter(question) ":";
}
mark.challenge::before {
counter-increment: challenge;
content: "Challenge " counter(challenge, upper-alpha) ":";
}
mark.response::before {
content: "Response " counter(challenge, upper-alpha) ":";
}
mark.name::after,
mark.question::after,
mark.answer::after,
mark.challenge::after,
mark.response::after {
content: " ";
}

/* Tippy tooltips */
[data-tippy-root] .tippy-box {
border-radius: 0;
}
[data-tippy-root] .tippy-content {
font: 13px/1.2 system-ui, var(--sans-serif);
padding: 8px;
}
[data-tippy-root] table {
margin: 0;
}
[data-tippy-root] tr:not(:last-child) {
border-bottom: none;
}
[data-tippy-root] th,
[data-tippy-root] td {
color: white;
text-align: center;
}

/* Observable Plot tooltips */
svg[class^="plot"] {
overflow: visible;
}
[aria-label="tip"] text {
fill: white;
}
</style>
Insert cell
assignmentTipTheme = ({
anchor: 'bottom',
strokeWidth: 0,
fill: '#333',
stroke: '#333',
fontSize: 13,
lineHeight: 1.2,
pathFilter: 'none',
pointerSize: 14,
})
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