Back to All Graphs

Graph Details

MLL: Multilingual learners proficiency rate compared to never-MLLs and former-MLLs

Embed Details

Add this style information to the head of your file. <link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/mlls-proficiency.css" type="text/css"> Add this html where you need the graph to appear <div class="graph-wrapper" id="mlls-proficiency"> <h3>BUT, when MLLs test out of MLL-status, they outperform their peers who were never MLLs.</h3> <div class="button-container"> <button class="math-proficiency-button" data-subject="Math">Math Proficiency</button> <button class="english-proficiency-button" data-subject="English">English Proficiency</button> </div> <p class="see-data">Click Buttons to Display Data</p> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -10 406.28 170"> <title>Proficiency Rates of Multilingual Learners, Never Multilingual Learners, and Former Multilingual Leaners</title> <g id="MLLs" data-name="MLLs" class="proficiency-graph"> <line class="proficiency-2" x1="23.98" y1="162.76" x2="23.98" y2="162.76" /> <rect style="transform:translate(4.41px,300px)" class="proficiency-3 proficiency-label" width="39.57" height="21.36" /> <g> </g> </g> <g id="never_mlls" data-name="never-mlls" class="proficiency-graph"> <line class="proficiency-6 " x1="85.73" y1="162.76" x2="85.73" y2="162.76" /> <rect class="proficiency-5 proficiency-label" style="transform:translate(63.5px,300px)" width="39.57" height="21.36" /> </g> <g id="former_mlls" data-name="former-mlls" class="proficiency-graph"> <line class="proficiency-8" x1="147.48" y1="162.76" x2="147.48" y2="162.76" /> <rect class="proficiency-line-cover"></rect> <rect class="proficiency-7 proficiency-label" style="transform:translate(125.5px,300px)" width="39.57" height="21.36" /> </g> <g id="text"> <g style="transform:translate(9.7px, 300px)"><text class="proficiency-4"></text></g> <g style="transform:translate(68.54px, 300px)"><text class="proficiency-4"></text></g> <g style="transform:translate(130.89px,300px)"><text class="proficiency-4"></text></g> </g> </svg> <div class="legend-wrapper"> <div class="legend-container mll-proficiency"> <i></i> <p><span class="proficiency-percentage"></span>of current <span>MLL students</span> tested proficient in<span class="subject"></span></p> </div> <div class="legend-container never-mll-proficiency"> <i></i> <p><span class="proficiency-percentage"></span>of <span>never MLL</span> students tested proficient in<span class="subject"></span></p> </div> <div class="legend-container former-mll-proficiency"> <i></i> <p><span class="proficiency-percentage"></span>of <span>former-MLLs</span> tested proficient in<span class="subject"></span></p> </div> </div> </div> Add this before the closing body tag <script src="//d1o40k53wiknb7.cloudfront.net/js/mlls-proficiency.js"></script>