The document summarizes a Cytoscape team meeting held on May 15, 2014, focusing on various technical talks and keynotes related to data visualization and JavaScript frameworks. Notable presentations included analyses of Japanese woodblock prints (ukiyo-e) and discussions on utilizing tools like D3.js, Node.js, and IPython notebooks for complex data analysis and visualization projects. The overarching theme emphasizes the importance of evolving tools and frameworks for the future of data visualization.

1. Cytoscape Team Meeting 5/15/2014
!
Keiichiro Ono
Part 2: Quick Report Part 2

2. Outline
-Keynote 2: John Resig
-Selected Talks
-Mostly Technical Ones

5. Keynotes

6. Keynotes
Mike Bostock - NTY Visualization Team
John Resig - Khan Academy, Ex-Mozilla

7. John Resig

8. John Resig
- Creator of jQuery
- Engineer at Khan Academy
- Was a member of Mozilla Corporation
- a JavaScript hacker

9. http://ejohn.org/

10. - Lightweight JavaScript library
- Reduces many lines of code
- Used in more than 50% of the web
sites today
- Solves lots of cross-browser issues

11. Keynote by John Resig:
!
Analyzing Art Data for Fun and Profit

12. ukiyo-e.org
飾北斎 富嶽三十六景 神奈川沖浪裏

13. 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

14. (Post) Impressionism and Japonisme
Madame Monet in a Japanese kimono. Claude Monet. !
1875, Museum of Fine Arts, Boston
La courtisane (after Eisen), Vincent van Gogh, 1887

15. Sudden Shower Over Shin-Ohashi Bridge and Atake
(名所江戸百景 大はしあたけの夕立)
by Hiroshige (歌川広重)

16. Bridge in the rain (after Hiroshige)
by Vincent van Gogh

18. 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…

21. 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
Pipeline
Built on node.js

22. Source Web Site
WebKit
PhantomJS
CasperJS
SpookyJS
Crawling Pipeline

23. CasperJS
SpookyJS
XML Files MongoDB Log
libxml & xpath
MongoDB
Data
Processing
Script

24. MongoDB
Data
Processing
Script
Artists Data Image Data
Consolidate Date and
Artist Data
Add to the site

25. 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, けいいちろう, 圭一朗, 圭一郎

26. 東洲斎写楽.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": "とおしゅうさいしゃらく"
}

27. 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

28. 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/

29. Selected Talks

30. 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

31. Using D3 with Backbone, Angular and Ember
Sam Selikoff

32. Post-jQuery World
- Large-scale
JavaScript client-side
code without structure
= unmaintainable
- There are lots of
frameworks to solve
this issue

33. 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

34. https://github.com/samselikoff/talks/blob/master/4-apr2014-using-d3-backbone-angular-ember/final/6_angular_d3.html

35. Structure to DataViz Applications
- Try existing framework
- d3.Chart
- Make your visualization
code reusable!
- http://bost.ocks.org/mike/chart/

36. Lyra: An Interactive Visualization Design Environment
Arvind Satyanaraya

37. 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

38. Napoleon's March to Moscow by Charles Minard, 1869

39. Custom Visualizations without Coding
- It is interesting, but challenging
- Complex UI
- Learning curve
- But worth trying to satisfy demands of complex
visualizations

40. Python in the Browser Age: Data Exploration in the
IPython Notebook
Jake Vanderplas

42. - Most of the core commuters are scientists
- Tool for scientists by scientists
- Goal: Reproducible Science
IPython and Notebook

43. http://www.brianckeegan.com/2014/04/the-need-for-openness-in-data-journalism/

44. http://nbviewer.ipython.org/github/brianckeegan/Bechdel/blob/master/Bechdel_test.ipynb
Reproducible Data Journalism

45. New in IPython
Notebook 2.0:
Interactive Widget

46. http://mpld3.github.io/

47. Bokeh

49. 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

50. Summary

51. 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…

52. 2014 Keiichiro Ono
kono@ucsd.edu