Public
Edited
May 6, 2024
Insert cell
Insert cell
viewof chosenData = Inputs.select(new Map([["1959 - 1968", sixties], ["1969 - 1978", seventies], ["1979 - 1988", eighties], ["1989 - 1998", nineties], ["1999 - 2009", twothousands], ["1959 - 2009", total]]), {value: total, label: "Choose Year Range"});
Insert cell
<svg width="900" height="900">
<path stroke = "darkgray" fill="none" d="M230,850C250,691.667,270,533.333,270,400C270,266.667,250,158.333,230,75"/>
<path stroke = "darkgray" fill="none" d="M302.5,850C326.25,689.583,350,529.167,350,400C350,270.833,326.25,172.917,302.5,75"/>
<path stroke = "darkgray" fill="none" d="M375,850C400,691.667,425,533.333,425,400C425,266.667,400,158.333,375,75"/>
<path stroke = "darkgray" fill="none" d="M455,850C480,691.667,505,533.333,505,400C505,266.667,480,158.333,455,75"/>
<path stroke = "darkgray" fill="none" d="M535,850C560,691.667,585,533.333,585,400C585,266.667,560,158.333,535,75"/>
<path stroke = "darkgray" fill="none" d="M621,850C646,691.667,671,533.333,671,400C671,266.667,646,158.333,621,75"/>
<path stroke = "darkgray" fill="none" d="M705,850C730,691.667,755,533.333,755,400C755,266.667,730,158.333,705,75"/>
<path stroke = "darkgray" fill="none" d="M792,850C817,691.667,842,533.333,842,400C842,266.667,817,158.333,792,75"/>
<circle id="Sun" cx = "100" cy = "450" r = 90*1.75 fill = "#FDB813"/>
<g id="layer1"></g>
<text x="450" y="40" font-size = 39px fill = "black" font-style = "Helvetica" text-anchor = "middle">Count of Astronauts by Undergraduate University</text>
<text x="885" y="850" fill="black" font-size = "18" text-anchor = "middle" font-style = "Helvetica">0</text>
<text x="800" y="870" fill="black" font-size = "12" text-anchor = "middle" font-style = "Helvetica">Schools with Least Astronauts Overall</text>
<text x="230" y="870" fill="black" font-size = "12" text-anchor = "middle" font-style = "Helvetica">Schools with Most Astronauts Overall</text>
<line stroke = "black" x1 = "875" y1 = "885" x2 = "230" y2 = "885" marker-start="url(#arrow)"/>
<text id="mytext" x="450" y="70" text-anchor = "middle"></text>
<style>
#mytext {font-family: font-size = 20px fill = "black" font-style = "Helvetica";}
</style>
<text id="ground_label" x="25" y="850" font-size = 18px></text>
<defs>
<!-- A marker to be used as an arrowhead -->
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="15"
markerHeight="15"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<!-- A line with a marker -->
<line stroke = "black" x1 = "881" y1 = "837" x2 = "881" y2 = "75" marker-end="url(#arrow)"/>

</svg>
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
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