cl-react-graph
Version:
24 lines • 28.2 kB
HTML
<html><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"/><meta name="generator" content="Gatsby 4.8.0"/><style data-href="/styles.743788f22edbfb6db745.css" data-identity="gatsby-global-css">@font-face{font-family:Circular;src:url(/static/CircularStd-Medium-9ffafeddf192e8c8a11189dcf85883c6.otf)}@font-face{font-family:ProximaNova;src:url("/static/Proxima Nova Light-a5d2f11491b95c96d67277c5958c0616.ttf")}body{font-family:ProximaNova}h1,h2{font-family:Circular}</style><style data-styled="" data-styled-version="5.3.3">.cqBkYw{color:#aaa;}/*!sc*/
data-styled.g1[id="Footer__StyledFooter-sc-1jzmar1-0"]{content:"cqBkYw,"}/*!sc*/
.cDWUKR{margin:0;font-size:1.3rem;font-weight:300;margin:0 1rem;}/*!sc*/
data-styled.g2[id="Navbar__H1-sc-1ys9ku-0"]{content:"cDWUKR,"}/*!sc*/
.giAkAV{margin-bottom:1rem;}/*!sc*/
.giAkAV ul{list-style:none;padding:0;}/*!sc*/
.giAkAV li{padding:0;margin:0;}/*!sc*/
.giAkAV h2{margin:0 1rem 0.75rem 1rem;font-size:1.1rem;}/*!sc*/
data-styled.g3[id="MenuItems__Section-sc-mxwozl-0"]{content:"giAkAV,"}/*!sc*/
.icyBlz{padding:0.5rem 2rem;-webkit-text-decoration:none;text-decoration:none;display:block;color:hsla(206,4%,36%,1);}/*!sc*/
data-styled.g4[id="MenuItems__MenuItem-sc-mxwozl-1"]{content:"icyBlz,"}/*!sc*/
.fKuPxd{background-color:#fff;border-right:1px solid hsla(210,31%,90%,1);padding:1.75rem 0;}/*!sc*/
@media (max-width:640px){.fKuPxd{display:none;}}/*!sc*/
data-styled.g5[id="SideMenu__Bg-sc-1v6nn7o-0"]{content:"fKuPxd,"}/*!sc*/
.fQgQNj{color:hsla(213,4%,54%,1);}/*!sc*/
data-styled.g6[id="Layout__Context-sc-1ulvp9i-0"]{content:"fQgQNj,"}/*!sc*/
.eopmYB{display:grid;grid-template-columns:1fr 1fr;}/*!sc*/
@media (max-width:640px){.eopmYB{grid-template-columns:1fr;}}/*!sc*/
data-styled.g7[id="TwoColumns-sc-1oyhsq-0"]{content:"eopmYB,"}/*!sc*/
</style><link as="script" rel="preload" href="/webpack-runtime-d72bf50254ab490b1397.js"/><link as="script" rel="preload" href="/framework-ddef3b4109f51a02059a.js"/><link as="script" rel="preload" href="/app-dc88c3c03a67b56feec0.js"/><link as="script" rel="preload" href="/0680fa7360df0cf0ed2c80fa3dd9a3246db901ba-9a901029dde01992fd63.js"/><link as="script" rel="preload" href="/component---src-pages-joyplot-tsx-8f860ae5f1c7aad0b07e.js"/><link as="fetch" rel="preload" href="/page-data/joyplot/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="Layout__Context-sc-1ulvp9i-0 fQgQNj"><div style="display:flex;align-items:center;width:100%;justify-content:space-between"><div style="width:35rem;display:flex;align-items:center"><svg role="img" height="35" width="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"><g><path fill="hsla(208, 69%, 66%, 1)" d="M28.48,10.92H24.09V6.79A6.6,6.6,0,0,0,17.51.21h0a6.6,6.6,0,0,0-6.57,6.58v4.13h4.42a8.76,8.76,0,0,1,8.76,8.76v4.4h4.36a6.6,6.6,0,0,0,6.57-6.58h0A6.6,6.6,0,0,0,28.48,10.92Z"></path><path fill="hsla(29, 92%, 57%, 1)" d="M19.7,24.08a8.76,8.76,0,0,1-8.76-8.76v-4.4H6.58A6.6,6.6,0,0,0,0,17.5H0a6.6,6.6,0,0,0,6.58,6.58H11v4.13a6.6,6.6,0,0,0,6.58,6.58h0a6.6,6.6,0,0,0,6.58-6.58V24.08H19.7Z"></path><path fill="hsla(216, 60%, 18%, 1)" d="M15.36,10.92H10.94v4.4a8.76,8.76,0,0,0,8.76,8.76h4.42v-4.4A8.76,8.76,0,0,0,15.36,10.92Z"></path></g></svg><h1 class="Navbar__H1-sc-1ys9ku-0 cDWUKR">Cl React Charts</h1></div></div><div style="display:grid;grid-template-columns:20rem 1fr;grid-gap:1rem"><div class="SideMenu__Bg-sc-1v6nn7o-0 fKuPxd"><div class="MenuItems__Section-sc-mxwozl-0 giAkAV"><h2>Getting Started</h2><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/getting-started">Getting started</a></div><div class="MenuItems__Section-sc-mxwozl-0 giAkAV"><h2>Common Components</h2><ul><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/axis">Axis</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/area-fill">Area fill</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/bars">Bars</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/brush">Brush</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/grid">Grid</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/label">Label</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/line">Line</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/path">Path</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/point">Point</a></li></ul></div><div class="MenuItems__Section-sc-mxwozl-0 giAkAV"><h2>Charts</h2><ul><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/bar-chart">Bar chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/chord">Chord</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/histogram">Histogram</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/joyplot">Joyplot</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/line">Line chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/pie">Pie chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/radar">Radar chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/scatter">Scatter chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/tornado">Tornado chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/upset">Upset chart</a></li></ul></div></div><main><h2>JoyPlot</h2><div class="TwoColumns-sc-1oyhsq-0 eopmYB"><div><h3>In market for a car</h3></div><pre class="prism-code language-jsx" style="background-color:#faf8f5;color:#728fcb;padding:1rem"><div class="token-line" style="color:#728fcb"><span class="token keyword" style="color:#728fcb">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> Base</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> Grid</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">from</span><span class="token plain"> 'cl</span><span class="token operator" style="color:#063289">-</span><span class="token plain">react</span><span class="token operator" style="color:#063289">-</span><span class="token plain">graph</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> data </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"bins"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string" style="color:#728fcb">"0, 2500"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string" style="color:#728fcb">"2500, 5000"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string" style="color:#728fcb">"5000, 10000"</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"counts"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"label"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">"in market for car: No"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"data"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token number" style="color:#063289">500</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token number" style="color:#063289">400</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token number" style="color:#063289">4000</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"title"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">"No"</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"bins"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string" style="color:#728fcb">"0, 2500"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string" style="color:#728fcb">"2500, 5000"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string" style="color:#728fcb">"5000, 10000"</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"counts"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"label"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">"in market for car: Yes"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"data"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token number" style="color:#063289">300</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token number" style="color:#063289">300</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token number" style="color:#063289">2800</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token string-property property" style="color:#b29762">"title"</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">"Yes"</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#b29762">MyComponent</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain">ref</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> width</span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token function" style="color:#b29762">useWidth</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token string" style="color:#728fcb">'90%'</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">return</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag" style="color:#063289">div</span><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">ref</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag class-name" style="color:#063289">JoyPlot</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">data</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">data</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">xAxisHeight</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript number" style="color:#063289">20</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">colorScheme</span><span class="token tag attr-value punctuation attr-equals" style="color:#b6ad9a">=</span><span class="token tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag attr-value" style="color:#728fcb">hsla(140, 60%, 88%, 1)</span><span class="token tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">width</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">height</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">data</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">.</span><span class="token tag script language-javascript" style="color:#063289">length </span><span class="token tag script language-javascript operator" style="color:#063289">*</span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript number" style="color:#063289">150</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"> </span><span class="token tag punctuation" style="color:#b6ad9a">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"></</span><span class="token tag" style="color:#063289">div</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div></pre></div></main></div><footer class="Footer__StyledFooter-sc-1jzmar1-0 cqBkYw">© <!-- -->2022<!-- -->, Built by<!-- --> <a href="https://www.infosum.com">InfoSum</a></footer></div></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="/joyplot/";window.___webpackCompilationHash="16a61fe3e4c44d3004ad";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-f5609c70136eb303782f.js"],"app":["/app-dc88c3c03a67b56feec0.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-a8e0b718712e1ff74b4f.js"],"component---src-pages-area-fill-tsx":["/component---src-pages-area-fill-tsx-b3dda5394e987925cf39.js"],"component---src-pages-axis-tsx":["/component---src-pages-axis-tsx-0bd5ef3597ddfeee0e81.js"],"component---src-pages-bar-chart-tsx":["/component---src-pages-bar-chart-tsx-d254478f3c21ac7c40fc.js"],"component---src-pages-bars-tsx":["/component---src-pages-bars-tsx-e2e7080f0da27d1830bd.js"],"component---src-pages-brush-tsx":["/component---src-pages-brush-tsx-9caaaa0b0372a37b2571.js"],"component---src-pages-chord-tsx":["/component---src-pages-chord-tsx-49c0c17903f443033374.js"],"component---src-pages-getting-started-tsx":["/component---src-pages-getting-started-tsx-bf96b39b97233f9a10ce.js"],"component---src-pages-grid-tsx":["/component---src-pages-grid-tsx-66d8309e86bc2bdccc06.js"],"component---src-pages-histogram-tsx":["/component---src-pages-histogram-tsx-cc5774c90165e9bdd258.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-57047d176a46519af21f.js"],"component---src-pages-joyplot-tsx":["/component---src-pages-joyplot-tsx-8f860ae5f1c7aad0b07e.js"],"component---src-pages-label-tsx":["/component---src-pages-label-tsx-216fd8fedc57cd2099ce.js"],"component---src-pages-line-tsx":["/component---src-pages-line-tsx-a82d106917f2617765a8.js"],"component---src-pages-path-tsx":["/component---src-pages-path-tsx-f805af9da7fe583cf6c3.js"],"component---src-pages-pie-tsx":["/component---src-pages-pie-tsx-be2ddfe685fe455d13a6.js"],"component---src-pages-point-tsx":["/component---src-pages-point-tsx-46b3acc738db03d4edf9.js"],"component---src-pages-radar-tsx":["/component---src-pages-radar-tsx-b06ad00defc5dfea1254.js"],"component---src-pages-scatter-tsx":["/component---src-pages-scatter-tsx-a98d496465a9586dca4b.js"],"component---src-pages-tornado-tsx":["/component---src-pages-tornado-tsx-7579d891e0107e739429.js"],"component---src-pages-upset-tsx":["/component---src-pages-upset-tsx-1d9e012d1c5e7c7d33d7.js"]};/*]]>*/</script><script src="/polyfill-f5609c70136eb303782f.js" nomodule=""></script><script src="/component---src-pages-joyplot-tsx-8f860ae5f1c7aad0b07e.js" async=""></script><script src="/0680fa7360df0cf0ed2c80fa3dd9a3246db901ba-9a901029dde01992fd63.js" async=""></script><script src="/app-dc88c3c03a67b56feec0.js" async=""></script><script src="/framework-ddef3b4109f51a02059a.js" async=""></script><script src="/webpack-runtime-d72bf50254ab490b1397.js" async=""></script></body></html>