Published
Edited
Nov 18, 2021
Importers
Insert cell
Insert cell
viz = render(() => chart(graph_paramters.data, graph_paramters.r, graph_paramters.r0, graph_paramters.center_value))
Insert cell
graph_paramters = new Object({
data: graph_data,
r: 120,
r0: 60,
center_value: 80
})
Insert cell
graph_data = [
{value: 70, color: 'salmon'},
{value: 150, color: 'deepskyblue'},
{value: 300, color: 'orange'},
{value: 600, color: 'limegreen'}
]
Insert cell
chart = (data, r, r0 = 0, center, center_size=1.8, center_color="#000000") => {
const offsets = [];
let total = 0;
for (const {value} of data) {
offsets.push(total);
total += value;
}
const w = r * 2;
return jsx`<svg width="${w}" height="${w}" viewbox="0 0 ${w} ${w}" >
${data.map(({value, color}, i) => segment(offsets[i] / total, (offsets[i] + value) / total, r, r0, color))}
<circle cx="${r}" cy="${r}" r="${r0}" fill="white" />
<text className="text" transform="translate(${r}, ${r})" fontSize=${center_size}em fill=${center_color}>${center.toLocaleString()}%</text>
</svg>`;
}
Insert cell
css_style = html`<style>
.text {
font-family: 'Assistant', sans-serif;
text-anchor: middle;
font-weight: bold;
dominant-baseline: central;
}
</style>`
Insert cell
segment = (start, end, r, r0, color) => {
const a0 = 2 * Math.PI * (start - 0.25);
const a1 = 2 * Math.PI * (end - 0.25);
const x0 = Math.cos(a0), y0 = Math.sin(a0);
const x1 = Math.cos(a1), y1 = Math.sin(a1);
const largeArc = end - start > 0.5 ? 1 : 0;
return jsx`<path d="
M ${r + r0 * x0} ${r + r0 * y0}
L ${r + r * x0} ${r + r * y0}
A ${r} ${r} 0 ${largeArc} 1 ${r + r * x1} ${r + r * y1}
L ${r + r0 * x1} ${r + r0 * y1}
A ${r0} ${r0} 0 ${largeArc} 0 ${r + r0 * x0} ${r + r0 * y0}
" fill="${color}" stroke="white" stroke-width="2" opacity="0.8" />`;
}
Insert cell
import {render, component, jsx, memo, forwardRef, React, ReactDOM, createElement, Children, createRef, createContext, lazy, Fragment, StrictMode, Suspense, cloneElement, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useDebugValue, createPortal} from "@j-f1/react-16"
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