data viz readings

6
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/

Upload: akshay-rao

Post on 10-Feb-2016

216 views

Category:

Documents


0 download

DESCRIPTION

List of things to read on data visualization

TRANSCRIPT

Page 1: Data Viz Readings

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/

Page 2: Data Viz Readings

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

Page 3: Data Viz Readings

● 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

Page 4: Data Viz Readings

○ 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