The avatar for @mcmire
Elliot Winkler
Full-stack dev @metamask (formerly @tuftandneedle, @thoughtbot).
Published
Edited
Jul 14, 2019
Importers
Insert cell
Insert cell
Insert cell
// Can fit one arc between 0 and 0.5 revolutions
renderArcs([
{ startAngle: Angle.fromRevolutions(0), endAngle: Angle.fromRevolutions(0.5) }
])
Insert cell
// Can fit one arc between 0.5 and 1 revolution
renderArcs([
{ startAngle: Angle.fromRevolutions(0.5), endAngle: Angle.fromRevolutions(1) }
])
Insert cell
// Can fit two adjoining arcs between 0 and 1 revolution
renderArcs([
{ startAngle: 0, endAngle: Angle.fromRevolutions(0.25) },
{ startAngle: Angle.fromRevolutions(0.25), endAngle: Angle.fromRevolutions(0.75) }
])
Insert cell
// Can't fit two non-adjoining arcs between 0 and 1 revolution
renderArcs([
{ startAngle: 0, endAngle: Angle.fromRevolutions(0.5) },
{ startAngle: Angle.fromRevolutions(0.25), endAngle: Angle.fromRevolutions(1) }
])
Insert cell
// Can fit an arc within a discontinuity
renderArcs([
{ startAngle: Angle.fromRevolutions(0), endAngle: Angle.fromRevolutions(0.25) },
{ startAngle: Angle.fromRevolutions(0.75), endAngle: Angle.fromRevolutions(1) },
{ startAngle: Angle.fromRevolutions(0.25), endAngle: Angle.fromRevolutions(0.75) }
])
Insert cell
// Can fit an arc within a discontinuity, where the second arc exceeds 1 revolution
renderArcs([
{ startAngle: Angle.fromRevolutions(0.25), endAngle: Angle.fromRevolutions(0.75) },
{ startAngle: Angle.fromRevolutions(0.75), endAngle: Angle.fromRevolutions(1.25) }
])
Insert cell
// Can't fit an arc within a discontinuity, where the second arc exceeds 1 revolution
// and goes past the starting angle
renderArcs([
{ startAngle: Angle.fromRevolutions(0.25), endAngle: Angle.fromRevolutions(0.75) },
{ startAngle: Angle.fromRevolutions(0.75), endAngle: Angle.fromRevolutions(1.3) }
])
Insert cell
// Can still fit arcs on the same radial up to the point where it would collide
// with a previous arc
renderArcs([
{ startAngle: Angle.fromRevolutions(0.25), endAngle: Angle.fromRevolutions(0.5) },
{ startAngle: Angle.fromRevolutions(0.5), endAngle: Angle.fromRevolutions(0.75) },
{ startAngle: Angle.fromRevolutions(0.75), endAngle: Angle.fromRevolutions(1.3) }
])
Insert cell
// Can fit an arc within a discontinuity, where the second angle wraps around
// the other direction and meets the starting angle
renderArcs([
{ startAngle: Angle.fromRevolutions(0.25), endAngle: Angle.fromRevolutions(0.75) },
{ startAngle: Angle.fromRevolutions(-0.25), endAngle: Angle.fromRevolutions(0.25) }
])
Insert cell
// Can fit one reversed arc between 0 and -1 revolution
renderArcs([
{ startAngle: Angle.fromRevolutions(0), endAngle: Angle.fromRevolutions(-0.25) }
])
Insert cell
// Can fit two adjoining reversed arcs between 0 and -1 revolution
renderArcs([
{ startAngle: Angle.fromRevolutions(0), endAngle: Angle.fromRevolutions(-0.25) },
{ startAngle: Angle.fromRevolutions(-0.25), endAngle: Angle.fromRevolutions(-0.75) }
])
Insert cell
// Can't fit two non-adjoining reversed arcs between 0 and -1 revolution
renderArcs([
{ startAngle: Angle.fromRevolutions(0), endAngle: Angle.fromRevolutions(-0.5) },
{ startAngle: Angle.fromRevolutions(-0.25), endAngle: Angle.fromRevolutions(-1) }
])
Insert cell
// Can fit a reversed arc within a discontinuity
renderArcs([
{ startAngle: Angle.fromRevolutions(-0), endAngle: Angle.fromRevolutions(-0.25) },
{ startAngle: Angle.fromRevolutions(-0.75), endAngle: Angle.fromRevolutions(-1) },
{ startAngle: Angle.fromRevolutions(-0.25), endAngle: Angle.fromRevolutions(-0.75) }
])
Insert cell
// Can fit a reversed arc within a discontinuity, where the second arc exceeds -1 revolution
renderArcs([
{ startAngle: Angle.fromRevolutions(-0.25), endAngle: Angle.fromRevolutions(-0.75) },
{ startAngle: Angle.fromRevolutions(-0.75), endAngle: Angle.fromRevolutions(-1.25) }
])
Insert cell
// Can't fit a reversed arc within a discontinuity, where the second arc exceeds -1 revolution
// and goes past the starting angle
renderArcs([
{ startAngle: Angle.fromRevolutions(-0.25), endAngle: Angle.fromRevolutions(-0.75) },
{ startAngle: Angle.fromRevolutions(-0.75), endAngle: Angle.fromRevolutions(-1.3) }
])
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
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
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