React has taken over the web. The companies that depend on it dominate internet traffic: Facebook (obviously, since they created it), Instagram, Netflix, Yahoo! Mail, The New York Times, WhatsAPP, CodeAcademy, Dropbox, Blackboard, Canvas and so many more. In an incredibly ironic twist, the WordPress blog editing tool I’m using to write this post uses React. If you have used ArcGIS StoryMaps–with its fancy responsive UX, manipulating visualizations on scroll–you used a React app. React and similar libraries are used almost everywhere because of these features. Managing large complicated sites is simpler and more manageable. On top of it, spinning up a simple site is expedited tremendously. Creating the boilerplate for a new site is as simple as running
npx create-react-app [your program name here] in the console, and an environment for data manipulation and visualization is immediately created.
How amazing this technology combination can be is best demonstrated with an example. Below is an iframe of a visualization of Florentine properties in 1561. The data comes from the DECIMA Project. You can link to the actual page here if you want to view it in full screen. The visualization represents almost 9,000 properties rendered in 3-dimensional space, and the browser handles it easily. More importantly, all the data is rendered on the client at load time, so it can be filtered in real-time without fetching anything after the initial load.
The map presents a large corpus of data in an immediately intelligable fashion without summarizing it, which eliminates the underlying data from the visualization. In other words, the data on the map is completely transparent. Every data entry is viewable on the map and the underlying information can be viewed in the popup.
1. Asynchronous simply means that code that must await some response to run is placed in a queue and only runs after the rest of the synchronous code finishes. This prevents the page from stopping a rendering (or any other) process as it awaits data from some other source.