Speaker: Irene Ros (@ireneros)
Speaker: Jeffrey Heer (@jeffrey_heer) — Slides, Video
Raising the Bar (Chart): The Next Generation of Visualization Tools
- Chart Typologies (Excel, Many Eyes, Google Charts)
- Interactive Data Exploration (Tableuea, Lyra)
- Visual Analysis Grammars (VizQL, ggplot2, Vegalite)
- Visualization Grammars (D3, Protovis, Vega)
- Component Archictecture (Prefuse, Flare)
- Graphics APIs (Processing, OpenGL, Java2D)
Programming by describing what, not how? In contrast to imperative programming, where you must give explicit steps.
- Faster iteration. Less code. Larger user base.
- Better visualization.
Smart defaults. - Reuse.
Write once, then re-apply. - Performance.
Optimization, scalability. - Portability.
Multiple devices, renderers, inputs. - Programmatic generation.
Write programs which output visualizations.
- Data (input data to visualize)
- Transforms (Grouping, stats projection, layout)
- Scales
- Guides
- Marks (data-representative graphics). Marks can be graphical primitives.
- Uses a declarative JSON format rather than JavaScript code.
- GUI for Vegalite.
- Rapid visualization via drag and drop.
- Reduce tedious manual specification.
- Support early-stage data exploration.
- Encourage data coverage.
- Discourage premature fixation.
- Works with user provided data-set. Voyager then provides recommendations.
- Reduced and simpler model of Vega.
- Formal model for statistical graphics.
- A visualization design environment.
- Single declarative model for specifiying visual encodings + interaction techniques.
- JSON -> Reactive Dataflow Graph
- Portable
- Client (browser) or server-side (node)
Example: DimpVis
Speaker: Lauren McCarthy (@laurmccarthy) — Video
Speaker: Jim Vallandingham (@vlandham) — Slides, Video
- "Scorytelling"
- Scrolling is a continuation unless it's disrupted someway.
- How to Scroll by Mike Bostock.
- Moving window model vs. moving document model
- Scrollers vs. steppers
- Is swipe the new scroll?
- MobileVis: showcase of visualizations that work well on mobile devices.
- Pleens
- PageFlow
Speaker: Ramik Sadana (@ramiksadana) — Video
Georgia Institute of Technology
- Mobile, tablets, and large touch screens.
- All follow very different design patterns. They're used in different contexts.
- Usefulness: a product's clarity of its own content and purpose.
- What purpose does the application serve for the user?
- Usability: ease-of-use in a product to enable accomplishment.
- Guessability: don't use novel approaches.
- Learnability: complexity, discoverability, expected actions.
- Ergonomics: effort in interacting with the system.
- Desirability: grace and elegance in form that drives engagement.
Speaker: Lena Groeger (@lenagroeger) — Slides, Video
Why Repetition is a Curious Thing
Speaker: Nicolas Garcia Belmonte (@philogb) — Slides, Video
- Exploratory visualizations
- Real-time data analysis
- Storytelling
- Scientific visualization
- Data art/illustration
- Line Integral Convulsion
- Can add tons of data points w/o performance penalty.
- JS API that stores an array of floats in a buffer that can be accessed by CPU.
- Vertex Shader: transform and rotate points
- Fragment Shader: decides pixel colors
- C-like
- Built-in types, functions for graphics
- Operator overloading
- Built-in functions
- Hopf Fibrations
- Instance arrays
- Every pixel maps to a unique color
- Every color is mapped to a lat/lon position
- Use the GPU: speed and scale.
- You can render millions of objects, 3D games, etc..
- From data art and exploratory visualizations
- Low-level API: use a library
Speaker: Ian Webster (@iwebst) — Video
- NASA JPL (Jet Propulsion Laboratory). For advanced users.
- Organize, browse, and visualize asteroid data.
- Ian wrote scrapers to gather data (orbits, asteroids, etc...)
- Put everything in a database and then wrote calculations for:
- Mission costs
- Mining value
- Shortest routes
- Close passes
- Built with WebGL, trigonometry, basic calculus
- Can't touch the DOM.
- Usually one worker is enough.
- Not supported on all browsers.
- Timed array processing. Keeps you from blocking on CPU intensive loops.
- Data preprocessing/scrapers (Python and Bash)
- Image preprocessing (Python)
- Database (Mongo/Redis)
- Data pipeline that runs scripts every night (cron)
- HTTP server (Flask)
- Reverse caching proxy (nginx, Cloudflare)
- Frontend (Three.js, D3.js, KineticJS)
- Use a particle system.
- Put everything you can on the GPU.
- Monitor fps and gracefully degrade (60 fps is ideal).
Speaker: Nigel Holmes (@nigelblue) — Video
Speaker: Jono Brandel (@jonobr1) — Slides, Video
Speaker: Andy Woodruff (@awoodruff) — Slides, Video
- "No data is still data."
- axismaps.com
- @cartofish
Speaker: Robert Kosara (@eagereyes) — Video
- Memory ("stickiness").
Techniques
- Connecting points with lines can create something more interesting and tell a story (scatterplot vs line chart).
- Ex (newsgraphic): Driving Safety, in Fits and Starts
- Doesn't always work. Can depend on data set.
- Isotype Charts: little symbols represent multiples.
- Neil Cohn, Visual Narrative Structure
- Establisher
- Initial
- Peak
- Release
- Zeigarnik Effect: how you remember things that are unfinished.
- Remember pieces of story as it unfolds.
Speaker: Santiago Ortiz (@moebio) — Video
- Moebius, Leichen
Speaker: Hannah Fairfield — Slides, Video
- Build to where you want to go.
- You'll always have crazy ideas. Test them.
- Dig around in the data.
- Choose form for the win.
- Layering information sets the path for discovery.
- But beware the false reveal.
- Editing to reveal on mobile is harder than it looks. Way harder.
- Oh yea - and do it live (ex: elections, olympics, etc...).
- Goofy is good.
- Goofy + thinky is even better.
Small multiples can show the same chart shape, but with different elements highlighted.
Finding the right form for your data is one of the hardest things.
- What North Dakota Would Look Like if Its Oil Drilling Lines Were Aboveground
- The Tenure Pipeline at Harvard Business School
- For Young Drivers, Drinking Is More Dangerous
- Driving Safety, in Fits and Starts
- How the Speed of Response Defined the Ebola Crisis
- Russia’s Endgame in Ukraine
- Mobile view: uses swipe instead of scroll.
- Rating a Health Law’s Success
- Mobile view.
- How Mikaela Shiffrin Won the Slalom
- Spot the Ball
- Who Needs a GPS?
Speaker: Ilya Boyandin (@ilyabo) — Slides, Video
Data Visualization Engineer at Teralytics. Talk title could've been "How I was seduced by a technology".
- Faceted exploration
- More engaging.
- You can have many states the system can be in.
- More states = more transitions.
- f:DATA -> DOM objects (function which maps data to DOM objects).
- Component model?
- How to handle state?
- Data flow?
- Industry standard for 30 years.
- M: notifies controller.
- C: updates model and view.
- V: sends user action to controller.
- Can leave you with lots of dependencies.
- Application state can become scattered.
- Redundancy.
- Get the app state right.
- Definite how any state is rendered.
- f:APP STATE 1 -> DOM objects
- f:APP STATE 2 -> DOM objects
- f:APP STATE 3 -> DOM objects
- The old way is full render on state change.
- React helps with this by its virtual DOM diffing.
- Easier to manipulate, and not that costly (doesn't cause many reflows).
- Full re-render becomes affordable.
- Very strong component model, which is a function that defines how data is mapped.
- Pattern to build applications enabled by React.
- Stores, actions, views, and dispatchers.
- Data flow always going in the same direction.
- Next iteration of Flux.
- Each component specifies its data needs. No more passing down from parent component.
- Immutable JS: inspired by Closure (ex: http://learnjsdata.com/iterate_data.html).
- Server-side rendering
- React Canvas, React Native
- React Developer Tools (Chrome extension).
- Live reloading (works with webpack).
- The Future of JavaScript MVC Frameworks
- React with D3.js
Speaker: Alyson Hurt (@alykat) — Slides, Video
- Mise en place.
- Static sites stand up better for heavy traffic, and there's not as much long-term maintenance.
- Most dev is in Python.
- Blog: How to setup a developers environment
- Every project has a README with detailed setup instructions.
- Each project operates in its own virtual environment.
- Apple scripts for launching terminal windows for a specific project.
- github.com/nprapps/styleguide
- archieml.org
Speaker: Lane Harrison (@laneharrison) — Video
- VALT: Visual Analytics Lab @ Tufts
Speaker: Dominikus Baur (@dominikus) — Slides, Video
- The closer you get to the graphics card (GPU), the harder it can get to get things running.
- Simple elements don't have major performance concerns (bar charts, line charts, etc...).
- WebGL is now on iOS and Safari on the desktop.
- OECD Better Life Index
- Based on canvas.
- Every flow is a canvas element.
- Every interaction is repainted.
- New version for 2015 is WebGL. Code became easier to work with, and there's only a single WebGL element. Runs 60fps.
- On Broadway
- Inspiration: Ed Ruscha, Every Building on the Sunset Strip (1966)
- Data sources: Instagram photos, Google Street view, Facade colors, etc...
- Made from canvas elements. When you zoom in elements are scaled, and then redrawn at a certain point.
- Know when to stop.
- Know your tools (dev tools).
- Remove things. Leave out unecessary elements (console.logs, CSS gradients).
- Throttle window.resize events.
- Shift things you can't get rid of:
- Move heavy calculations to web workers before bringing them back.
- Reflow
- Layout of whole page.
- Browser has to figure out where elements are and their sizes.
- Can be triggered by getting width and height of object (ex:
offsetWidth()).
- Repaint
Detach certain elements from the DOM, perform operations, and then reattach. Causes two reflows and repaints, but can be more performant than performing operations on the fly.
- Slower compared to Canvas and WebGL, especially when drawing and animating alot of elements.
- Vectors vs pixel based canvas.
- Supports retina displays out of the box.
- CSS support.
- DOM integration.
- Keep track of your objects. You lose communication with the browser.
- You have to know what to draw and when to draw it (rendering).
requestAnimationFramecan help with timing and rendering.- You have to do everything yourself.
- Canvas looks like an image to the browser.
- More performant than SVG.
- Can be painful to write.
- Basic shapes can require a lot of code.
- GLSL is low-level and can be complicated.
- Libraries:
Speaker: Danyel Fisher (@fisherdanyel) — Slides, Video
- What visualizations are suitable for big data?
- Big data has the potential to cost unlimited amounts of money.
- Massive savings for doing less.
- Choosing your aggregation instead of picking a hidden default can be very helpful in what your visualization is trying to show you.
Data iteration
- First pass: find min and max.
- Re-bucket every point.
What operations are worth pre-caching?
OLAP (Online Analytical Processing)
Decide what operations we want to process rapidly, and what we'll allow to be slow.
- BlinkDB
- Spark Streaming
Speaker: Adam Perer (Twitter) — Video
Speaker: Val Head (@vlh) — Video
- Timing: establishes mood, emotion, & reaction.
- Everything is better with cubic beziers.
- Follow through: overshooting your destination.
- Secondary action: supplemental action that reinforces and adds dimenson.
- The Illusion of Life
- cubic-bezier.com
- valhead.com/ui-animation
- alltherightmoves.valhead.com
- fivesimplesteps.com/products/css-animations
Speaker: Cameron Beccario (@cambecc) — Video
- Earth: an animation of global weather conditions.
- Wind Map
- BBC
- Let's Make a Map
- GFS (Global Forecast System) repo
- URL changes state as you move the map around. Makes it easy to share.
- Multiple SVG and Canvas layers. Particles are drawn on one canvas, and color animation is on another.
Data files can get very large.
- Scale, filter, encode, and gzip.