Pie chart breaking down enrollment in compass by student group
*COMPASS Explore are programs that focus on specific topics and include slots of all age ranges; the totals for elementary and middle school do not include corresponding portions of Explore programming.
Source: New York City Independent Budget Office (Fiscal Year 2018). “Big Rise in After School Programs
for Elementary and Middle School Students.”
Embed Details
Add this style information to the head of your file.
<link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/compass-enrollment.css" type="text/css">
Add this html where you need the graph to appear
<div class="graph-wrapper" id="compass-enrollment">
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 647.93 671.07" style="display:block;margin: 1% auto">
<g id="Layer_1" data-name="Layer 1">
<path class="pie-chart-1"
d="M345,153.51c150.07,0,271.73,121.66,271.73,271.73A271.72,271.72,0,0,1,490.26,654.88L345,425.24Z"
transform="translate(-5.88 -25.93)" />
<path class="pie-chart-2"
d="M490.26,654.88c-126.83,80.22-294.68,42.44-374.9-84.38S72.91,275.82,199.74,195.6a271.49,271.49,0,0,1,89.62-36.33l55.64,266Z"
transform="translate(-5.88 -25.93)" />
<path class="pie-chart-3" d="M289.36,159.27A271.64,271.64,0,0,1,345,153.51V425.24Z"
transform="translate(-5.88 -25.93)" />
<line class="pie-chart-4" x1="318.62" y1="207.57" x2="409.29" y2="64.07" />
</g>
<g id="labels">
<text class="pie-chart-5" transform="translate(380.3 387.59)">COMPASS Elementary<tspan x="91.11" y="28.8">
51,773</tspan></text><text class="pie-chart-5" transform="translate(150.53 20.59)">COMPASS High and
COMPASS Explore*<tspan x="199.55" y="28.8">4,142</tspan></text><text class="pie-chart-5"
transform="translate(0 417.59)">COMPASS Middle (SONYC)<tspan x="118.41" y="28.8">70,288</tspan></text><text
x="-5.88" y="-25.93" /></g>
</svg>
<p class="table-note">
*COMPASS Explore are programs that focus on specific topics and include slots of all age ranges; the totals for elementary and middle school do not include corresponding portions of Explore programming.
</p>
<p class="table-note" style="margin-top:0">Source: New York City Independent Budget Office (Fiscal Year 2018). “Big Rise in After School Programs
for Elementary and Middle School Students.”</p>
</div>
Add this before the closing body tag
<script src="//d1o40k53wiknb7.cloudfront.net/js/compass-enrollment.js"></script>