cl-react-graph
Version:
React D3 Charts
20 lines • 9.31 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.25.7"/><style data-href="/cl-react-graph/styles.5647b5d282663a205155.css" data-identity="gatsby-global-css">@font-face{font-family:Circular;src:url(/cl-react-graph/static/CircularStd-Medium-9ffafeddf192e8c8a11189dcf85883c6.otf)}@font-face{font-family:ProximaNova;src:url("/cl-react-graph/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*/
.kWLZbw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none ;text-decoration:none ;}/*!sc*/
.kWLZbw h1{color:hsla(213,4%,54%,1);}/*!sc*/
data-styled.g3[id="Navbar__TitleLink-sc-1ys9ku-1"]{content:"kWLZbw,"}/*!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.g4[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.g5[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.g6[id="SideMenu__Bg-sc-1v6nn7o-0"]{content:"fKuPxd,"}/*!sc*/
.fQgQNj{color:hsla(213,4%,54%,1);}/*!sc*/
data-styled.g7[id="Layout__Context-sc-1ulvp9i-0"]{content:"fQgQNj,"}/*!sc*/
</style></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"><a aria-current="page" class="Navbar__TitleLink-sc-1ys9ku-1 kWLZbw" href="/cl-react-graph/"><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 Graphs</h1></a></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="/cl-react-graph/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="/cl-react-graph/axis">Axis</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/area-fill">Area fill</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/bars">Bars</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/brush">Brush</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/grid">Grid</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/label">Label</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/line">Line</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/path">Path</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/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="/cl-react-graph/bar-chart">Bar chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/chord">Chord</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/histogram">Histogram</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/joyplot">Joyplot</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/line">Line chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/map">Map</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/pie">Pie chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/radar">Radar chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/scatter">Scatter chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/tornado">Tornado chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/upset">Upset chart</a></li></ul></div></div><main><h1>CL React Graph</h1><p>CL React Graph exposes a composable set of React building block components to build charts, graphs and visualizations.</p><p>In addition CL React Graph provides higher level Chart components, created by composing these building blocks.</p><p>To get started check out the<!-- --> <a href="/cl-react-graph/getting-started">quick start guide</a></p></main></div><footer class="Footer__StyledFooter-sc-1jzmar1-0 cqBkYw">© <!-- -->2023<!-- -->, 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="/";window.___webpackCompilationHash="88766a05bc87869af435";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-3a5c885b38de3686a087.js"],"app":["/app-31d1edab19a40b2bf9b4.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-3ecdc8908907038743e5.js"],"component---src-pages-area-fill-tsx":["/component---src-pages-area-fill-tsx-383f5b3a3834c47bbf86.js"],"component---src-pages-axis-tsx":["/component---src-pages-axis-tsx-185cb574d1e4c818e9f4.js"],"component---src-pages-bar-chart-tsx":["/component---src-pages-bar-chart-tsx-c964f9adb76ffc18059b.js"],"component---src-pages-bars-tsx":["/component---src-pages-bars-tsx-e38506d3d162e9fbc82f.js"],"component---src-pages-brush-tsx":["/component---src-pages-brush-tsx-ff4445138245243b2796.js"],"component---src-pages-chord-tsx":["/component---src-pages-chord-tsx-56e22290f4941c066ee0.js"],"component---src-pages-getting-started-tsx":["/component---src-pages-getting-started-tsx-142e263abcf310b43c84.js"],"component---src-pages-grid-tsx":["/component---src-pages-grid-tsx-64e86b612a846fba2ead.js"],"component---src-pages-histogram-tsx":["/component---src-pages-histogram-tsx-d67bde4a66a37629267d.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-e454ef042d6e35ddc020.js"],"component---src-pages-joyplot-tsx":["/component---src-pages-joyplot-tsx-5b038ec3d6cdaae990e7.js"],"component---src-pages-label-tsx":["/component---src-pages-label-tsx-171c6231d66899241edd.js"],"component---src-pages-line-tsx":["/component---src-pages-line-tsx-b690436c85c0c25824a8.js"],"component---src-pages-map-tsx":["/component---src-pages-map-tsx-78aa818928578ced709c.js"],"component---src-pages-path-tsx":["/component---src-pages-path-tsx-971a5508c0c165b19448.js"],"component---src-pages-pie-tsx":["/component---src-pages-pie-tsx-a6c5bd2f8e5be90f97ca.js"],"component---src-pages-point-tsx":["/component---src-pages-point-tsx-e97bfcef451a2f0e42af.js"],"component---src-pages-radar-tsx":["/component---src-pages-radar-tsx-b84ff762db3680d1cf50.js"],"component---src-pages-scatter-tsx":["/component---src-pages-scatter-tsx-94fd91bdf1ef6b5d7617.js"],"component---src-pages-tornado-tsx":["/component---src-pages-tornado-tsx-e90cb988e5d2829cb985.js"],"component---src-pages-upset-tsx":["/component---src-pages-upset-tsx-95618691202f2a2fb825.js"]};/*]]>*/</script><script src="/cl-react-graph/polyfill-3a5c885b38de3686a087.js" nomodule=""></script><script src="/cl-react-graph/app-31d1edab19a40b2bf9b4.js" async=""></script><script src="/cl-react-graph/framework-be0f29fe10d2c8b3047b.js" async=""></script><script src="/cl-react-graph/webpack-runtime-1d87aff3c3bf7c65dd10.js" async=""></script></body></html>