119 Visualization Examples
illustrated algorithms: Amazing interactive visualizations of algorithm execution. Fast-forward and rewind. Babel-plugin-trace-execution captures execution details. Deployed with Now.
FlameChart: Flamechart component (based on Chrome DevTools) with standalone support. Interesting color-handling code.
relay visual learners: Interactive diagram about Relay (GraphQL client)... mouseover diagram to see docs. Loads SVG fragments from XML files.
react music: Make dope beats with React. Spectrum analyzer using WebAudio API, Canvas. Song has tempo, sequencers, audio samples.
learnGitBranching: Great intro to Git, branching - visualizations, exercises
n queens visualizer: Visualizes solutions to the N-Queens Chess problem
d4: D3 with declarative jsx style: replaces D3's Enter, Update, Exit with render.
central limit: A visual explanation of the central limit theorem.
teamchatviz: Slack visualization - top messages, emojis, cluster analysis. Visualizations using Uber's react-vis. Koa/Postgres backend.
npm trends: Compare npm package download counts over time. Homegrown canvas charts.
mortgage mobx: Mortgage overpayment calculator using React with MobX. Uses MobX @actions.
roast tracker: Firebase app to track coffee roasts. Login with Facebook or Google.
datamaps: Platform for map visualizations. Upload CSV, customize appearance. Can download PNG or SVG.
react calendar heatmap: A calendar heatmap component built on SVG, inspired by github's commit calendar graph
lymbus: Converts lyrics into word cloud and frequency delimited categorized list
Conf videos: OpenVisConf talks are represented as 'filmstrips', click to play. Top words and bi-grams are shown beneath.
react mapbox gl: Mapbox-gl-js binding. Very smooth vector graphics, zooming.
pdxlivebus: Live feed of Portland bus/rail locations. Same codebase for web, native apps. Leaflet maps. Does 'hot reloading' server-side in Express by watching for FS changes, and clearing require cache.
oscars2016: Analyzing Twitter hashtags. Backend uses Apache Beam, Kafka, Flink.
linked highlighting vega redux: Linked hilighting between line chart, radial heatmap. Uses Vega: a declarative visualisation grammar. Voroni transforms for mouse tracking.
WRDebug (Browser Only)
: ✅ Pre-render cache hit. |