openvis conference quick report part 2
DESCRIPTION
Quick report of OpenVis Conference 2014 in Boston. This is the second half of my report. Prepared for Cytoscape developer team meeting on 5/15/2014.TRANSCRIPT
Cytoscape Team Meeting 5/15/2014 !
Keiichiro Ono
Part 2: Quick Report Part 2
Outline
-Keynote 2: John Resig -Selected Talks
-Mostly Technical Ones
Keynotes
Keynotes
Mike Bostock - NTY Visualization Team John Resig - Khan Academy, Ex-Mozilla
John Resig
John Resig
- Creator of jQuery
- Engineer at Khan Academy
- Was a member of Mozilla Corporation
- a JavaScript hacker
http://ejohn.org/
- Lightweight JavaScript library
- Reduces many lines of code
- Used in more than 50% of the web sites today
- Solves lots of cross-browser issues
Keynote by John Resig: !
Analyzing Art Data for Fun and Profit
What is Ukiyo-e?- Japanese woodblock prints (mostly) produced in
Edo period (江戸時代)
- Means “Pictures of the floating world” - Kabuki actors, 美人画 (pictures of beautiful women), landscapes, etc.
- One of the most popular Japanese art forms in the world
- In Japan, it was a popular culture in17-18 centuries, and re-discovered as art by Europeans
(Post) Impressionism and Japonisme
Madame Monet in a Japanese kimono. Claude Monet. !1875, Museum of Fine Arts, BostonLa courtisane (after Eisen), Vincent van Gogh, 1887
Sudden Shower Over Shin-Ohashi Bridge and Atake (名所江戸百景 大はしあたけの夕立) by Hiroshige (歌川広重)
Bridge in the rain (after Hiroshige) by Vincent van Gogh
Meta-database of Ukiyo-e for Fun
- He is a big fan of Japanese art
- One day, he noticed there is no central repository of ukiyo-e
- Then, let’s make one as a fun project…
Source Web Site
WebKit
PhantomJS
CasperJS
SpookyJS
XML Files MongoDB Log
libxml & xpath
MongoDB
Data Processing
Script
Artists Data Image Data
Consolidate Date and Artist Data
Add to the site
PipelineBuilt on node.js
Source Web Site
WebKit
PhantomJS
CasperJS
SpookyJS
XML Files MongoDB Log
libxml & xpath
MongoDB
Data Processing
Script
Artists Data Image Data
Consolidate Date and Artist Data
Add to the site
Crawling Pipeline
Source Web Site
WebKit
PhantomJS
CasperJS
SpookyJS
XML Files MongoDB Log
libxml & xpath
MongoDB
Data Processing
Script
Artists Data Image Data
Consolidate Date and Artist Data
Add to the site
Source Web Site
WebKit
PhantomJS
CasperJS
SpookyJS
XML Files MongoDB Log
libxml & xpath
MongoDB
Data Processing
Script
Artists Data Image Data
Consolidate Date and Artist Data
Add to the site
Many-to-Many Mapping
- Metadata for the pictures were “fuzzy” - Example: Metadata for an artist 「歌川広重」
- 広重
- 歌川広重
- hiroshige
- Hiroshige utagawa
- ひろしげ
- Representation of Japanese names
- Ando, 安藤, 安東, あんどう, 安堂, etc.
- ex: Keiichiro, Keiichiroh, けいいちろう, 圭一朗, 圭一郎
東洲斎写楽.json{ "original": "Sharaku Tōshūsai (東洲斎写楽)", "locale": "ja", "kanji": "東洲斎写楽", "given": "Sharaku", "given_kana": "しゃらく", "surname": "Tōshūsai", "surname_kana": "とおしゅうさい", "surname_kanji": "東洲斎", "given_kanji": "写楽", "name": "Tōshūsai Sharaku", "ascii": "Tooshuusai Sharaku", "plain": "Toshusai Sharaku", "kana": "とおしゅうさいしゃらく" }
Collaboration with Frick Collection
- While he was building this DB, he found a lot of errors in the museums’ databases
- Image similarity search
- He contacted them and curators are impressed by his work
- Collaboration: Image/graph analysis of Frick Collection and metadata update
- Graph analysis with Neo4j / Cypher
Summary
- Today, we can build this level of complex data analysis pipeline only with JavaScript
- Node.js as a workflow engine
- Write Code Every Day - http://ejohn.org/blog/write-code-every-day/
Selected Talks
Using D3 with Backbone, Angular and Ember
- Sam Selikoff
Lyra: An Interactive Visualization Design Environment
- Arvind Satyanarayan
Python in the Browser Age: Data Exploration in the IPython Notebook
- Jake Vanderplas
Selected Talks
Using D3 with Backbone, Angular and Ember Sam Selikoff
Post-jQuery World
- Large-scale JavaScript client-side code without structure = unmaintainable
- There are lots of frameworks to solve this issue
D3.js + MV* Frameworks
- D3.js visualization code tend to be procedural
- For large scale development, encapsulate it
- Then embed the code by following the framework’s idioms
https://github.com/samselikoff/talks/blob/master/4-apr2014-using-d3-backbone-angular-ember/final/6_angular_d3.html
Structure to DataViz Applications
- Try existing framework
- d3.Chart
- Make your visualization code reusable!
- http://bost.ocks.org/mike/chart/
Lyra: An Interactive Visualization Design Environment Arvind Satyanaraya
What is Lyra?
- Node.js based tool to create custom visualization without coding
- “Lyra is an interactive environment that enables custom visualization design without writing any code.“
- Targeting somewhere between D3.js and Excel
- Pre-alpha status
Napoleon's March to Moscow by Charles Minard, 1869
Custom Visualizations without Coding
- It is interesting, but challenging
- Complex UI
- Learning curve
- But worth trying to satisfy demands of complex visualizations
Python in the Browser Age: Data Exploration in the IPython Notebook Jake Vanderplas
- Most of the core commuters are scientists - Tool for scientists by scientists - Goal: Reproducible Science
IPython and Notebook
http://www.brianckeegan.com/2014/04/the-need-for-openness-in-data-journalism/
http://nbviewer.ipython.org/github/brianckeegan/Bechdel/blob/master/Bechdel_test.ipynb
Reproducible Data Journalism
New in IPython Notebook 2.0:
Interactive Widget
Bokeh
Tips: New Presentation Style with IPython Notebook
- Write demo code and descriptions as an IPython Notebook
- Upload it to gist
- Open it with nbviewer
- http://nbviewer.ipython.org/ - Also, the audience can directly clone the repository and play with their
local machine
Summary
Summary
- Tons of interesting new projects are going on outside of Java world
- Some of the tools are extremely important for us
- IPython Notebook
- D3.js
- We need to keep watching them…
