====== Visualization ====== * [[notes:urls:vis:stream|Dynamic stream visualization]] * [[notes:urls:vis:matrix|Matrix visualization]] * [[notes:vis:nb|from Notebook]] * * http://www.maths.adelaide.edu.au/matthew.roughan/Papers/hitch_hikers_guide.pdf * https://vis.occrp.org/ * https://vis.occrp.org/css/h5bp.normalize.css * https://vis.occrp.org/css/h5bp.main.css * https://vis.occrp.org/themes/classic/font/stylesheet.css * https://vis.occrp.org/themes/classic/geo.css * https://vis.occrp.org/js/vis/fullscreen.js ====== Draw network ====== * http://blog.plot.ly/post/123617968702/online-dashboards-eight-helpful-tips-you-should * https://plot.ly/dashboards/ * http://help.plot.ly/excel/dashboard/ * https://plot.ly/python/dashboard/ * http://moderndata.plot.ly/create-a-plotly-dashboards-in-under-10-minutes/ * http://moderndata.plot.ly/dashboards-in-r-with-shiny-plotly/ * https://plot.ly/dashboards/marketing-and-web-analytics-dashboard/ * http://blog.danielemaasit.com/2016/02/01/tracking-ggplot2-extensions/ * http://ggplot2-exts.github.io/ ===== Mixed ===== * Keylines: [[http://keylines.com/social-networks|social-networks]] - see white papers in visual * Jeff Heer: [[https://www.youtube.com/watch?v=GdoDLuPe-Wg&app=desktop|OPENVIS 2015]] * Lynn Cherny: [[http://www.slideshare.net/OReillyStrata/visualizing-networks-beyond-the-hairball|Visualizing-networks-beyond-the-hairball]] * Lynn Cherny: [[http://www.slideshare.net/arnicas/a-quick-and-dirty-intro-to-networkx-and-d3?related=1|A-quick-and-dirty-intro-to-networkx-and-d3]] * Lynn Cherny: [[http://blogger.ghostweather.com/|Blog]] * [[http://well-formed-data.net/archives/642/the-vizosphere|The Vizosphere]] * [[http://truth-and-beauty.net/projects/muesli-ingredient-network/|Muesli ingredient network]] * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial * https://github.com/mbostock/d3/wiki/Gallery * http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/ * http://dia-installer.de/shapes/cisconetwork/index.html.en * http://raphaeljs.com/icons/ * http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS * http://www.ioncannon.net/utilities/123/10-tips-for-creating-good-looking-diagrams-using-inkscape/ * http://sbml.org/Software/libSBML/docs/python-api/group__layout.html * http://www.janvas.com/site/home_en.php * http://css-tricks.com/mega-list-svg-information/ * http://vis.stanford.edu/jheer/d3/pyramid/shift.html * http://www.bostondatafest.com/wp-content/uploads/2014/11/cherny_short_networks_vis.pdf * http://www.themacroscope.org/?page_id=424 * http://setosa.io/blog/2014/07/26/markov-chains/ * http://techslides.com/over-1000-d3-js-examples-and-demos * http://christopheviau.com/d3list/ * http://graphconnect.com/ * http://keylines.com/case-study/cyber-hijacking-detecting-bgp-spoofs-with-keylines?utm_source=email&utm_medium=email&utm_campaign=keylines-news * https://github.com/jsongraph/json-graph-specification * http://jsongraphformat.info/ * http://cytoscape.github.io/cytoscape.js/ * [[http://gojs.net/latest/index.html|Interactive Diagrams for JavaScript and HTML]]: [[http://gojs.net/latest/intro/geometry.html|geometry]]; samples: [[http://gojs.net/latest/samples/stateChart.html|stateChart]], [[http://gojs.net/latest/samples/dataFlow.html|dataFlow]],[[http://gojs.net/latest/samples/flowchart.html|flowchart]], http://gojs.net/latest/samples/icons.html http://gojs.net/latest/samples/icons.js http://gojs.net/latest/samples/arrowheads.html http://gojs.net/latest/samples/shapes.html http://gojs.net/latest/samples/parseTree.html http://gojs.net/latest/samples/PERT.html http://gojs.net/latest/samples/pipes.html http://gojs.net/latest/samples/genogram.html http://gojs.net/latest/samples/logicCircuit.html http://gojs.net/latest/samples/index.html * http://api.jquery.com/jquery.getjson/ * http://www.w3schools.com/json/json_http.asp * http://stackoverflow.com/questions/9755183/how-to-read-jsonserver-response-in-javascript * http://stackoverflow.com/questions/16288388/how-to-use-a-javascript-to-load-and-parse-a-static-json-file-in-the-server * http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/ * Y.K. Yuen:[[http://eureka.ykyuen.info/2013/09/25/jquery-javascript-read-json-files-on-server/|Jquery-javascript-read-json-files-on-server]] * [[http://www.tutorialspoint.com/json/json_quick_guide.htm|JSON quick guide]]- SHEMA * https://useiconic.com/open/ * http://www.sitepoint.com/introduction-icon-fonts-font-awesome-icomoon/ * https://www.npmjs.com/package/font-blast * https://www.iconfinder.com/iconsets/font-awesome * https://www.iconfinder.com/ * https://www.iconfinder.com/iconsets/bitsies * https://www.iconfinder.com/iconsets/tango-icon-library * https://www.iconfinder.com/iconsets/flat-color-icons * https://www.iconfinder.com/iconsets/windows-8-metro-style * https://www.iconfinder.com/iconsets/dot * https://www.iconfinder.com/flag-icons?price=free * https://css-tricks.com/svg-sprites-use-better-icon-fonts/ * http://www.cssauthor.com/line-icon-fonts/ !!! * http://www.cssauthor.com/tag/Icon-fonts/ !!! * http://www.cssauthor.com/free-svg-icons/ !!! * https://github.com/fatiherikli/programming-language-network * https://github.com/fatiherikli/programming-language-network/blob/master/scripts/gml_to_json.py * http://frabru.de/c.php/article/SVGFonts-usage * http://nimbupani.com/about-fonts-in-svg.html * https://premium.wpmudev.org/blog/icon-fonts/ * http://zurb.com/playground/foundation-icons * https://wordpress.org/plugins/svg-vector-icon-plugin/ * https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website * https://www.npmjs.com/package/gulp-iconfont * http://gomakethings.com/icon-fonts/ * http://blogs.adobe.com/dreamweaver/2015/09/css-vs-svg-the-final-roundup.html * http://chipcullen.com/how-to-use-icomoon-and-icon-fonts-part-1-basic-usage/ * http://damonbauer.me/implementing-svg/ * https://icons8.com/welovesvg * https://www.liquidlight.co.uk/blog/article/working-with-svgs-in-sprites/ * http://mattsoria.com/killersvgworkflow/ * https://www.studiowolf.com/blog/how-to-set-up-an-inline-svg-sprite/ * http://www.streamlineicons.com/ * http://voidcanvas.com/how-to-use-or-implement-the-icon-fonts-in-your-web-page-step-by-step-description/ * http://www.cssauthor.com/line-icon-fonts/ * https://www.google.com/design/icons/ * http://google.github.io/material-design-icons/ * https://github.com/google/material-design-icons/tree/master/sprites ===== Including icons in SVG ===== * [[http://stackoverflow.com/questions/14984007/How-do-i-include-a-font-awesome-icon-in-my-svg|How-do-i-include-a-font-awesome-icon-in-my-SVG]] * [[http://stackoverflow.com/questions/18225954/use-fontawesome-icon-in-svg-without-external-files|Use-fontawesome-icon-in-SVG-without-external-files]] * [[http://graphicdesign.stackexchange.com/questions/10733/how-do-i-use-a-custom-font-in-an-svg-image-on-my-site|how-do-i-use-a-custom-font-in-an-SVG-image-on-my-site]] * css-tricks: [[https://css-tricks.com/svg-symbol-good-choice-icons/|SVG-symbol-good-choice-icons]]; [[https://css-tricks.com/using-fonts-for-icons/|using-fonts-for-icons]]; [[https://css-tricks.com/svg-sprites-use-better-icon-fonts/|SVG-sprites-use-better-icon-fonts]] * [[https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/|SVG-sprites-and-icon-systems-are-super]] * [[http://fizzed.com/oss/font-mfizz|Font Mfizz - Vector Icons for Technology and Software Geeks]] * [[http://gomakethings.com/icon-fonts/|Using Icon Fonts]] / embedding * [[http://mir.aculo.us/2014/10/31/icon-fonts-vs-inline-svg/|Icon-fonts-vs-inline-SVG]] * [[https://yatil.net/a-better-way-to-use-icon-fonts/|A-better-way-to-use-icon-fonts]] * [[http://ericphan.net/blog/2013/10/15/javascript-corner-font-awesome|Javascript-corner-font-awesome]] * [[https://success.mindtouch.com/Documentation/Branding/Leveraging_the_Web_Font_JavaScript_API|Leveraging_the_Web_Font_JavaScript_API]] * [[http://blog.pictonic.co/post/32869817328/svgs-are-cool-but-icon-fonts-are-just-10-of|SVGs-are-cool-but-icon-fonts-are-just-10%-of their file size]] * [[https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/|An-overview-of-SVG-sprite-creation-techniques]] * [[http://jefff.co/misc/svg/|SVG + Icon Fonts: Retina Ready Goodness]]; http://pictos.cc/ * [[http://htmlasks.com/how_to_put_a_symbol_font_character_inside_svg_lt_textgt|How_to_put_a_symbol_font_character_inside SVG ]] * [[https://nucleoapp.com/blog/|Nucleo blog: 16px icons, animated loaders and web app new features]] / zbirke ikon * [[http://codepen.io/FWeinb/post/quick-tip-svg-use-style-two-colors|Quick-tip-SVG-use-style-two-colors]] * [[http://www.alessioatzeni.com/metrize-icons/|Metrize icons]] / free * [[https://glyphsapp.com/tutorials/creating-an-icon-webfont|Tutorial: Creating-an-icon-webfont]] * [[http://www.w3.org/TR/SVG/fonts.html|W3 fonts]] * [[http://mashable.com/2014/01/14/icon-font-generators/#Hk8kZTj88ZqB|Icon-font-generators]] * [[http://ambracode.com/index/show/65758|In CSS/JavaScript, how is this icon/font plugin implemented?]] * [[http://fontastic.me/|Fontastic: Add Vector Icons to Your Website]] * [[https://glyphter.com/|Glyphter]] * https://github.com/jkphl/svg-sprite * https://css-tricks.com/gotchas-on-getting-svg-into-production/ * https://github.com/Keyamoon/IcoMoon-Free/tree/master/SVG * http://schepers.cc/svg/unicode.html ===== Saving SVG to local file ===== * [[http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem|How to save svg canvas to local filesystem]] * [[http://stackoverflow.com/questions/9871974/how-get-svg-code-from-html-page-using-jquery-or-javascript|How get SVG code from html page, using jQuery or JavaScript?]] * [[https://gist.github.com/onyxfish/5615173|svg_to_hidden_input.js]] * [[https://chrome.google.com/webstore/detail/export-svg-with-style/dkjdcaddoplepioppogpckelchefhddi?hl=en-GB|Export SVG with Style]] * [[http://d3export.housegordon.org/|d3js/SVG Export demo]] * [[http://www.d3noob.org/2013/07/export-image-from-d3js-page-as-svg-or.html|Export an image from a d3.js page as a SVG or bitmap]] * Malcolm Maclean: [[https://leanpub.com/D3-Tips-and-Tricks/read|D3-Tips-and-Tricks]] - Basic force directed graph showing directionality; Directional Force Layout Diagram (Node Highlighting) ===== Examples ===== * [[https://github.com/mikedewar/d3py|d3py]] / a plotting library for python, based on D3 * [[http://drewconway.com/zia/2013/3/26/visualizing-networkx-graphs-in-the-browser-using-d3|Visualizing NetworkX graphs in the browser using D3]] * [[http://blog.nextgenetics.net/?e=7|Data visualization with D3.js and python - part 1]] * [[http://blog.echen.me/2012/03/05/instant-interactive-visualization-with-d3-and-ggplot2/|d3-and-ggplot2]] * [[http://jsfiddle.net/plaliberte/HAXyd/|JsFiddle]] -> SVG, canvas, PNG * [[https://github.com/hadley/r2d3|r2d3]]: ggplot2 + d3 = r2d3 * [[https://github.com/ignacioola/insights|insights]] - A JavaScript library to visualize and navigate graphs * [[http://pothibo.com/2013/09/d3-js-how-to-handle-dynamic-json-data/|How to handle dynamic JSON Data]] * [[https://square.github.io/intro-to-d3/|Intro to D3.js]] * [[http://bl.ocks.org/mbostock/2846454|Force Layout & Matrix Market Format]] * [[http://bl.ocks.org/mbostock/1080941|Force-Directed Layout from XML]] * [[http://bl.ocks.org/mbostock/1129492|Bounded Force Layout]] * [[http://jsfiddle.net/murray_3/5q62y/8/|JsFiddle]]: Frameworks & Extensions * [[http://maxdemarzi.com/2012/03/08/connections-in-time/|Ruby + Graphs with Neo4j]]: connections in time * [[http://christophermanning.org/projects/building-cubic-hamiltonian-graphs-from-lcf-notation/|Building Hamiltonian Graphs from LCF Notation]] * [[http://projects.haskell.org/diagrams/doc/arrow.html|Haskell / arrows style]] * [[http://vlado.fmf.uni-lj.si/test/d3/force1.htm|Force / Vlado]] ===== Other ===== * [[http://maxdemarzi.com/2012/02/13/visualizing-a-network-with-cypher/|Visualizing a Network with Cypher and D3.js]] * [[http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779|Bi-directional hierarchical sankey diagram]] * [[http://ontoserver.csiro.au/shrimp/?concept=138875005&versionId=http%3A%2F%2Fsnomed.info%2Fsct%2F32506021000036107%2Fversion%2F20150531|Shrimp Terminology Browser: SNOMED Clinical Terms Australian extension]] * [[http://transfers.torlaune.de/|Shrimp Terminology Browser: SNOMED Clinical Terms Australian extension]] * [[http://bost.ocks.org/mike/hive/|Hive Plots]] * [[http://tradearc.laserdeathstehr.com/|TradeArc]] * [[http://www.redotheweb.com/DependencyWheel/|DependencyWheel: An Interactive Visualization Of Package Dependencies]] * [[http://bl.ocks.org/lafarer/7d8ecbf7b06b2ef0f72b|Dijkstra algorithm]] * [[http://bl.ocks.org/mbostock/1933560|Histogram Chart]] * [[http://www.jeromecukier.net/projects/models/life.html|Interactive models > Game of life]] * [[https://www.jasondavies.com/crayola/|Crayola Colour Chronology]] ===== Font Icons ===== * Unicode: [[http://www.unicode.org/charts/#symbols|#symbols]], [[http://unicode-table.com/en/blocks/miscellaneous-symbols/|miscellaneous-symbols]], [[http://unicode-table.com/en/blocks/dingbats/|dingbats]], [[http://unicode-table.com/en/blocks/transport-and-map-symbols/|transport-and-map-symbols]], [[http://unicode-table.com/en/blocks/emoticons/|emoticons]], [[http://unicode-table.com/en/blocks/miscellaneous-symbols-and-pictographs/|miscellaneous-symbols-and-pictographs]], [[http://unicode-table.com/en/blocks/miscellaneous-technical/|miscellaneous-technical]], [[http://www.unicode.org/charts/PDF/U2600.pdf|U2600.pdf]] * [[http://www.1001fonts.com/dingbat-fonts.html|Dingbat Fonts]] * [[http://www.fontsplace.com/usf-symbol-signs-dot-two-premium-font-download.html|USF-symbol-signs]] * Creative Bloq: [[http://www.creativebloq.com/typography/symbol-fonts-2131972|The top 15 free symbol fonts]] * FontSpace: [[http://www.fontspace.com/category/symbols|Symbols]] * FontAwesome: [[http://fortawesome.github.io/Font-Awesome/icons/|Icons]] * Fontello: [[http://fontello.com/|Icons]] * Google: [[https://www.google.com/design/icons/|Material icons]], [[http://google.github.io/material-design-icons/|Github]] * IcoMoon: [[https://icomoon.io/#preview-ultimate|Ultimate pack]], [[https://icomoon.io/app/#/select/library|Library]] * FlatIcon: [[http://www.flaticon.com/|The largest database of free vector icons]], [[http://www.flaticon.com/packs/|packs]] * FontIcons: [[https://fonticons.com/sets|Sets]] ==== Techno ==== * W3 School: [[http://www.w3schools.com/icons/|Icons Tutorial]] * [[http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/|How to make your own icon webfont]] * [[http://fontawesome.info/font-awesome-icon-site/CRIME-BRON.NL|Font Awesome icon usage code]] * [[http://webdevstudios.com/2015/01/28/mapping-icon-fonts-with-sass/|Mapping Icon Fonts with Sass]] * [[http://weloveiconfonts.com/|We Love Icon Fonts: How to!]] !!! glej na koncu * [[https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome|Customize Font Awesome]] ==== Crime ==== * [[http://blog.gvsig.org/2013/06/19/gvsig-2-0-crime-symbols-library/|gvSIG 2.0: “Crime” symbols library]], [[http://www.gvsig.com/en/products/gvsig-desktop/downloads|gvSIG download]], [[http://blog.gvsig.org/2013/05/31/gvsig-2-0-emergency-symbols-library/|emergency-symbols]] * Crime Fighters: [[http://www.crimefightersng.com/site/font-awesome/|font-awesome]] * UNHCR: [[https://unhcr.github.io/Humanitarian-Font/|Humanitarian-Font]] * [[http://www.flaticon.com/packs/criminal-minds|Criminal Minds]] * [[http://www.tinkytyler.org/kel/prison-psd-mockup|Prison icons]] * 123RF: [[http://it.123rf.com/search.php?word=crime&imgtype=0&t_word=Crime&t_lang=it&oriSearch=criminal&srch_lang=it|Crime photos and icons]] * [[http://www.shutterstock.com/pic.mhtml?tpl=38874-43068&irgwc=1&id=100703194|Crime]], [[http://www.shutterstock.com/pic.mhtml?tpl=38874-43068&id=162130127&irgwc=1|Law]], [[http://www.shutterstock.com/pic.mhtml?id=187287503&irgwc=1&tpl=38874-43068|Legal]] ==== bokeh - D3 for big data ==== * http://bokeh.pydata.org/ * https://github.com/bokeh/bokeh ==== plotly ==== * https://plot.ly/product/plotlyjs/ * https://plot.ly/feed/ user: batagelj pw: triglav * https://plot.ly/learn/ * http://blog.plot.ly/post/97151096882/plotly-heres-what-you-can-do-one-year-in * http://blog.plot.ly/post/107519814787/nine-interactive-3d-graphs-that-let-you-zoom ===== 3D ===== * [[http://docs.enthought.com/mayavi/mayavi/index.html|Mayavi]]: [[http://docs.enthought.com/mayavi/mayavi/auto/example_protein.html#example-protein|Protein example]], [[http://docs.enthought.com/mayavi/mayavi/auto/example_mlab_3D_to_2D.html#example-mlab-3d-to-2d|mlab-3d-to-2d]] * [[http://ubietylab.net/ubigraph/|Ubigraph]] * https://www.sg.ethz.ch/research/ * https://www.sg.ethz.ch/services/downloads/ * http://arxiv.org/abs/0704.1748v5 * http://graph-tool.skewed.de/ * https://github.com/patrickfuller/blender-graphs * Kieran Healy: [[http://kieranhealy.org/philcites/|A Co-Citation Network for Philosophy]], [[http://kieranhealy.org/blog/archives/2013/06/18/a-co-citation-network-for-philosophy/|blog]], [[http://kieranhealy.org/philcites/cites.json|json]] * Hive plots: [[http://egweb.bcgsc.ca/|Farewell to hairballs]], [[http://oceanbioinformatics.com/uncategorized/hive-plots-a-new-type-of-network-visualization/|A new type of network visualization]], [[http://bost.ocks.org/mike/hive/|D3.js]], * Matrix: [[http://bost.ocks.org/mike/miserables/|D3.js]] * Bundle: [[http://mbostock.github.io/d3/talk/20111116/bundle.html|D3.js]] * http://blendersushi.blogspot.com/2012/12/python-importing-and-visualizing-data.html * http://stef2cnrs.wordpress.com/2008/07/11/x3d-vrml/ * http://felix-kling.de/JSNetworkX/index.html * http://www.bu.edu/tech/support/research/training-consulting/online-tutorials/vtk/ * http://bioinfo.unice.fr/biodiv/Tree_editors.html http://code.tutsplus.com/tutorials/data-visualization-app-using-gae-python-d3js-and-google-bigquery-part-2--cms-22467 ==== webGL ==== * http://www.x3dom.org/?cat=4 http://sourceforge.net/p/spidergl/feature-requests/markdown_syntax * http://webgl.pythonocc.org/ https://mail.gna.org/public/pythonocc-users/2011-02/msg00008.html http://web-developing.reading-now.org/page/16327 * http://sourceforge.net/projects/spidergltutorials/files/latest/download?source=directory http://collaborate.mozillascience.org/projects/hpdataVis http://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954 * http://web.chemdoodle.com/demos/molgrabber-3d http://web.chemdoodle.com/tutorial/3d-structure-canvases/viewer3d-canvas http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html * https://wiki.gephi.org/index.php/Specification_-_Network_visualization_with_WebGL * http://bioinfo.unice.fr/biodiv/Tree_editors.html * http://code.tutsplus.com/tutorials/data-visualization-app-using-gae-python-d3js-and-google-bigquery-part-2--cms-22467 * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial * http://www.skjapp.com/html5-webgl-examples/#.VJyJTv8cA * http://voxelent.com/webgl-beginners-guide-is-published/ http://zvonka.fmf.uni-lj.si/netbook/doku.php?id=book:pynet:text:idx * http://www.crowdflower.com/blog/data-science-2015-whats-hot-whats-not http://www.cio.com/article/2838172/data-analytics/8-big-trends-in-big-data-analytics.html * Poskusi http://mikemcdearmon.com/portfolio/techposts/charting-libraries-using-d3 * http://kyrandale.com/ http://kyrandale.com/static/talks/pydata/index.html http://kyrandale.com/blackapps/SA_FDG_3D.html http://kyrandale.com/static/talks/pydata-to-the-web/index.html