45 Chart Examples
FlameChart: Flamechart component (based on Chrome DevTools) with standalone support. Interesting color-handling code.
mr data generator: Generate data by clicking; download as JSON/CSV. D3, Redux.
npm trends: Compare npm package download counts over time. Homegrown canvas charts.
mortgage mobx: Mortgage overpayment calculator using React with MobX. Uses MobX @actions.
sentry: Large real-world project: Real-time crash reporting. Python backend.
Student insights: Dashboard for educators- see progress, interventions. Powerful dashboard. Use user: firstname.lastname@example.org, password: demo-password
linked highlighting vega redux: Linked hilighting between line chart, radial heatmap. Uses Vega: a declarative visualisation grammar. Voroni transforms for mouse tracking.
Party alliances: Visualization of party alliances in the Norwegian parliament. Highcharts charts, sparkline component.
steepless: Mapping tool to find flattest routes and avoid the hilliest routes. Good for walking/biking in SF.
gitchecker: Shows stats for Github projects-stars, graphs of commits, issues. Elixir, Phoenix backend with Ecto models.
Chartist codepen: Charts with Chartist- SVG, responsive. Uses Modernizr to detect SVG support.
cake chart: Interactive multi-layer piechart visualization, like a treemap. Uses JSS, CSSTransitionGroup.
Victory: Interactive visualization components. Chart types include Bar, Line, Pie, Scatter. Can animate as props change.
react thermometer: Simple thermometer widget, good for dashboards.
d3 react squared dogs: Multiple charts with synch'd filtering and hiliting.Uses d3-react-squared, redux.
Yosemite Weather Trends: Five-year weather trends in Yosemite, graphed with D3.
FinanceReactNative: iOS's Stocks App clone. Pulls data from Yahoo finance using fetch. Flux, react-native-simple-store.
mortgage: Mortgage overpayment calculator using React, Redux and D3. Stateless functional components, elegant binding of Flux actions to form inputs.
react faux dom: D3 within React the right way: Fake DOM to trick D3 into returning React Virtual DOM. Full D3 API, server rendering.
WRDebug (Browser Only)
: ✅ Pre-render cache hit. |