The avatar for @richardpearce60
richardpearce60
Public
Edited
Nov 20, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const r = document.querySelector(':root');
r.style.setProperty('--activeNotation', props.activeColor);
r.style.setProperty('--inactiveNotation', props.inactiveColor);
r.style.setProperty('--notationFontSize', props.fontSize +"em");

}
Insert cell
html`
<style type="text/css">
:root {
--activeNotation: #1e90ff;
--inactiveNotation: #ff00ff;
--notationFontSize: 2em;
}

.notation{
width: 200px;
height: 200px;
overflow: hidden;
text-overflow: ellipsis;
border: solid 1px #CCC;
padding: 5px;
position: relative;
}

div.notation:hover {
overflow: visible;
}

.notation p {
font-family: helvetica;
font-weight: bold;
font-size: var(--notationFontSize);
text-align: center;
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.notation .active{
color: var(--activeNotation);
}
.notation .inactive{
color: var(--inactiveNotation);
}

</style>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = [
{
descriptionHTML: '<p class="inactive"><span class="active">New Driver</span> accicent rate is <span class="active">31%</span> in the first two years</p>',
valueNumber: 0.311,
valueText: "31.1%",
valueDenominator: 80,
valueNumerator: 25,
}
]
Insert cell
Insert cell
Insert cell
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