cl-react-graph
Version:
67 lines • 28 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/cl-react-graph/styles.76a35927d74ed981d93c.css" id="gatsby-global-css">span.data-grid-container,span.data-grid-container:focus{outline:none}.data-grid-container .data-grid{table-layout:fixed;border-collapse:collapse}.data-grid-container .data-grid .cell.updated{background-color:rgba(0,145,253,.16);transition:background-color 0ms ease}.data-grid-container .data-grid .cell{height:17px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:cell;background-color:unset;transition:background-color .5s ease;vertical-align:middle;text-align:right;border:1px solid #ddd;padding:0}.data-grid-container .data-grid .cell.selected{border:1px double #2185d0;transition:none;box-shadow:inset 0 -100px 0 rgba(33,133,208,.15)}.data-grid-container .data-grid .cell.read-only{background:#f5f5f5;color:#999;text-align:center}.data-grid-container .data-grid .cell>.text{padding:2px 5px;text-overflow:ellipsis;overflow:hidden}.data-grid-container .data-grid .cell>input{outline:none;border:2px solid #2185d0;text-align:right;width:calc(100% - 6px);height:11px;background:none;display:block}.data-grid-container .data-grid .cell{vertical-align:bottom}.data-grid-container .data-grid .cell,.data-grid-container .data-grid .cell.wrap,.data-grid-container .data-grid.clip .cell.wrap,.data-grid-container .data-grid.nowrap .cell.wrap,.data-grid-container .data-grid.wrap .cell,.data-grid-container .data-grid.wrap .cell.wrap{white-space:normal}.data-grid-container .data-grid .cell.nowrap,.data-grid-container .data-grid.clip .cell.nowrap,.data-grid-container .data-grid.nowrap .cell,.data-grid-container .data-grid.nowrap .cell.nowrap,.data-grid-container .data-grid.wrap .cell.nowrap{white-space:nowrap;overflow-x:visible}.data-grid-container .data-grid .cell.clip,.data-grid-container .data-grid.clip .cell,.data-grid-container .data-grid.clip .cell.clip,.data-grid-container .data-grid.nowrap .cell.clip,.data-grid-container .data-grid.wrap .cell.clip{white-space:nowrap;overflow-x:hidden}.data-grid-container .data-grid .cell .data-editor,.data-grid-container .data-grid .cell .value-viewer{display:block}body,html{height:100vh;padding:0;margin:0}body{background-color:#f2f2f2;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:.9rem}#___gatsby,#___gatsby>div{display:flex;flex-direction:column;height:100vh;justify-content:space-between}main{margin-top:1rem}.tooltip{position:absolute;background:#fff;color:#27626a;font-size:.8rem;border:1px solid rgba(39,98,106,.47843137254901963);padding:.25rem}footer{background:#27626a;text-align:center;padding:.5rem}footer,footer a{color:hsla(0,0%,100%,.9)}table.data-grid{width:100%}th.action-cell{background:#f2f2f2;border:1px solid #d2d2d2}.MuiTypography-h2{font-size:1.3rem;line-height:1.3rem;margin-bottom:.75rem}.MuiToolbar-root a{text-decoration:none;color:#fff}.data-grid-container .data-grid .cell>input{height:21px}pre code{background-color:#eee;border:1px solid #999;display:block;padding:20px}.wrapper{margin:0;padding:0;width:100%}.MuiCard-root{overflow:visible}.MuiTypography-h2{margin-left:1.5rem;font-size:1.8rem}.MuiButtonBase-root a{text-decoration:none;color:#272727}.MuiAppBar-colorPrimary{background-color:#627791}</style><meta name="generator" content="Gatsby 2.31.0"/><title data-react-helmet="true">Line Chart | Infosum Charts</title><meta data-react-helmet="true" content="Infosum charts." name="description"/><meta data-react-helmet="true" content="Line Chart" property="og:title"/><meta data-react-helmet="true" content="Infosum charts." property="og:description"/><meta data-react-helmet="true" content="website" property="og:type"/><meta data-react-helmet="true" content="summary" name="twitter:card"/><meta data-react-helmet="true" content="@infosum" name="twitter:creator"/><meta data-react-helmet="true" content="Line Chart" name="twitter:title"/><meta data-react-helmet="true" content="Infosum charts." name="twitter:description"/><link rel="icon" href="/cl-react-graph/favicon-32x32.png?v=4a9773549091c227cd2eb82ccd9c5e3a" type="image/png"/><link rel="manifest" href="/cl-react-graph/manifest.webmanifest" crossorigin="anonymous"/><meta name="theme-color" content="#56b4bf"/><link rel="apple-touch-icon" sizes="48x48" href="/cl-react-graph/icons/icon-48x48.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="72x72" href="/cl-react-graph/icons/icon-72x72.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="96x96" href="/cl-react-graph/icons/icon-96x96.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="144x144" href="/cl-react-graph/icons/icon-144x144.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="192x192" href="/cl-react-graph/icons/icon-192x192.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="256x256" href="/cl-react-graph/icons/icon-256x256.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="384x384" href="/cl-react-graph/icons/icon-384x384.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="512x512" href="/cl-react-graph/icons/icon-512x512.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><style id="jss-server-side"></style><link as="script" rel="preload" href="/cl-react-graph/webpack-runtime-070b9074f2d02137cca0.js"/><link as="script" rel="preload" href="/cl-react-graph/framework-ee3114de82f5eaed727a.js"/><link as="script" rel="preload" href="/cl-react-graph/app-17bc1dc29ad142b00b6b.js"/><link as="script" rel="preload" href="/cl-react-graph/styles-e9d24b1846c7d6eb9685.js"/><link as="script" rel="preload" href="/cl-react-graph/commons-40aabcf3e35d206b877e.js"/><link as="script" rel="preload" href="/cl-react-graph/6d07195eb14e46b0059dce235afe0eb4092def0b-e1e5763eda02f6de9270.js"/><link as="script" rel="preload" href="/cl-react-graph/0d3cfb91b081fd516c5753787867e75f9e942a42-8545d52f0eaad41ebfae.js"/><link as="script" rel="preload" href="/cl-react-graph/6ac482a3227c1ae8bfcf27af71f8dffa8505e046-b4be9ad777286bc1b5d4.js"/><link as="script" rel="preload" href="/cl-react-graph/17c018643475e7f3de028b545693df6ac0992596-e77e0634d012bdac7846.js"/><link as="script" rel="preload" href="/cl-react-graph/663fc5a6ec6329a22542824479f8bb14839101e7-5f940d0a5be772147548.js"/><link as="script" rel="preload" href="/cl-react-graph/6708be29294271de822a51908a9c5fe26550f9b9-7a1f6bdd827bc8613820.js"/><link as="script" rel="preload" href="/cl-react-graph/43ec5c4fa0b06b7598d463d7125378a1d55351c8-abaccd76ccb9d6ada99e.js"/><link as="script" rel="preload" href="/cl-react-graph/7a016cf43b93993ddef5c9256c2e99a4fc0a4552-157bde3b06c20078d4c0.js"/><link as="script" rel="preload" href="/cl-react-graph/f2b1540c709130a5d2f680607377a21b94138f19-5cb82ef35d0c7b8d7ef1.js"/><link as="script" rel="preload" href="/cl-react-graph/component---src-pages-tornado-tsx-7c08c03a4410843396a0.js"/><link as="fetch" rel="preload" href="/cl-react-graph/page-data/tornado/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/cl-react-graph/page-data/sq/d/3649515864.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/cl-react-graph/page-data/sq/d/63159454.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/cl-react-graph/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><header class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary MuiPaper-elevation4"><div class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"><button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeStart" tabindex="0" type="button" aria-label="open drawer"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></span></button><h6 class="MuiTypography-root MuiTypography-h6 MuiTypography-colorInherit"><a href="/cl-react-graph/">Infosum Charts</a></h6></div></header><div style="flex-grow:2;margin:0 auto;padding-top:0;width:100%"><main><h2 class="MuiTypography-root MuiTypography-h2">Tornado Chart</h2><div><div class="MuiGrid-root wrapper MuiGrid-container MuiGrid-spacing-xs-5"><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6"><div class="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded"><div class="MuiCardContent-root"><svg id="demo" width="630" height="500" style="overflow:visible" viewBox="0 0 630 500"><title style="pointer-events:none"></title><g transform="translate(15,15)" role="table" width="600" height="470"><g class="bars" role="row" transform="translate(100, 0)"><g class="bar-lines"><rect role="cell" data-testid="chart-bar-left-demo-0" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="235" y="5"></rect><rect role="cell" data-testid="chart-bar-left-demo-1" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="235" y="72"></rect><rect role="cell" data-testid="chart-bar-left-demo-2" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="235" y="139"></rect><rect role="cell" data-testid="chart-bar-left-demo-3" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="235" y="206"></rect><rect role="cell" data-testid="chart-bar-left-demo-4" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="235" y="273"></rect><rect role="cell" data-testid="chart-bar-left-demo-5" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="235" y="340"></rect><rect role="cell" data-testid="chart-bar-left-demo-6" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="235" y="18"></rect><rect role="cell" data-testid="chart-bar-left-demo-7" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="235" y="85"></rect><rect role="cell" data-testid="chart-bar-left-demo-8" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="235" y="152"></rect><rect role="cell" data-testid="chart-bar-left-demo-9" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="235" y="219"></rect><rect role="cell" data-testid="chart-bar-left-demo-10" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="235" y="286"></rect><rect role="cell" data-testid="chart-bar-left-demo-11" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="235" y="353"></rect></g><g class="labels"></g></g><g class="tips"><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g><g class="bars" role="row" transform="translate(335, 0)"><g class="bar-lines"><rect role="cell" data-testid="chart-bar-right-demo-0" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="0" y="5"></rect><rect role="cell" data-testid="chart-bar-right-demo-1" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="0" y="72"></rect><rect role="cell" data-testid="chart-bar-right-demo-2" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="0" y="139"></rect><rect role="cell" data-testid="chart-bar-right-demo-3" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="0" y="206"></rect><rect role="cell" data-testid="chart-bar-right-demo-4" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="0" y="273"></rect><rect role="cell" data-testid="chart-bar-right-demo-5" height="54" fill="rgba(141, 211, 199, 1)" width="0" rx="0" ry="0" x="0" y="340"></rect><rect role="cell" data-testid="chart-bar-right-demo-6" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="0" y="18"></rect><rect role="cell" data-testid="chart-bar-right-demo-7" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="0" y="85"></rect><rect role="cell" data-testid="chart-bar-right-demo-8" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="0" y="152"></rect><rect role="cell" data-testid="chart-bar-right-demo-9" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="0" y="219"></rect><rect role="cell" data-testid="chart-bar-right-demo-10" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="0" y="286"></rect><rect role="cell" data-testid="chart-bar-right-demo-11" height="27" fill="rgba(255, 255, 179, 1)" width="0" rx="0" ry="0" x="0" y="353"></rect></g><g class="labels"></g></g><g class="tips"><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g><g class="y-axis" transform="translate(100, 0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#a9a9a9" d="M0,400 L0,0" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></path><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 33)"><line stroke="#a9a9a9" x2="-0" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-10" dy="0.32em">65-∞</text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 100)"><line stroke="#a9a9a9" x2="-0" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-10" dy="0.32em">50-65</text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 167)"><line stroke="#a9a9a9" x2="-0" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-10" dy="0.32em">35-50</text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 234)"><line stroke="#a9a9a9" x2="-0" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-10" dy="0.32em">25-35</text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 301)"><line stroke="#a9a9a9" x2="-0" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-10" dy="0.32em">18-25</text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 368)"><line stroke="#a9a9a9" x2="-0" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-10" dy="0.32em">16-18</text></g></g><g class="y-axis" transform="translate(335, 0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#a9a9a9" d="M0,400 L0,0" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></path><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 33)"><line stroke="#a9a9a9" x2="-2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-12" dy="0.32em"></text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 100)"><line stroke="#a9a9a9" x2="-2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-12" dy="0.32em"></text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 167)"><line stroke="#a9a9a9" x2="-2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-12" dy="0.32em"></text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 234)"><line stroke="#a9a9a9" x2="-2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-12" dy="0.32em"></text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 301)"><line stroke="#a9a9a9" x2="-2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-12" dy="0.32em"></text></g><g aria-hidden="false" role="row" class="tick" opacity="1" transform="translate(0, 368)"><line stroke="#a9a9a9" x2="-2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><text role="columnheader" fill="#a9a9a9" font-size="10px" text-anchor="right" writing-mode="horizontal-tb" transform="rotate(0)" height="400" x="-12" dy="0.32em"></text></g></g><g class="x-axis" transform="translate(100, 400)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#a9a9a9" d="M0,0 L235,0" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></path><g aria-hidden="true" role="" class="tick" opacity="1" text-anchor="middle" transform="translate(235, 0)"><line stroke="#a9a9a9" x1="0" y2="2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><g><text role="" fill="#a9a9a9" font-size="10px" text-anchor="middle" writing-mode="horizontal-tb" height="20" dy="20" dx="0">0</text></g></g><g aria-hidden="true" role="" class="tick" opacity="1" text-anchor="middle" transform="translate(0, 0)"><line stroke="#a9a9a9" x1="0" y2="2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><g><text role="" fill="#a9a9a9" font-size="10px" text-anchor="middle" writing-mode="horizontal-tb" height="20" dy="20" dx="0">10185</text></g></g><g aria-hidden="true" role="" class="tick" opacity="1" text-anchor="middle" transform="translate(0, 0)"><line stroke="#a9a9a9" x1="0" y2="2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><g><text role="" fill="#a9a9a9" font-size="10px" text-anchor="middle" writing-mode="horizontal-tb" height="20" dy="20" dx="0">10185</text></g></g></g><g class="x-axis" transform="translate(335, 400)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#a9a9a9" d="M0,0 L235,0" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></path><g aria-hidden="true" role="" class="tick" opacity="1" text-anchor="middle" transform="translate(0, 0)"><line stroke="#a9a9a9" x1="0" y2="2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><g><text role="" fill="#a9a9a9" font-size="10px" text-anchor="middle" writing-mode="horizontal-tb" height="20" dy="20" dx="0">0</text></g></g><g aria-hidden="true" role="" class="tick" opacity="1" text-anchor="middle" transform="translate(235, 0)"><line stroke="#a9a9a9" x1="0" y2="2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><g><text role="" fill="#a9a9a9" font-size="10px" text-anchor="middle" writing-mode="horizontal-tb" height="20" dy="20" dx="0">10185</text></g></g><g aria-hidden="true" role="" class="tick" opacity="1" text-anchor="middle" transform="translate(235, 0)"><line stroke="#a9a9a9" x1="0" y2="2" fill="none" opacity="1" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><g><text role="" fill="#a9a9a9" font-size="10px" text-anchor="middle" writing-mode="horizontal-tb" height="20" dy="20" dx="0">10185</text></g></g></g><g class="x-axis" transform="translate(100, 450)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#a9a9a9" d="M0,0 L500,0" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></path><g aria-hidden="true" role="" class="tick" opacity="1" text-anchor="middle" transform="translate(125, 0)"><line stroke="#a9a9a9" x1="0" y2="2" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><g><text role="" fill="#a9a9a9" font-size="10px" text-anchor="middle" writing-mode="horizontal-tb" height="50" dy="20" dx="0">Male</text></g></g><g aria-hidden="true" role="" class="tick" opacity="1" text-anchor="middle" transform="translate(375, 0)"><line stroke="#a9a9a9" x1="0" y2="2" fill="none" opacity="0" shape-rendering="auto" stroke-opacity="1" stroke-width="1"></line><g><text role="" fill="#a9a9a9" font-size="10px" text-anchor="middle" writing-mode="horizontal-tb" height="50" dy="20" dx="0">Female</text></g></g></g></g></svg><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label">Toggle Data</span></button></div></div><br/><div class="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded"><div class="MuiCardContent-root"><h6 class="MuiTypography-root MuiTypography-h6">JSX</h6><pre style="background-color:#303030;color:#eee;padding:1rem"><Tornado
data={{
bins: [
'16-18',
'18-25',
'25-35',
'35-50',
'50-65',
'65-∞'
],
counts: [
{
data: [
[
200,
2600,
5100,
9700,
8400,
6700
],
[
2002,
2100,
4700,
8700,
4900,
1400
]
],
label: 'Background'
},
{
data: [
[
100,
260,
510,
970,
840,
670
],
[
1000,
5500,
470,
870,
490,
140
]
],
label: 'Foreground'
}
]
}}
direction="HORIZONTAL"
groupLayout={2}
height={500}
id="demo"
splitAxisHeight={50}
splitBins={[
'Male',
'Female'
]}
width={600}
xAxisHeight={20}
/></pre></div></div></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6"><label class="MuiFormControlLabel-root"><span class="MuiSwitch-root"><span class="MuiButtonBase-root MuiIconButton-root jss5 MuiSwitch-switchBase MuiSwitch-colorPrimary" aria-disabled="false"><span class="MuiIconButton-label"><input type="checkbox" class="jss8 MuiSwitch-input"/><span class="MuiSwitch-thumb"></span></span></span><span class="MuiSwitch-track"></span></span><span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1">Show points</span></label><label class="MuiFormControlLabel-root"><span class="MuiSwitch-root"><span class="MuiButtonBase-root MuiIconButton-root jss5 MuiSwitch-switchBase MuiSwitch-colorPrimary" aria-disabled="false"><span class="MuiIconButton-label"><input type="checkbox" class="jss8 MuiSwitch-input"/><span class="MuiSwitch-thumb"></span></span></span><span class="MuiSwitch-track"></span></span><span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1">Direction HORIZONTAL</span></label></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6"></div></div></div></main></div><footer>© <!-- -->2021<!-- -->, Built by<!-- --> <a href="https://www.infosum.com">InfoSum</a></footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/tornado/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-b5a0f4fa30e53f8f7a96.js"],"app":["/app-17bc1dc29ad142b00b6b.js"],"component---src-pages-404-js":["/component---src-pages-404-js-be6d34257d06fc36da40.js"],"component---src-pages-brush-tsx":["/component---src-pages-brush-tsx-ad6993893c7b082f996b.js"],"component---src-pages-chord-tsx":["/component---src-pages-chord-tsx-a3589601b1ccd84365f3.js"],"component---src-pages-histogram-tsx":["/component---src-pages-histogram-tsx-4b963282c9c1ce47d18e.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-9a79abb6a0edffe5d281.js"],"component---src-pages-joyplot-tsx":["/component---src-pages-joyplot-tsx-603b494c6f0cc8206e1a.js"],"component---src-pages-line-tsx":["/component---src-pages-line-tsx-ca22141f5a732cdc74b0.js"],"component---src-pages-map-tsx":["/component---src-pages-map-tsx-9d2aaf0df1ef46ce9158.js"],"component---src-pages-pie-tsx":["/component---src-pages-pie-tsx-bb034589f6143b5c2e17.js"],"component---src-pages-radar-tsx":["/component---src-pages-radar-tsx-9fdb3dd8bdda847098c9.js"],"component---src-pages-scatter-tsx":["/component---src-pages-scatter-tsx-06f9ccc5da7dadbb0707.js"],"component---src-pages-tornado-tsx":["/component---src-pages-tornado-tsx-7c08c03a4410843396a0.js"],"component---src-pages-upset-tsx":["/component---src-pages-upset-tsx-ba1c905f4c36d40d8569.js"]};/*]]>*/</script><script src="/cl-react-graph/polyfill-b5a0f4fa30e53f8f7a96.js" nomodule=""></script><script src="/cl-react-graph/component---src-pages-tornado-tsx-7c08c03a4410843396a0.js" async=""></script><script src="/cl-react-graph/f2b1540c709130a5d2f680607377a21b94138f19-5cb82ef35d0c7b8d7ef1.js" async=""></script><script src="/cl-react-graph/7a016cf43b93993ddef5c9256c2e99a4fc0a4552-157bde3b06c20078d4c0.js" async=""></script><script src="/cl-react-graph/43ec5c4fa0b06b7598d463d7125378a1d55351c8-abaccd76ccb9d6ada99e.js" async=""></script><script src="/cl-react-graph/6708be29294271de822a51908a9c5fe26550f9b9-7a1f6bdd827bc8613820.js" async=""></script><script src="/cl-react-graph/663fc5a6ec6329a22542824479f8bb14839101e7-5f940d0a5be772147548.js" async=""></script><script src="/cl-react-graph/17c018643475e7f3de028b545693df6ac0992596-e77e0634d012bdac7846.js" async=""></script><script src="/cl-react-graph/6ac482a3227c1ae8bfcf27af71f8dffa8505e046-b4be9ad777286bc1b5d4.js" async=""></script><script src="/cl-react-graph/0d3cfb91b081fd516c5753787867e75f9e942a42-8545d52f0eaad41ebfae.js" async=""></script><script src="/cl-react-graph/6d07195eb14e46b0059dce235afe0eb4092def0b-e1e5763eda02f6de9270.js" async=""></script><script src="/cl-react-graph/commons-40aabcf3e35d206b877e.js" async=""></script><script src="/cl-react-graph/styles-e9d24b1846c7d6eb9685.js" async=""></script><script src="/cl-react-graph/app-17bc1dc29ad142b00b6b.js" async=""></script><script src="/cl-react-graph/framework-ee3114de82f5eaed727a.js" async=""></script><script src="/cl-react-graph/webpack-runtime-070b9074f2d02137cca0.js" async=""></script></body></html>