data viz readings
DESCRIPTION
List of things to read on data visualizationTRANSCRIPT
Mar 2015● Making SVGs Responsive with CSS | Codrops:
http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/● Leaflet heatmap plugins: http://www.patrick-wied.at/static/heatmapjs/plugin-leaflet-
layer.html● Responsive sizing AND cropping around a focus point: https://github.com/jonom/jquery-
focuspoint● Animate you SVGs (needs jQuery, raphael): http://lazylinepainter.info/● Another one (alternate to raphael. Complete SVG library built by raphael's creator for the
modern browser era): http://snapsvg.io/● Physics Simulation JS library: http://wellcaffeinated.net/PhysicsJS/
○ Eg: http://minutelabs.io/ see chaotic planets○ Even Better: http://wellcaffeinated.net/PhysicsJS/#demo-6 (Enable Hide code
and pull cloth)● Stickup Jquery plugin for you navigation to remain stuck:
http://lirancohen.github.io/stickUp/● Lovefield! [like PykQuery.js]: https://github.com/google/lovefield● Free Bootstrap skins: https://github.com/Pixelkit/PixelKit-Bootstrap-UI-Kits● Formatter.js: http://firstopinion.github.io/formatter.js/● Amazing interactive viz for flight times (Which library?):
http://fivethirtyeight.com/interactives/flights/● Testing Responsive Designs using Your Android's USB debugging mode:
https://developer.chrome.com/devtools/docs/remote-debugging#setting-up-device● Dealing with xlsx data formats with JS: https://github.com/SheetJS/js-xlsx● Well structure help guides and data viz: http://visual.ly/vizbox/startup-universe/● 5 pillars of interaction design: http://thenextweb.com/dd/2015/03/03/the-5-pillars-of-
interaction-design/● Amazing Circular SVG based menus:http://sarasoueidan.com/tools/circulus/● Excellent visualization projects: http://philogb.github.io/● Visualizing data temporally and spatially: https://www.youtube.com/watch?
v=CPX1DeDi0Us&t=36● JS Vis creation tool: http://philogb.github.io/jit/● Amazing data infographics:
○ http://visualizing.org/visualizations/january-if-you-wanted-be-football-player ○ http://visualizing.org/galleries/la-lettura-visual-data ○ http://visualizing.org/galleries/la-lettura-visual-data
● Amazing storytelling tool for the web: http://pageflow.io/en● A breakdown of the data design process: https://medium.com/accurat-studio/the-
architecture-of-a-data-visualization-470b807799b4● Using animation effectively to design better interfaces and experience:
https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5● Amazing user friendly UI: https://templates.campaignmonitor.com/canvas/design/01-
mason#/firstrun● A short video on visual thinking: http://www.sciencedump.com/content/are-you-visual-
thinker● Ajax gyaan: http://www.smashingmagazine.com/2015/01/13/why-ajax-isnt-enough/● Easy to use timesheet viz library: https://sbstjn.github.io/timesheet.js/
Feb 2015● Data Sharing Guidelines: https://github.com/yaksha13/datasharing● Using Processing with Ruby: https://github.com/jashkenas/ruby-processing● Geo Dev libraries (JS): http://blogs.esri.com/esri/arcgis/2014/01/23/10-open-source-
projects-every-javascript-geo-dev-should-know-about/● Interesting Javascript Libraries:
○ http://okfnlabs.org/recline/ ○ http://sigmajs.org/ ○ http://redash.io/ (SQL Query builder)○
● Learning Javascript properly: http://jstherightway.org/#getting-started● Awesome Circle Chart: http://graphics.wsj.com/billion-dollar-club/● Bubble Chart Type = Awesome: http://www.nytimes.com/interactive/2013/05/25/sunday-
review/corporate-taxes.html?_r=0● Talks by the most important people in DataViz: http://openvisconf.com/2014/● Three.js Experiments:
○ http://armsglobe.chromeexperiments.com/ ○ https://github.com/idflood/ThreeNodes.js
●
Jan 2015● PykQuery equivalent at gramener:
https://drive.google.com/a/pykih.com/file/d/0B5kOifuqKQwtcDJhajUxLVVuejJhdG1tbVBnV1U5dGYxVVBv/view?usp=sharing
● Give data annotation like code annotation: https://www.omniref.com/● Goethe Theory of colours: http://www.brainpickings.org/2012/08/17/goethe-theory-of-
colours/● Importance of the color grey: http://www.visualisingdata.com/index.php/2015/01/make-
grey-best-friend/● Data visualization podcasts: http://datastori.es/● Dataset interesting small table: https://dataset.readthedocs.org/en/latest/● Map Viz: Earth projections: https://www.youtube.com/watch?v=2lR7s1Y6Zig● Awesome FB github projects:
○ Distributed SQL query engine built for high performance data analytics○ https://code.facebook.com/projects/552007124892407/presto/ ○ Javascript Static Type Checker for common errors etc.○ https://code.facebook.com/projects/1524880081090726/flow/ ○ JS library for building UI. A lot of viz guys are combining this with D3.js○ https://code.facebook.com/projects/176988925806765/react/
● How to convert from rgb to hsl: http://www.rapidtables.com/convert/color/rgb-to-hsl.htm● For Map viz!: https://mapzen.com/projects● API marketplace: https://www.mashape.com/● Learn what a pyramid chart really is!: https://www.youtube.com/watch?v=fFnaGYNlfCs
● Amazing Ace Live editor with linting!: http://ace.c9.io/#nav=higlighter
Dec 2014● Small powerful charts: http://www.humblesoftware.com/envision/index● Amazing timelines for stories: http://timeline.knightlab.com/● BEST VIZ OF 2014 list: http://flowingdata.com/2014/12/19/the-best-data-visualization-
projects-of-2014-2/● Palantir Video: https://www.youtube.com/watch?v=d298LZd38Kk● More Design Tricks:
○ http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/ ○ http://tympanus.net/Tutorials/ItemBlur/
● How DataVEyes designed their amazing visualization based logo: http://dataveyes.com/#!/en/case-studies/identite-generative
● Map Visualization by Stamen (i think): http://arcticspills.wwf.ca/#intro/● Map Visualization by Stamen (i think): http://app.dumpark.com/seas-of-plastic-2/#● Data Converter tool: http://shancarter.github.io/mr-data-converter/● Treemap chart with line chart within tooltip and with drilldown functionality:
http://www.theguardian.com/global-development/ng-interactive/2014/dec/04/-sp-afghanistan-aid-how-spent
Nov 2014● Five Thirty Eight Graph paper type visualization:
http://fivethirtyeight.com/interactives/senate-forecast/● VERY IMPORTANT FOR MAKING LOGICAL ARGUMENTS:
http://www.informationisbeautiful.net/visualizations/rhetological-fallacies/● Simple charting library: http://charted.co● Selfie data visualization story: http://selfiecity.net/#selfiexploratory● Trifecta checkup also has the self sufficiency test:
http://junkcharts.typepad.com/junk_charts/junk-charts-trifecta-checkup-the-definitive-guide.htmlhttp://junkcharts.typepad.com/junk_charts/sufficiency/
● Creative scatter chart: http://qz.com/296941/interactive-graphic-every-active-satellite-orbiting-earth/
● Designer stuff!:○ Buttons that transition into forms (AWESOME):
http://tympanus.net/Development/ButtonComponentMorph/index.html○ Buttons that are progress bars:
http://tympanus.net/Development/ProgressButtonStyles/○ Search that transitions into new page:
http://tympanus.net/Development/MorphingSearch/ ○ Version for the CART or MAPPING on Viz Page??:
http://tympanus.net/Development/DragDropInteractions/reveal.html
○ Hover effects on images: http://tympanus.net/Development/HoverEffectIdeas/index.html
● Terror map by Periscopic: http://terror.periscopic.com/● Basic PykQuery type features on a geo-Dashboard: http://vizhub.healthdata.org/tobacco/● FireFox Developer Edition with Javascript Performance measurement tools:
https://www.mozilla.org/en-US/firefox/developer/● Timline and bubble chart on map that is categorised and filterable:
http://visualizing.org/full-screen/56186● The use of sonic data design to create data visualization: http://phantomterrains.com/● Interesting use of flowers to show war: http://poppyfield.org/● Bubble chart timeline on a map: http://blog.zeit.de/open-data/2014/11/08/ddr-proteste-
volk-1989/● Article on principles of responsive: http://blog.froont.com/9-basic-principles-of-
responsive-web-design/
Oct 2014● The following document gives a good explanation of color should be accurately used in
data viz. http://www.acaps.org/img/documents/u-120527-tb-use-of-colour.pdf