Last active
December 29, 2016 07:25
-
-
Save mujimu/8ef5e0da8f15490ae3de to your computer and use it in GitHub Desktop.
D3.js Libraries, Lessons and Tutorials
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| D3 - Data Driven Documents | |
| http://d3js.org/ | |
| low level library to display/manipulate data in HTML/CSS & SVG | |
| API Ref: https://github.com/mbostock/d3/wiki/API-Reference | |
| D3 Plus - D3 Extension plugin | |
| https://github.com/alexandersimoes/d3plus | |
| Fabric - HTML5 Canvas library | |
| http://fabricjs.com/ | |
| SVG->canvas (helpful to save SVG to img) | |
| ## Higher level libraries based on D3 | |
| NVD3 | |
| http://nvd3.org/ | |
| advanced line, area, bar, scatter, bubble, bullet, pie, donut | |
| Epoch | |
| http://fastly.github.io/epoch/ | |
| real-time bar, heapmap, guage, area, line. basic bar, area, line, pie, donut, scatter, bubble | |
| C3.js | |
| http://c3js.org/ | |
| advanced line, spline, area, bar, scatter, pie, donut, step, gauge | |
| Dimple.js | |
| http://dimplejs.org/ | |
| advanced bar, line, area, pie, donut, scatter, bubble, step bar/area | |
| Rickshaw | |
| http://code.shutterstock.com/rickshaw/ | |
| real-time time-series, area, bar, line, scatter | |
| Cubism | |
| https://square.github.io/cubism/ | |
| real-time time-series, compact horizon | |
| Vega (High level viz spec language over D3) | |
| http://trifacta.github.io/vega/ | |
| visualization grammar in JSON, serverside headless render (Node.js), bar, area, line, force-directed, pyramid bar, word cloud, choropleth map | |
| DC (D3 + Crossfilter) - dimentional charting | |
| http://dc-js.github.io/dc.js/ | |
| bar, area, line, bubble, pie, donut | |
| R2D3 (D3 + RaphaelJS) | |
| https://github.com/mhemesath/r2d3/ | |
| bar, area, line, bubble, pie, donut | |
| Datamaps (D3 + TopoJSON) - interactive mapping | |
| http://datamaps.github.io/ | |
| basic map, choropleth, US/World | |
| Crosslet (D3 + Leaflet + Crossfilter) | |
| http://sztanko.github.io/crosslet/ | |
| crossfiltered map | |
| Radian (D3 + AngularJS) | |
| http://openbrainsrc.github.io/Radian/ | |
| basic & functional plots, bar, scatter, area, histograms | |
| Backbone-D3 (D3 + Backbone.js) | |
| http://synthesis.sbecker.net/articles/2012/07/08/learning-d3-part-1 | |
| bar, pie, calendar, scatter, line | |
| uvCharts | |
| http://imaginea.github.io/uvCharts/documentation.html | |
| bar, line, area, pie, stacked bar/area, step-up bar, percent bar/area, donut, polar area, waterfall | |
| xcharts | |
| http://tenxer.github.io/xcharts/ | |
| bar, line | |
| jsNetworkX - (D3 + NetworkX) | |
| http://felix-kling.de/JSNetworkX | |
| graph library - weighted, directed networks | |
| iopctrl.js - mobile UI controls | |
| http://iop.io/iopctrl | |
| speedometer, gauge, equalizer, knobs, slider | |
| Others/betas: | |
| Parallel Coordinates - multi-axis line (multidimensional) | |
| Visual Sedimentation - streaming sedimentation, bar, pie, bubble, line | |
| Insights - graph | |
| jsplotlib - plots | |
| gg - plots, histogram, boxplots | |
| Glimpse - simple charts | |
| dpl.js - plots | |
| DVL | |
| DynamicCharts | |
| ChartFactory | |
| Grasshopper-to-D3 plugin | |
| ## End user visualization interfaces, based on D3 | |
| Graphene - real-time dashboard toolkit | |
| ChartBuilder - data visualization for publishing | |
| Raw - spreadsheet visualization | |
| CodeFlower - source repo visualization | |
| Ploychart - db visualization | |
| DataWrapper - db visualization | |
| LP-chart - visualization for publishing | |
| DexCharts - data exploration system | |
| Jolicharts - data slideshows | |
| ## Other end user visualization interfaces, not based on D3 | |
| Visual.ly | |
| Polychart | |
| VisualEyes | |
| ManyEyes | |
| Google Fusion Tables | |
| Piktochart | |
| Infogr.am | |
| ChartsBin | |
| Silk | |
| NumberPicture | |
| DataHero | |
| Wondergraphs | |
| Plotly | |
| DataVisu.al | |
| Perspective (iOS) | |
| Fruition | |
| ## Visualization Inspiration | |
| Mike Bostock's Examples | |
| http://bl.ocks.org/mbostock | |
| D3 Example Gallery (Github) | |
| https://github.com/mbostock/d3/wiki/Gallery | |
| D3.js Gallery (christopheviau) | |
| http://christopheviau.com/d3list/gallery.html | |
| 2000 Examples (techslides) | |
| http://techslides.com/over-2000-d3-js-examples-and-demos/ | |
| NYTimes - America's Cup race | |
| http://www.nytimes.com/interactive/2013/09/25/sports/americas-cup-course.html?_r=0 | |
| NYTimes - Corp tax rate | |
| http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html | |
| NYTimes - 512 Paths to the White House | |
| http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html?_r=0 | |
| NYTimes - Swing State History | |
| http://www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html | |
| 538 - Senate Forecast | |
| http://fivethirtyeight.com/interactives/senate-forecast/ | |
| 538 - World Cup Predictions | |
| http://fivethirtyeight.com/interactives/world-cup/ | |
| 538 - NCAA Tournament Predictions | |
| http://fivethirtyeight.com/interactives/march-madness-predictions/ | |
| What Size Am I? Dress Size Calculator | |
| http://sizes.darkgreener.com/ | |
| ## Play Areas | |
| D3 Playground - http://phrogz.net/JS/d3-playground/ | |
| Tributary - http://tributary.io/ | |
| JSBin - http://jsbin.com/ | |
| JSFiddle - http://jsfiddle.net/ | |
| CodePen - http://codepen.io/ | |
| Modern Browser w/ JS Console | |
| ## Lessons | |
| Three Little Circles | |
| http://bost.ocks.org/mike/circles/ | |
| Lets Make a Bar Chart | |
| http://bost.ocks.org/mike/bar/ | |
| http://bost.ocks.org/mike/bar/2/ | |
| http://bost.ocks.org/mike/bar/3/ | |
| Object Consistency | |
| http://bost.ocks.org/mike/constancy/ | |
| Thinking With Joins | |
| http://bost.ocks.org/mike/join/ | |
| How Selections Work | |
| http://bost.ocks.org/mike/selection/ | |
| Nested Selections | |
| http://bost.ocks.org/mike/nest/ | |
| Working with Transitions | |
| http://bost.ocks.org/mike/transition/ | |
| Path Transitions | |
| http://bost.ocks.org/mike/path/ | |
| Let's Make a Map | |
| http://bost.ocks.org/mike/map/ | |
| Let's Make a Bubble Map | |
| http://bost.ocks.org/mike/bubble-map/ | |
| Towards Reusable Charts | |
| http://bost.ocks.org/mike/chart/ | |
| Selections | |
| http://www.jeromecukier.net/blog/2011/08/09/d3-adding-stuff-and-oh-understanding-selections/ | |
| Scales & Color | |
| http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/ | |
| Animations & Transitions | |
| http://www.jeromecukier.net/blog/2012/07/16/animations-and-transitions/ | |
| In Depth Look at Selections | |
| http://www.jeromecukier.net/blog/2013/03/05/d3-tutorial-at-strata-redux/ | |
| Nesting Examples | |
| http://bl.ocks.org/phoebebright/raw/3176159/ | |
| ## Tutorials | |
| Interactive Data Visualization for the Web (O'Reilly book/e-book) | |
| http://chimera.labs.oreilly.com/books/1230000000345/index.html | |
| (originally from Scott Murray's blog @ http://alignedleft.com/tutorials) | |
| Learning d3.js (Scott Murray 24m video) | |
| http://www.youtube.com/watch?v=b9s7B7HYXhc | |
| D3 Tips and Tricks (Leanpub e-book) | |
| https://leanpub.com/D3-Tips-and-Tricks | |
| DashingD3js Tutorials - Beginner | |
| https://www.dashingd3js.com/table-of-contents | |
| D3 for Mere Mortals - Beginner | |
| http://www.recursion.org/d3-for-mere-mortals/ | |
| Try D3 Now - Beginner | |
| http://christopheviau.com/d3_utorial/ | |
| Learning D3 - Beginner | |
| http://synthesis.sbecker.net/articles/2012/07/08/learning-d3-part-1 | |
| http://synthesis.sbecker.net/articles/2012/07/09/learning-d3-part-2 | |
| http://synthesis.sbecker.net/articles/2012/07/10/learning-d3-part-3-animation-interaction | |
| http://synthesis.sbecker.net/articles/2012/07/11/learning-d3-part-4-intro-to-svg-graphics | |
| http://synthesis.sbecker.net/articles/2012/07/15/learning-d3-part-5-axes | |
| http://synthesis.sbecker.net/articles/2012/07/16/learning-d3-part-6-scales-colors | |
| http://synthesis.sbecker.net/articles/2012/07/18/learning-d3-part-7-choropleth-maps | |
| D3 Tutorials | |
| http://www.janwillemtulp.com/2011/03/20/tutorial-introduction-to-d3/ | |
| http://www.janwillemtulp.com/2011/03/23/tutorial-line-interpolations-in-d3/ | |
| http://www.janwillemtulp.com/2011/03/31/tutorialthe-basics-working-with-arrays-in-d3/ | |
| http://www.janwillemtulp.com/2011/04/01/tutorial-line-chart-in-d3/ | |
| D3 Crash Course | |
| http://www.codeproject.com/Articles/523444/D-crash-course | |
| D3 Journey to the Source - Enter/Exit/Data Explained | |
| http://slides.com/annaps/d3-journey-to-the-source/#/ | |
| SVG Tutorial - Beginner | |
| http://tutorials.jenkov.com/svg/index.html | |
| Learn SVG | |
| http://learnsvg.com/book-learnsvg/ | |
| ## Courses | |
| Learn D3 (7 part free series) | |
| http://learnd3.com/ | |
| Intro to D3.js w/ Scott Becker (Deveo course) | |
| https://deveo.tv/tutorials/d3js | |
| An Introduction to D3 w/ Scott Murray (O'Reilly course) | |
| http://shop.oreilly.com/product/110000632.do?cmp=yt-strata-books-videos-product-promo_d3.js_intro | |
| Interactive Data Visualization with D3 (Frontend Masters course) | |
| https://frontendmasters.com/courses/interactive-data-visualization-d3-js/ | |
| Beautiful Data with D3 (Tuts+) | |
| http://code.tutsplus.com/courses/beautiful-data-with-d3 | |
| D3.js Data Visualization Fundamentals (Pluralsight) | |
| http://pluralsight.com/training/Courses/TableOfContents/d3js-data-visualization-fundamentals |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment