Disruptive Data Visualization with Web Technologies

What do I mean by web technologies?

• I mean HTML5
• I don’t mean the latest version of a markup language (HTML) for rendering text and images in a browser.
• I mean HTML5, the buzzword that represents a whole lot more…
  • It’s a collection of modern technologies that includes HTML, CSS and other living web standards.
  • It includes the increasingly powerful JavaScript (not Java!) language that’s built into all modern browsers.
  • And a powerful APIs (Application Programming Interfaces) for sophisticated hardware and data access.
  • “And the depth of modern web technologies is staggering.” – Mike Bostock

What’s disruptive about HTML5?

• HTML5 is to the modern web as Steve Jobs was to the rotary phone.
  • With Steve Jobs, the disruptive combination was: Art + STEM.
• With HTML5, the disruptive combination is: Art + STEM + Data
• New disciplines
  • Data Journalism (e.g., NY Times)
• New business models
  • BI (interactive charting) moved from desktop to the browser (Tableau, PowerBI, etc.)
  • 3-D desktop graphics moved to the browser (WebGL is OpenGL. And IE is dead, finally:-)
  • ICYMI, 3-D Geospatial is in the browser (google maps, mapbox, etc.)
• But none of this is really new.

Data science in a browser

Python & R, meet JavaScript. The barrier between web dev and data science has never been lower. That’s really new.

• Python
  • Google Colab – Jupyter notebook on steroids, with a big-data back end and no configuration.
  • Data visualization with Python
  • Plotly.com – “AI, ML, and Python analytics for business at 5% the cost of a full-stack approach.”
    • Under the hood, data visualization uses web technologies.
• R – R Studio, R Shiny
  • R Studio is the R counterpart.
  • “Shiny apps are easy to write. No web development skills are required.”
  • Under the hood, data visualization uses web technologies.
• JavaScript – Observable – by Mike Bostock (creator of D3)
  • This is it – there’s no hood to look under!

So what’s new?

• Plotly.com is new and evolving.
  • Started as plotly.js (and plotly.py and plotly.r)
  • Now it’s AI, ML and Python analytics at less than “5% of the cost of a full-stack” development approach.
  • Data science vs dashboards – no comparison
  • They just got some VC funding to go big.
  • BTW, it’s not free.
• Observable, Inc by Mike Bostock
  • “Building a better computational medium.”
  • Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
  • Mike Bostock’s vision – Published 7 Dec 2021
  • A new IDE – an integrated discovery environment rather than development environment.
  • “I didn’t want to introduce limitations on the displays themselves. Constraints would make the problem easier, but uninteresting. I wanted to preserve creativity and expressiveness. As a kid and as an adult, I never want to do what someone tells me to do; I want freedom to make up my own mind. This necessitated a low-level approach at the beginning. Code for everything, even paragraphs of text! And the depth of modern web technologies is staggering.”

What can you do with Observable?

• Exploratory data analysis
  • Scatterplot matrix
  • Observable Plot
  • Dashboards
  • Mona Lisa Histogram
• Teaching
  • Sorting algorithms
  • Bridgeson’s algorithm
  • Shuffling algorithm
  • Linked Lists
  • Golden ratio
• Geospatial analysis, modeling, collaboration, etc., etc.
  • Streaming shapefiles
  • Fluid physics
  • Dynamical systems
  • Hello, Three.js!
  • Deck.gl
  • Scatter-gl from tensorflow.org
• Data science, ML, AI, etc.
• Collaboration and innovation!
• “We’re building from the bottom up to retain expressiveness, creativity, and flexibility.”
  • “We can reduce effort…Less work to prepare, and less to perform.”
  • “Reducing effort is incredibly exciting because it doesn’t just save time, it changes who engages in a task, and when!”