cl-react-graph
Version:
288 lines • 48.3 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/commons.31b9186d45b03ed99dca.css">body,html{height:100vh}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,.48);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}</style><meta name="generator" content="Gatsby 2.15.15"/><title data-react-helmet="true">Histogram | Infosum Charts</title><meta data-react-helmet="true" content="Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need." name="description"/><meta data-react-helmet="true" content="Histogram" property="og:title"/><meta data-react-helmet="true" content="Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need." 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="@gatsbyjs" name="twitter:creator"/><meta data-react-helmet="true" content="Histogram" name="twitter:title"/><meta data-react-helmet="true" content="Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need." name="twitter:description"/><link rel="manifest" href="/cl-react-graph/manifest.webmanifest"/><meta name="theme-color" content="#56b4bf"/><link rel="apple-touch-icon" sizes="48x48" href="/cl-react-graph/icons/icon-48x48.png"/><link rel="apple-touch-icon" sizes="72x72" href="/cl-react-graph/icons/icon-72x72.png"/><link rel="apple-touch-icon" sizes="96x96" href="/cl-react-graph/icons/icon-96x96.png"/><link rel="apple-touch-icon" sizes="144x144" href="/cl-react-graph/icons/icon-144x144.png"/><link rel="apple-touch-icon" sizes="192x192" href="/cl-react-graph/icons/icon-192x192.png"/><link rel="apple-touch-icon" sizes="256x256" href="/cl-react-graph/icons/icon-256x256.png"/><link rel="apple-touch-icon" sizes="384x384" href="/cl-react-graph/icons/icon-384x384.png"/><link rel="apple-touch-icon" sizes="512x512" href="/cl-react-graph/icons/icon-512x512.png"/><style id="jss-server-side">.MuiPaper-root{color:rgba(0,0,0,.87);transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;background-color:#fff}.MuiPaper-rounded{border-radius:4px}.MuiPaper-elevation0{box-shadow:none}.MuiPaper-elevation1{box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12)}.MuiPaper-elevation2{box-shadow:0 1px 5px 0 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12)}.MuiPaper-elevation3{box-shadow:0 1px 8px 0 rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.12)}.MuiPaper-elevation4{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.MuiPaper-elevation5{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)}.MuiPaper-elevation6{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.MuiPaper-elevation7{box-shadow:0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12)}.MuiPaper-elevation8{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.MuiPaper-elevation9{box-shadow:0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12)}.MuiPaper-elevation10{box-shadow:0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12)}.MuiPaper-elevation11{box-shadow:0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12)}.MuiPaper-elevation12{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.MuiPaper-elevation13{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)}.MuiPaper-elevation14{box-shadow:0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12)}.MuiPaper-elevation15{box-shadow:0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12)}.MuiPaper-elevation16{box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12)}.MuiPaper-elevation17{box-shadow:0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12)}.MuiPaper-elevation18{box-shadow:0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12)}.MuiPaper-elevation19{box-shadow:0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12)}.MuiPaper-elevation20{box-shadow:0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12)}.MuiPaper-elevation21{box-shadow:0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12)}.MuiPaper-elevation22{box-shadow:0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12)}.MuiPaper-elevation23{box-shadow:0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12)}.MuiPaper-elevation24{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.MuiAppBar-root{width:100%;display:flex;z-index:1100;box-sizing:border-box;flex-shrink:0;flex-direction:column}.MuiAppBar-positionFixed{top:0;left:auto;right:0;position:fixed}.MuiAppBar-positionAbsolute{top:0;left:auto;right:0;position:absolute}.MuiAppBar-positionSticky{top:0;left:auto;right:0;position:-webkit-sticky;position:sticky}.MuiAppBar-positionStatic{position:static}.MuiAppBar-positionRelative{position:relative}.MuiAppBar-colorDefault{color:rgba(0,0,0,.87);background-color:#f5f5f5}.MuiAppBar-colorPrimary{color:#fff;background-color:#3f51b5}.MuiAppBar-colorSecondary{color:#fff;background-color:#f50057}.MuiButtonBase-root{color:inherit;border:0;cursor:pointer;margin:0;display:inline-flex;outline:0;padding:0;position:relative;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:0;vertical-align:middle;-moz-appearance:none;justify-content:center;text-decoration:none;background-color:transparent;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}.MuiButtonBase-root::-moz-focus-inner{border-style:none}.MuiButtonBase-root.Mui-disabled{cursor:default;pointer-events:none}.MuiTypography-root{margin:0}.MuiTypography-body2{font-size:.875rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.43;letter-spacing:.01071em}.MuiTypography-body1{font-size:1rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5;letter-spacing:.00938em}.MuiTypography-caption{font-size:.75rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.66;letter-spacing:.03333em}.MuiTypography-button{font-size:.875rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;line-height:1.75;letter-spacing:.02857em;text-transform:uppercase}.MuiTypography-h1{font-size:6rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:300;line-height:1;letter-spacing:-.01562em}.MuiTypography-h2{font-size:3.75rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:300;line-height:1;letter-spacing:-.00833em}.MuiTypography-h3{font-size:3rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.04;letter-spacing:0}.MuiTypography-h4{font-size:2.125rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.17;letter-spacing:.00735em}.MuiTypography-h5{font-size:1.5rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.33;letter-spacing:0}.MuiTypography-h6{font-size:1.25rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;line-height:1.6;letter-spacing:.0075em}.MuiTypography-subtitle1{font-size:1rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.75;letter-spacing:.00938em}.MuiTypography-subtitle2{font-size:.875rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;line-height:1.57;letter-spacing:.00714em}.MuiTypography-overline{font-size:.75rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:2.66;letter-spacing:.08333em;text-transform:uppercase}.MuiTypography-srOnly{width:1px;height:1px;overflow:hidden;position:absolute}.MuiTypography-alignLeft{text-align:left}.MuiTypography-alignCenter{text-align:center}.MuiTypography-alignRight{text-align:right}.MuiTypography-alignJustify{text-align:justify}.MuiTypography-noWrap{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.MuiTypography-gutterBottom{margin-bottom:.35em}.MuiTypography-paragraph{margin-bottom:16px}.MuiTypography-colorInherit{color:inherit}.MuiTypography-colorPrimary{color:#3f51b5}.MuiTypography-colorSecondary{color:#f50057}.MuiTypography-colorTextPrimary{color:rgba(0,0,0,.87)}.MuiTypography-colorTextSecondary{color:rgba(0,0,0,.54)}.MuiTypography-colorError{color:#f44336}.MuiTypography-displayInline{display:inline}.MuiTypography-displayBlock{display:block}.MuiSvgIcon-root{fill:currentColor;width:1em;height:1em;display:inline-block;font-size:1.5rem;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.MuiSvgIcon-colorPrimary{color:#3f51b5}.MuiSvgIcon-colorSecondary{color:#f50057}.MuiSvgIcon-colorAction{color:rgba(0,0,0,.54)}.MuiSvgIcon-colorError{color:#f44336}.MuiSvgIcon-colorDisabled{color:rgba(0,0,0,.26)}.MuiSvgIcon-fontSizeInherit{font-size:inherit}.MuiSvgIcon-fontSizeSmall{font-size:1.25rem}.MuiSvgIcon-fontSizeLarge{font-size:2.1875rem}.MuiButton-root{color:rgba(0,0,0,.87);padding:6px 16px;font-size:.875rem;min-width:64px;box-sizing:border-box;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border 250ms cubic-bezier(.4,0,.2,1) 0s;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;line-height:1.75;border-radius:4px;letter-spacing:.02857em;text-transform:uppercase}.MuiButton-root:hover{text-decoration:none;background-color:rgba(0,0,0,.08)}.MuiButton-root.Mui-disabled{color:rgba(0,0,0,.26)}@media (hover:none){.MuiButton-root:hover{background-color:transparent}}.MuiButton-root:hover.Mui-disabled{background-color:transparent}.MuiButton-label{width:100%;display:inherit;align-items:inherit;justify-content:inherit}.MuiButton-text{padding:6px 8px}.MuiButton-textPrimary{color:#3f51b5}.MuiButton-textPrimary:hover{background-color:rgba(63,81,181,.08)}@media (hover:none){.MuiButton-textPrimary:hover{background-color:transparent}}.MuiButton-textSecondary{color:#f50057}.MuiButton-textSecondary:hover{background-color:rgba(245,0,87,.08)}@media (hover:none){.MuiButton-textSecondary:hover{background-color:transparent}}.MuiButton-outlined{border:1px solid rgba(0,0,0,.23);padding:5px 16px}.MuiButton-outlined.Mui-disabled{border:1px solid rgba(0,0,0,.26)}.MuiButton-outlinedPrimary{color:#3f51b5;border:1px solid rgba(63,81,181,.5)}.MuiButton-outlinedPrimary:hover{border:1px solid #3f51b5;background-color:rgba(63,81,181,.08)}@media (hover:none){.MuiButton-outlinedPrimary:hover{background-color:transparent}}.MuiButton-outlinedSecondary{color:#f50057;border:1px solid rgba(245,0,87,.5)}.MuiButton-outlinedSecondary:hover{border:1px solid #f50057;background-color:rgba(245,0,87,.08)}.MuiButton-outlinedSecondary.Mui-disabled{border:1px solid rgba(0,0,0,.26)}@media (hover:none){.MuiButton-outlinedSecondary:hover{background-color:transparent}}.MuiButton-contained{color:rgba(0,0,0,.87);box-shadow:0 1px 5px 0 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12);background-color:#e0e0e0}.MuiButton-contained.Mui-focusVisible{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.MuiButton-contained:active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.MuiButton-contained.Mui-disabled{color:rgba(0,0,0,.26);box-shadow:none;background-color:rgba(0,0,0,.12)}.MuiButton-contained:hover{background-color:#d5d5d5}@media (hover:none){.MuiButton-contained:hover{background-color:#e0e0e0}}.MuiButton-contained:hover.Mui-disabled{background-color:rgba(0,0,0,.12)}.MuiButton-containedPrimary{color:#fff;background-color:#3f51b5}.MuiButton-containedPrimary:hover{background-color:#303f9f}@media (hover:none){.MuiButton-containedPrimary:hover{background-color:#3f51b5}}.MuiButton-containedSecondary{color:#fff;background-color:#f50057}.MuiButton-containedSecondary:hover{background-color:#c51162}@media (hover:none){.MuiButton-containedSecondary:hover{background-color:#f50057}}.MuiButton-colorInherit{color:inherit;border-color:currentColor}.MuiButton-sizeSmall{padding:4px 8px;font-size:.8125rem}.MuiButton-sizeLarge{padding:8px 24px;font-size:.9375rem}.MuiButton-fullWidth{width:100%}.MuiCard-root{overflow:hidden}.MuiCardContent-root{padding:16px}.MuiCardContent-root:last-child{padding-bottom:24px}.MuiInputBase-root{color:rgba(0,0,0,.87);cursor:text;display:inline-flex;position:relative;font-size:1rem;box-sizing:border-box;align-items:center;font-family:Roboto,Helvetica,Arial,sans-serif;line-height:1.1875em}.MuiInputBase-root.Mui-disabled{color:rgba(0,0,0,.38);cursor:default}.MuiInputBase-multiline{padding:6px 0 7px}.MuiInputBase-multiline.MuiInputBase-marginDense{padding-top:3px}.MuiInputBase-fullWidth{width:100%}.MuiInputBase-input{font:inherit;color:currentColor;width:100%;border:0;height:1.1875em;margin:0;display:block;padding:6px 0 7px;min-width:0;background:0 0;box-sizing:content-box;-webkit-tap-highlight-color:transparent}.MuiInputBase-input::-webkit-input-placeholder{color:currentColor;opacity:.42;transition:opacity .2s cubic-bezier(.4,0,.2,1) 0s}.MuiInputBase-input::-moz-placeholder{color:currentColor;opacity:.42;transition:opacity .2s cubic-bezier(.4,0,.2,1) 0s}.MuiInputBase-input:-ms-input-placeholder{color:currentColor;opacity:.42;transition:opacity .2s cubic-bezier(.4,0,.2,1) 0s}.MuiInputBase-input::-ms-input-placeholder{color:currentColor;opacity:.42;transition:opacity .2s cubic-bezier(.4,0,.2,1) 0s}.MuiInputBase-input:focus{outline:0}.MuiInputBase-input:invalid{box-shadow:none}.MuiInputBase-input::-webkit-search-decoration{-webkit-appearance:none}.MuiInputBase-input.Mui-disabled{opacity:1}label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input::-webkit-input-placeholder{opacity:0}label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input::-moz-placeholder{opacity:0}label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input:-ms-input-placeholder{opacity:0}label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input::-ms-input-placeholder{opacity:0}label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input:focus::-webkit-input-placeholder{opacity:.42}label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input:focus::-moz-placeholder{opacity:.42}label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input:focus:-ms-input-placeholder{opacity:.42}label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input:focus::-ms-input-placeholder{opacity:.42}.MuiInputBase-inputMarginDense{padding-top:3px}.MuiInputBase-inputSelect{padding-right:24px}.MuiInputBase-inputMultiline{height:auto;resize:none;padding:0}.MuiInputBase-inputTypeSearch{-moz-appearance:textfield;-webkit-appearance:textfield}.MuiFormControl-root{border:0;margin:0;display:inline-flex;padding:0;position:relative;min-width:0;flex-direction:column;vertical-align:top}.MuiFormControl-marginNormal{margin-top:16px;margin-bottom:8px}.MuiFormControl-marginDense{margin-top:8px;margin-bottom:4px}.MuiFormControl-fullWidth{width:100%}.MuiFormLabel-root{color:rgba(0,0,0,.54);padding:0;font-size:1rem;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1;letter-spacing:.00938em}.MuiFormLabel-root.Mui-focused{color:#303f9f}.MuiFormLabel-root.Mui-disabled{color:rgba(0,0,0,.38)}.MuiFormLabel-root.Mui-error{color:#f44336}.MuiFormLabel-asterisk.Mui-error{color:#f44336}.MuiGrid-container{width:100%;display:flex;flex-wrap:wrap;box-sizing:border-box}.MuiGrid-item{margin:0;box-sizing:border-box}.MuiGrid-zeroMinWidth{min-width:0}.MuiGrid-direction-xs-column{flex-direction:column}.MuiGrid-direction-xs-column-reverse{flex-direction:column-reverse}.MuiGrid-direction-xs-row-reverse{flex-direction:row-reverse}.MuiGrid-wrap-xs-nowrap{flex-wrap:nowrap}.MuiGrid-wrap-xs-wrap-reverse{flex-wrap:wrap-reverse}.MuiGrid-align-items-xs-center{align-items:center}.MuiGrid-align-items-xs-flex-start{align-items:flex-start}.MuiGrid-align-items-xs-flex-end{align-items:flex-end}.MuiGrid-align-items-xs-baseline{align-items:baseline}.MuiGrid-align-content-xs-center{align-content:center}.MuiGrid-align-content-xs-flex-start{align-content:flex-start}.MuiGrid-align-content-xs-flex-end{align-content:flex-end}.MuiGrid-align-content-xs-space-between{align-content:space-between}.MuiGrid-align-content-xs-space-around{align-content:space-around}.MuiGrid-justify-xs-center{justify-content:center}.MuiGrid-justify-xs-flex-end{justify-content:flex-end}.MuiGrid-justify-xs-space-between{justify-content:space-between}.MuiGrid-justify-xs-space-around{justify-content:space-around}.MuiGrid-justify-xs-space-evenly{justify-content:space-evenly}.MuiGrid-spacing-xs-1{width:calc(100% + 8px);margin:-4px}.MuiGrid-spacing-xs-1>.MuiGrid-item{padding:4px}.MuiGrid-spacing-xs-2{width:calc(100% + 16px);margin:-8px}.MuiGrid-spacing-xs-2>.MuiGrid-item{padding:8px}.MuiGrid-spacing-xs-3{width:calc(100% + 24px);margin:-12px}.MuiGrid-spacing-xs-3>.MuiGrid-item{padding:12px}.MuiGrid-spacing-xs-4{width:calc(100% + 32px);margin:-16px}.MuiGrid-spacing-xs-4>.MuiGrid-item{padding:16px}.MuiGrid-spacing-xs-5{width:calc(100% + 40px);margin:-20px}.MuiGrid-spacing-xs-5>.MuiGrid-item{padding:20px}.MuiGrid-spacing-xs-6{width:calc(100% + 48px);margin:-24px}.MuiGrid-spacing-xs-6>.MuiGrid-item{padding:24px}.MuiGrid-spacing-xs-7{width:calc(100% + 56px);margin:-28px}.MuiGrid-spacing-xs-7>.MuiGrid-item{padding:28px}.MuiGrid-spacing-xs-8{width:calc(100% + 64px);margin:-32px}.MuiGrid-spacing-xs-8>.MuiGrid-item{padding:32px}.MuiGrid-spacing-xs-9{width:calc(100% + 72px);margin:-36px}.MuiGrid-spacing-xs-9>.MuiGrid-item{padding:36px}.MuiGrid-spacing-xs-10{width:calc(100% + 80px);margin:-40px}.MuiGrid-spacing-xs-10>.MuiGrid-item{padding:40px}.MuiGrid-grid-xs-auto{flex-grow:0;max-width:none;flex-basis:auto}.MuiGrid-grid-xs-true{flex-grow:1;max-width:100%;flex-basis:0}.MuiGrid-grid-xs-1{flex-grow:0;max-width:8.333333%;flex-basis:8.333333%}.MuiGrid-grid-xs-2{flex-grow:0;max-width:16.666667%;flex-basis:16.666667%}.MuiGrid-grid-xs-3{flex-grow:0;max-width:25%;flex-basis:25%}.MuiGrid-grid-xs-4{flex-grow:0;max-width:33.333333%;flex-basis:33.333333%}.MuiGrid-grid-xs-5{flex-grow:0;max-width:41.666667%;flex-basis:41.666667%}.MuiGrid-grid-xs-6{flex-grow:0;max-width:50%;flex-basis:50%}.MuiGrid-grid-xs-7{flex-grow:0;max-width:58.333333%;flex-basis:58.333333%}.MuiGrid-grid-xs-8{flex-grow:0;max-width:66.666667%;flex-basis:66.666667%}.MuiGrid-grid-xs-9{flex-grow:0;max-width:75%;flex-basis:75%}.MuiGrid-grid-xs-10{flex-grow:0;max-width:83.333333%;flex-basis:83.333333%}.MuiGrid-grid-xs-11{flex-grow:0;max-width:91.666667%;flex-basis:91.666667%}.MuiGrid-grid-xs-12{flex-grow:0;max-width:100%;flex-basis:100%}@media (min-width:600px){.MuiGrid-grid-sm-auto{flex-grow:0;max-width:none;flex-basis:auto}.MuiGrid-grid-sm-true{flex-grow:1;max-width:100%;flex-basis:0}.MuiGrid-grid-sm-1{flex-grow:0;max-width:8.333333%;flex-basis:8.333333%}.MuiGrid-grid-sm-2{flex-grow:0;max-width:16.666667%;flex-basis:16.666667%}.MuiGrid-grid-sm-3{flex-grow:0;max-width:25%;flex-basis:25%}.MuiGrid-grid-sm-4{flex-grow:0;max-width:33.333333%;flex-basis:33.333333%}.MuiGrid-grid-sm-5{flex-grow:0;max-width:41.666667%;flex-basis:41.666667%}.MuiGrid-grid-sm-6{flex-grow:0;max-width:50%;flex-basis:50%}.MuiGrid-grid-sm-7{flex-grow:0;max-width:58.333333%;flex-basis:58.333333%}.MuiGrid-grid-sm-8{flex-grow:0;max-width:66.666667%;flex-basis:66.666667%}.MuiGrid-grid-sm-9{flex-grow:0;max-width:75%;flex-basis:75%}.MuiGrid-grid-sm-10{flex-grow:0;max-width:83.333333%;flex-basis:83.333333%}.MuiGrid-grid-sm-11{flex-grow:0;max-width:91.666667%;flex-basis:91.666667%}.MuiGrid-grid-sm-12{flex-grow:0;max-width:100%;flex-basis:100%}}@media (min-width:960px){.MuiGrid-grid-md-auto{flex-grow:0;max-width:none;flex-basis:auto}.MuiGrid-grid-md-true{flex-grow:1;max-width:100%;flex-basis:0}.MuiGrid-grid-md-1{flex-grow:0;max-width:8.333333%;flex-basis:8.333333%}.MuiGrid-grid-md-2{flex-grow:0;max-width:16.666667%;flex-basis:16.666667%}.MuiGrid-grid-md-3{flex-grow:0;max-width:25%;flex-basis:25%}.MuiGrid-grid-md-4{flex-grow:0;max-width:33.333333%;flex-basis:33.333333%}.MuiGrid-grid-md-5{flex-grow:0;max-width:41.666667%;flex-basis:41.666667%}.MuiGrid-grid-md-6{flex-grow:0;max-width:50%;flex-basis:50%}.MuiGrid-grid-md-7{flex-grow:0;max-width:58.333333%;flex-basis:58.333333%}.MuiGrid-grid-md-8{flex-grow:0;max-width:66.666667%;flex-basis:66.666667%}.MuiGrid-grid-md-9{flex-grow:0;max-width:75%;flex-basis:75%}.MuiGrid-grid-md-10{flex-grow:0;max-width:83.333333%;flex-basis:83.333333%}.MuiGrid-grid-md-11{flex-grow:0;max-width:91.666667%;flex-basis:91.666667%}.MuiGrid-grid-md-12{flex-grow:0;max-width:100%;flex-basis:100%}}@media (min-width:1280px){.MuiGrid-grid-lg-auto{flex-grow:0;max-width:none;flex-basis:auto}.MuiGrid-grid-lg-true{flex-grow:1;max-width:100%;flex-basis:0}.MuiGrid-grid-lg-1{flex-grow:0;max-width:8.333333%;flex-basis:8.333333%}.MuiGrid-grid-lg-2{flex-grow:0;max-width:16.666667%;flex-basis:16.666667%}.MuiGrid-grid-lg-3{flex-grow:0;max-width:25%;flex-basis:25%}.MuiGrid-grid-lg-4{flex-grow:0;max-width:33.333333%;flex-basis:33.333333%}.MuiGrid-grid-lg-5{flex-grow:0;max-width:41.666667%;flex-basis:41.666667%}.MuiGrid-grid-lg-6{flex-grow:0;max-width:50%;flex-basis:50%}.MuiGrid-grid-lg-7{flex-grow:0;max-width:58.333333%;flex-basis:58.333333%}.MuiGrid-grid-lg-8{flex-grow:0;max-width:66.666667%;flex-basis:66.666667%}.MuiGrid-grid-lg-9{flex-grow:0;max-width:75%;flex-basis:75%}.MuiGrid-grid-lg-10{flex-grow:0;max-width:83.333333%;flex-basis:83.333333%}.MuiGrid-grid-lg-11{flex-grow:0;max-width:91.666667%;flex-basis:91.666667%}.MuiGrid-grid-lg-12{flex-grow:0;max-width:100%;flex-basis:100%}}@media (min-width:1920px){.MuiGrid-grid-xl-auto{flex-grow:0;max-width:none;flex-basis:auto}.MuiGrid-grid-xl-true{flex-grow:1;max-width:100%;flex-basis:0}.MuiGrid-grid-xl-1{flex-grow:0;max-width:8.333333%;flex-basis:8.333333%}.MuiGrid-grid-xl-2{flex-grow:0;max-width:16.666667%;flex-basis:16.666667%}.MuiGrid-grid-xl-3{flex-grow:0;max-width:25%;flex-basis:25%}.MuiGrid-grid-xl-4{flex-grow:0;max-width:33.333333%;flex-basis:33.333333%}.MuiGrid-grid-xl-5{flex-grow:0;max-width:41.666667%;flex-basis:41.666667%}.MuiGrid-grid-xl-6{flex-grow:0;max-width:50%;flex-basis:50%}.MuiGrid-grid-xl-7{flex-grow:0;max-width:58.333333%;flex-basis:58.333333%}.MuiGrid-grid-xl-8{flex-grow:0;max-width:66.666667%;flex-basis:66.666667%}.MuiGrid-grid-xl-9{flex-grow:0;max-width:75%;flex-basis:75%}.MuiGrid-grid-xl-10{flex-grow:0;max-width:83.333333%;flex-basis:83.333333%}.MuiGrid-grid-xl-11{flex-grow:0;max-width:91.666667%;flex-basis:91.666667%}.MuiGrid-grid-xl-12{flex-grow:0;max-width:100%;flex-basis:100%}}.MuiInput-root{position:relative}label+.MuiInput-formControl{margin-top:16px}.MuiInput-underline:after{left:0;right:0;bottom:0;content:"";position:absolute;transform:scaleX(0);transition:transform .2s cubic-bezier(0,0,.2,1) 0s;border-bottom:2px solid #303f9f;pointer-events:none}.MuiInput-underline.Mui-focused:after{transform:scaleX(1)}.MuiInput-underline.Mui-error:after{transform:scaleX(1);border-bottom-color:#f44336}.MuiInput-underline:before{left:0;right:0;bottom:0;content:"\00a0";position:absolute;transition:border-bottom-color .2s cubic-bezier(.4,0,.2,1) 0s;border-bottom:1px solid rgba(0,0,0,.42);pointer-events:none}.MuiInput-underline:hover:not(.Mui-disabled):before{border-bottom:2px solid rgba(0,0,0,.87)}.MuiInput-underline.Mui-disabled:before{border-bottom-style:dotted}@media (hover:none){.MuiInput-underline:hover:not(.Mui-disabled):before{border-bottom:1px solid rgba(0,0,0,.42)}}.MuiInputLabel-root{display:block;transform-origin:top left}.MuiInputLabel-formControl{top:0;left:0;position:absolute;transform:translate(0,24px) scale(1)}.MuiInputLabel-marginDense{transform:translate(0,21px) scale(1)}.MuiInputLabel-shrink{transform:translate(0,1.5px) scale(.75);transform-origin:top left}.MuiInputLabel-animated{transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s}.MuiInputLabel-filled{z-index:1;transform:translate(12px,20px) scale(1);pointer-events:none}.MuiInputLabel-filled.MuiInputLabel-marginDense{transform:translate(12px,17px) scale(1)}.MuiInputLabel-filled.MuiInputLabel-shrink{transform:translate(12px,10px) scale(.75)}.MuiInputLabel-filled.MuiInputLabel-shrink.MuiInputLabel-marginDense{transform:translate(12px,7px) scale(.75)}.MuiInputLabel-outlined{z-index:1;transform:translate(14px,20px) scale(1);pointer-events:none}.MuiInputLabel-outlined.MuiInputLabel-marginDense{transform:translate(14px,12px) scale(1)}.MuiInputLabel-outlined.MuiInputLabel-shrink{transform:translate(14px,-6px) scale(.75)}.MuiPopover-paper{outline:0;position:absolute;max-width:calc(100% - 32px);min-width:16px;max-height:calc(100% - 32px);min-height:16px;overflow-x:hidden;overflow-y:auto}.MuiMenu-paper{max-height:calc(100% - 96px);-webkit-overflow-scrolling:touch}.MuiMenu-list{outline:0}.MuiSelect-select{cursor:pointer;min-width:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:0;-moz-appearance:none;-webkit-appearance:none}.MuiSelect-select:focus{border-radius:0;background-color:rgba(0,0,0,.05)}.MuiSelect-select::-ms-expand{display:none}.MuiSelect-select.Mui-disabled{cursor:default}.MuiSelect-select[multiple]{height:auto}.MuiSelect-select:not([multiple]) optgroup,.MuiSelect-select:not([multiple]) option{background-color:#fff}.MuiSelect-outlined{border-radius:4px}.MuiSelect-selectMenu{height:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.MuiSelect-icon{top:calc(50% - 12px);color:rgba(0,0,0,.54);right:0;position:absolute;pointer-events:none}.MuiSelect-iconFilled{right:7px}.MuiSelect-iconOutlined{right:7px}.MuiTab-root{padding:6px 12px;overflow:hidden;position:relative;font-size:.875rem;max-width:264px;min-width:72px;box-sizing:border-box;min-height:48px;text-align:center;flex-shrink:0;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;line-height:1.75;white-space:normal;letter-spacing:.02857em;text-transform:uppercase}@media (min-width:960px){.MuiTab-root{font-size:.8125rem;min-width:160px}}.MuiTab-labelIcon{min-height:72px;padding-top:9px}.MuiTab-labelIcon .MuiTab-wrapper>:first-child{margin-bottom:6px}.MuiTab-textColorInherit{color:inherit;opacity:.7}.MuiTab-textColorInherit.Mui-selected{opacity:1}.MuiTab-textColorInherit.Mui-disabled{opacity:.4}.MuiTab-textColorPrimary{color:rgba(0,0,0,.54)}.MuiTab-textColorPrimary.Mui-selected{color:#3f51b5}.MuiTab-textColorPrimary.Mui-disabled{color:rgba(0,0,0,.38)}.MuiTab-textColorSecondary{color:rgba(0,0,0,.54)}.MuiTab-textColorSecondary.Mui-selected{color:#f50057}.MuiTab-textColorSecondary.Mui-disabled{color:rgba(0,0,0,.38)}.MuiTab-fullWidth{flex-grow:1;max-width:none;flex-basis:0;flex-shrink:1}.MuiTab-wrapped{font-size:.75rem;line-height:1.5}.MuiTab-wrapper{width:100%;display:inline-flex;align-items:center;flex-direction:column;justify-content:center}.MuiToolbar-root{display:flex;position:relative;align-items:center}.MuiToolbar-gutters{padding-left:16px;padding-right:16px}@media (min-width:600px){.MuiToolbar-gutters{padding-left:24px;padding-right:24px}}.MuiToolbar-regular{min-height:56px}@media (min-width:0px) and (orientation:landscape){.MuiToolbar-regular{min-height:48px}}@media (min-width:600px){.MuiToolbar-regular{min-height:64px}}.MuiToolbar-dense{min-height:48px}.jss217{width:100%;bottom:0;height:2px;position:absolute;transition:all .3s cubic-bezier(.4,0,.2,1) 0s}.jss218{background-color:#3f51b5}.jss219{background-color:#f50057}.jss220{right:0;width:2px;height:100%}.MuiTabs-root{display:flex;overflow:hidden;min-height:48px;-webkit-overflow-scrolling:touch}.MuiTabs-vertical{flex-direction:column}.MuiTabs-flexContainer{display:flex}.MuiTabs-flexContainerVertical{flex-direction:column}.MuiTabs-centered{justify-content:center}.MuiTabs-scroller{flex:1 1 auto;display:inline-block;position:relative;white-space:nowrap}.MuiTabs-fixed{width:100%;overflow-x:hidden}.MuiTabs-scrollable{overflow-x:scroll;scrollbar-width:none}.MuiTabs-scrollable::-webkit-scrollbar{display:none}@media (max-width:599.95px){.MuiTabs-scrollButtonsDesktop{display:none}}</style><link as="script" rel="preload" href="/cl-react-graph/webpack-runtime-3455764d5e013f2bd09f.js"/><link as="script" rel="preload" href="/cl-react-graph/app-fa5f974d3ad158e6ba60.js"/><link as="script" rel="preload" href="/cl-react-graph/commons-e0c3e05bc48e914ee5d5.js"/><link as="script" rel="preload" href="/cl-react-graph/component---src-pages-histogram-tsx-5f6b2eca6a5f570cd517.js"/><link as="fetch" rel="preload" href="/cl-react-graph/page-data/histogram/page-data.json" crossorigin="anonymous"/></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group" id="gatsby-focus-wrapper"><header class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary"><div class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"><h6 class="MuiTypography-root MuiTypography-h6 MuiTypography-colorInherit"><a href="/cl-react-graph/">Infosum Charts</a></h6><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label"><a href="/cl-react-graph/histogram">Histogram</a></span></button><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label"><a href="/cl-react-graph/line">Line Chart</a></span></button><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label"><a href="/cl-react-graph/pie">Pie Chart</a></span></button><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label"><a href="/cl-react-graph/tornado">Tornado Chart</a></span></button><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label"><a href="/cl-react-graph/joyplot">Joy Plot</a></span></button></div></header><div style="flex-grow:2;margin:0 auto;padding:0px 1.0875rem 1.45rem;padding-top:0;width:100%"><main><h2 class="MuiTypography-root MuiTypography-h2">Histogram</h2><div><div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10"><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"><div class="MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded"><div class="MuiCardContent-root"><div class="histogram-chart-container"></div><div class="histogram-chart-container"></div><div><ul style="list-style:none"><li><div style="cursor:pointer;display:inline-block;height:1rem;margin:0.25rem 0.5rem;width:1rem;background-color:#56b4bf;border:2px solid #56b4bf"></div> <!-- -->Baseline</li><li><div style="cursor:pointer;display:inline-block;height:1rem;margin:0.25rem 0.5rem;width:1rem;background-color:#D7263D;border:2px solid #D7263D"></div> <!-- -->Filtered</li></ul></div></div></div><br/><div class="MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded"><div class="MuiCardContent-root"><h6 class="MuiTypography-root MuiTypography-h6">JSX</h6><pre style="background-color:#303030;color:#eee;padding:1rem"><Histogram
annotations={[
{
color: 'grey',
value: '0%'
},
{
color: 'grey',
value: '0%'
},
{
color: 'red',
value: '-50%'
},
{
color: 'grey',
value: '-1%'
},
{
color: 'red',
value: '-56%'
},
{
color: 'grey',
value: '-99%'
},
{
color: 'grey',
value: '-100%'
},
{
color: 'red',
value: '-5%'
},
{
color: 'grey',
value: '0%'
},
{
color: 'red',
value: '-5%'
},
{
color: 'grey',
value: '0%'
},
{
color: 'grey',
value: '0%'
},
{
color: 'red',
value: '-5%'
},
{
color: 'grey',
value: '0%'
},
{
color: 'red',
value: '-50%'
},
{
color: 'grey',
value: '-67%'
},
{
color: 'red',
value: '-5%'
},
{
color: 'grey',
value: '0%'
},
{
color: 'red',
value: '-100%'
},
{
color: 'grey',
value: '-70%'
},
{
color: 'grey',
value: '-99%'
},
{
color: 'red',
value: '-5%'
},
{
color: 'grey',
value: '-65%'
},
{
color: 'red',
value: '-5%'
},
{
color: 'green',
value: '-16%'
},
{
color: 'green',
value: '-10%'
},
{
color: 'green',
value: '-99%'
}
]}
axis={{
x: {
scale: 'ORDINAL'
},
y: {
ticks: 3
}
}}
bar={{
hover: {
lighten: 0.1
},
overlayMargin: 5
}}
colorScheme={[
'#56b4bf',
'#D7263D',
'#f9c80e',
'#33ba95',
'#dbdbdb',
'#FF7101',
'#888888',
'#FBD7D9',
'#7d5d2e',
'#227839',
'#449098',
'#ff8d33',
'#ff7101',
'#008762',
'#c5e5e9',
'#e6e6e6',
'#cdcdcd',
'#cccccc',
'#77c3cb',
'#007656',
'#cc5a00',
'#00a97b',
'#F9C80E',
'#a9a9a9',
'#d7263d'
]}
data={{
bins: [
'Female',
'Male',
'Other',
'sdfdfg',
'dagdsg',
'sfsd',
'ds34fsdf',
'dfsfsd',
'sdfs34dfs',
'ghf34hfg',
'fd33gag',
'jg343hj',
'a343wes',
'ye343ye',
'fd343gjs',
'sdfd343fg',
'34',
'sfsd',
'433',
'45245',
'745',
'ghfhf45g',
'fd45ag',
'j3ghj',
'3434211',
'4564526',
'5645645'
],
counts: [
{
data: [
79200,
52400,
13300,
79200,
52400,
13300,
79200,
52400,
13300,
79200,
52400,
13300,
79200,
52400,
13300,
79200,
52400,
13300,
79200,
52400,
13300,
79200,
52400,
13300,
79200,
52400,
13300
],
label: 'Baseline'
},
{
data: [
60000,
34230,
10000,
60000,
34230,
10000,
60000,
34230,
10000,
60000,
34230,
10000,
60000,
34230,
10000,
60000,
34230,
10000,
60000,
34230,
10000,
60000,
34230,
10000,
60000,
34230,
10000
],
label: 'Filtered'
}
]
}}
delay={0}
duration={400}
grid={{
x: {
style: {
fill: '#000',
opacity: 1,
'shape-rendering': 'auto',
stroke: '#ccc',
'stroke-opacity': 0.4,
'stroke-width': 1,
visible: true
},
ticks: 5
},
y: {
style: {
fill: '#000',
opacity: 1,
'shape-rendering': 'auto',
stroke: '#ccc',
'stroke-opacity': 0.4,
'stroke-width': 1,
visible: true
},
ticks: 5
}
}}
groupLayout={2}
height={420}
onClick={function noRefCheck() {}}
showBinPercentages={[
true,
true
]}
tipContentFn={function noRefCheck() {}}
visible={{}}
width={420}
/></pre></div></div></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"><div class="MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded"><div class="MuiCardContent-root"><div class="MuiTabs-root"><div class="MuiTabs-scroller MuiTabs-fixed" style="overflow:hidden"><div class="MuiTabs-flexContainer" role="tablist"><button class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected" tabindex="0" type="button" role="tab" aria-selected="true"><span class="MuiTab-wrapper">Data</span><span class="jss217 jss219 MuiTabs-indicator"></span></button><button class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit" tabindex="0" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Styling</span></button><button class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit" tabindex="0" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Animation</span></button><button class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit" tabindex="0" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Grid</span></button><button class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit" tabindex="0" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Axes</span></button></div></div></div><div class="MuiTypography-root MuiTypography-body1" style="padding:24px"><div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10"><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"><div class="MuiFormControl-root MuiTextField-root"><label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled" data-shrink="true">Chart direction</label><div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"><div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input MuiInputBase-inputSelect" tabindex="0" role="button" aria-haspopup="listbox">Histogram</div><input type="hidden" value="Histogram"/><svg class="MuiSvgIcon-root MuiSelect-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M7 10l5 5 5-5z"></path></svg></div></div></div></div><div><button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary" tabindex="0" type="button"><span class="MuiButton-label">Add</span></button><span tabindex="0" class="data-grid-container"><table class="data-grid my-awesome-extra-class"><thead><tr><th class="action-cell">Bin</th><th class="action-cell">Baseline<button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">Delete</span></button></th><th class="action-cell">Filtered<button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">Delete</span></button></th></tr></thead><tbody><tr><td class="cell"><span class="value-viewer">Female</span></td><td class="cell"><span class="value-viewer">79200</span></td><td class="cell"><span class="value-viewer">60000</span></td></tr><tr><td class="cell"><span class="value-viewer">Male</span></td><td class="cell"><span class="value-viewer">52400</span></td><td class="cell"><span class="value-viewer">34230</span></td></tr><tr><td class="cell"><span class="value-viewer">Other</span></td><td class="cell"><span class="value-viewer">13300</span></td><td class="cell"><span class="value-viewer">10000</span></td></tr><tr><td class="cell"><span class="value-viewer">sdfdfg</span></td><td class="cell"><span class="value-viewer">79200</span></td><td class="cell"><span class="value-viewer">60000</span></td></tr><tr><td class="cell"><span class="value-viewer">dagdsg</span></td><td class="cell"><span class="value-viewer">52400</span></td><td class="cell"><span class="value-viewer">34230</span></td></tr><tr><td class="cell"><span class="value-viewer">sfsd</span></td><td class="cell"><span class="value-viewer">13300</span></td><td class="cell"><span class="value-viewer">10000</span></td></tr><tr><td class="cell"><span class="value-viewer">ds34fsdf</span></td><td class="cell"><span class="value-viewer">79200</span></td><td class="cell"><span class="value-viewer">60000</span></td></tr><tr><td class="cell"><span class="value-viewer">dfsfsd</span></td><td class="cell"><span class="value-viewer">52400</span></td><td class="cell"><span class="value-viewer">34230</span></td></tr><tr><td class="cell"><span class="value-viewer">sdfs34dfs</span></td><td class="cell"><span class="value-viewer">13300</span></td><td class="cell"><span class="value-viewer">10000</span></td></tr><tr><td class="cell"><span class="value-viewer">ghf34hfg</span></td><td class="cell"><span class="value-viewer">79200</span></td><td class="cell"><span class="value-viewer">60000</span></td></tr><tr><td class="cell"><span class="value-viewer">fd33gag</span></td><td class="cell"><span class="value-viewer">52400</span></td><td class="cell"><span class="value-viewer">34230</span></td></tr><tr><td class="cell"><span class="value-viewer">jg343hj</span></td><td class="cell"><span class="value-viewer">13300</span></td><td class="cell"><span class="value-viewer">10000</span></td></tr><tr><td class="cell"><span class="value-viewer">a343wes</span></td><td class="cell"><span class="value-viewer">79200</span></td><td class="cell"><span class="value-viewer">60000</span></td></tr><tr><td class="cell"><span class="value-viewer">ye343ye</span></td><td class="cell"><span class="value-viewer">52400</span></td><td class="cell"><span class="value-viewer">34230</span></td></tr><tr><td class="cell"><span class="value-viewer">fd343gjs</span></td><td class="cell"><span class="value-viewer">13300</span></td><td class="cell"><span class="value-viewer">10000</span></td></tr><tr><td class="cell"><span class="value-viewer">sdfd343fg</span></td><td class="cell"><span class="value-viewer">79200</span></td><td class="cell"><span class="value-viewer">60000</span></td></tr><tr><td class="cell"><span class="value-viewer">34</span></td><td class="cell"><span class="value-viewer">52400</span></td><td class="cell"><span class="value-viewer">34230</span></td></tr><tr><td class="cell"><span class="value-viewer">sfsd</span></td><td class="cell"><span class="value-viewer">13300</span></td><td class="cell"><span class="value-viewer">10000</span></td></tr><tr><td class="cell"><span class="value-viewer">433</span></td><td class="cell"><span class="value-viewer">79200</span></td><td class="cell"><span class="value-viewer">60000</span></td></tr><tr><td class="cell"><span class="value-viewer">45245</span></td><td class="cell"><span class="value-viewer">52400</span></td><td class="cell"><span class="value-viewer">34230</span></td></tr><tr><td class="cell"><span class="value-viewer">745</span></td><td class="cell"><span class="value-viewer">13300</span></td><td class="cell"><span class="value-viewer">10000</span></td></tr><tr><td class="cell"><span class="value-viewer">ghfhf45g</span></td><td class="cell"><span class="value-viewer">79200</span></td><td class="cell"><span class="value-viewer">60000</span></td></tr><tr><td class="cell"><span class="value-viewer">fd45ag</span></td><td class="cell"><span class="value-viewer">52400</span></td><td class="cell"><span class="value-viewer">34230</span></td></tr><tr><td class="cell"><span class="value-viewer">j3ghj</span></td><td class="cell"><span class="value-viewer">13300</span></td><td class="cell"><span class="value-viewer">10000</span></td></tr><tr><td class="cell"><span class="value-viewer">3434211</span></td><td class="cell"><span class="value-viewer">79200</span></td><td class="cell"><span class="value-viewer">60000</span></td></tr><tr><td class="cell"><span class="value-viewer">4564526</span></td><td class="cell"><span class="value-viewer">52400</span></td><td class="cell"><span class="value-viewer">34230</span></td></tr><tr><td class="cell"><span class="value-viewer">5645645</span></td><td class="cell"><span class="value-viewer">13300</span></td><td class="cell"><span class="value-viewer">10000</span></td></tr></tbody></table></span></div></div></div></div></div></div></div></main></div><footer>© <!-- -->2019<!-- -->, Built by<!-- --> <a href="https://www.infosum.com">InfoSum</a></footer></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/histogram/";window.webpackCompilationHash="441d898894fb92391b00";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-fa5f974d3ad158e6ba60.js"],"component---src-pages-404-js":["/component---src-pages-404-js-71b5e2580b1c6c884b46.js"],"component---src-pages-histogram-tsx":["/component---src-pages-histogram-tsx-5f6b2eca6a5f570cd517.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-de00e2cec0c55bddeaa9.js"],"component---src-pages-joyplot-tsx":["/component---src-pages-joyplot-tsx-e0e1373b6c72bec16451.js"],"component---src-pages-line-tsx":["/component---src-pages-line-tsx-b96cdb8bb487ab78f684.js"],"component---src-pages-map-tsx":["/component---src-pages-map-tsx-45bcfefdb631bf8c16ec.js"],"component---src-pages-pie-tsx":["/component---src-pages-pie-tsx-2ba32303ad1736c79c70.js"],"component---src-pages-tornado-tsx":["/component---src-pages-tornado-tsx-6b487207a3affdc0ed2d.js"]};/*]]>*/</script><script src="/cl-react-graph/component---src-pages-histogram-tsx-5f6b2eca6a5f570cd517.js" async=""></script><script src="/cl-react-graph/commons-e0c3e05bc48e914ee5d5.js" async=""></script><script src="/cl-react-graph/app-fa5f974d3ad158e6ba60.js" async=""></script><script src="/cl-react-graph/webpack-runtime-3455764d5e013f2bd09f.js" async=""></script></body></html>