• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

eagereyes

Visualization and Visual Communication

  • Explore
    • Starter Pack
    • Blog Calendar
    • Blogroll
    • eagereyesTV YouTube Videos
  • Practical
    • Basics
    • Pie Charts
    • Techniques
    • Book Reviews
    • Journalism
  • Academic
    • Speaking Mistakes
    • Acceptance Rates
    • Papers
    • Conference Reports
    • Lists of Influences
    • Criticism
    • Peer Review
  • Admin
    • About
    • Contact
    • License
Link: Jérôme Cukier’s Series on Visualization with React

Robert Kosara / September 5, 2016

Link: Jérôme Cukier’s Series on Visualization with React

While D3 is the standard way of doing visualization on the web right now, there’s a lot of interesting stuff happening in the world of JavaScript framework React. And it turns out, you can do some really interesting visualization stuff with React, once you understand the basics. In a series of very thorough postings, Jérôme Cukier takes you through the fundamentals of React and how to use it by itself or together with D3.

Reading all the postings is not a small undertaking, so be prepared to spend some time on them. You’ll also have to work on a project to actually put those things into practice, or they won’t stick. Jérôme happened to post his series just as I started work on a new prototype, and I had been curious about React for a while – so this turned out to be a great match for what I was starting to build. Jérôme is now a visualization person at Uber (according to his Twitter bio), but he worked at Facebook before and is quite familiar with React from his time there.

React is great when you’re dealing not just with a visualization, but a number of elements around it that interact with it. I had played with React for a bit a while ago, and never quite got it. My current project is a really good fit though, and Jérôme’s postings got me going in the right direction, and the rest has been fun and fascinating to figure out.

I was going to write brief summaries of the postings, but it turns out Jerome has already done that for me! So here I’m just quoting from his series announcement posting:

  1. React vs D3, where we’ll explore similarities and differences between these two frameworks.
  2. An ES6 primer. I have written all the examples in good, sensible, modern ES6 javascript, because as of 2016 this is probably the most common syntax. Without going too deep into the details, I’ll explain what parts of the language I used for the examples, and how they differ from ES5.
  3. Gentle introduction to coding with React, where we’ll explore the high-level concepts of the framework and see how we can create visual elements from data. We’ll end on a presentation of JSX, a flavor of Javascript used to write React applications, which I’ll also use for most of the examples for the same reasons as ES6 – because it’s the most widespread way of writing React code today.
  4. React components, the most important concept in React and the building blocks of React applications.
  5. Beyond rendering. We’ll look at the React concept of lifecycle methods, and also how we can use d3 within React components.
  6. Creating a React visualization web app – using what we’ve seen, and two libraries – Facebook’s create-react-app and Uber’s React-vis, we’ll create a small standalone React visualization that can be deployed on its own website.
  7. The big leagues – in that last part, we’ll write together a more complex visualization with live data and several components interacting with one another.

Filed Under: Links Tagged With: web

Robert Kosara is Senior Research Scientist at Tableau Software, and formerly Associate Professor of Computer Science. His research focus is the communication of data using visualization. In addition to blogging, Robert also runs and tweets. Read More…

Reader Interactions

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

More Links Articles

  • Link: Maarten Lambrecht’s List of 2018 Visualization Lists
  • Linkstravaganza: Schwabish’s Story Links and Andrews’ Seeking Minard
  • Link: xkcd’s Earth Temperature Timeline
  • Link: Our World in Data
  • Link: Mona Chalabi’s Data Sketches on Instagram

Recently Popular

  • Data: Continuous vs. Categorical
  • The Simple Way to Scrape an HTML Table: Google Docs
  • Understanding Pie Charts
  • Spreadsheet Thinking vs. Database Thinking
  • How The Rainbow Color Map Misleads
  • What is Visualization? A Definition
  • An Illustrated Tour of the Pie Chart Study Results
  • Facebook
  • GitHub
  • LinkedIn
  • RSS
  • Twitter
  • YouTube

Subscribe via Email

Footer

  • About
  • Contact
  • License

Copyright © 2006–2021 Robert Kosara · All original materials are available under CC-BY-SA