_drafts

RAWGraphs and browser-based apps

Data Hub Tool Talk: RAWGraphs is a browser-based app for quick data visualization. With extensive help built in, this is a great tool for teaching, learning, and experimenting with charts. This session will introduce the tool, along with tips for working with data on the web and other browser-based apps. talk recording

RAWGraphs intro

https://www.rawgraphs.io/

RAWGraphs is a free, open source, browser-based data visualization app.

There are a lot of free-ish web-based data viz tools, e.g.

However, each of these tools are proprietary and server-based services. You need to send your data to their servers where the processing is done and your visualizations are hosted.

RAWGraphs is different –> it is a client-side JavaScript app, meaning that all the processing is done on your computer, in your browser. It works on any computer without installing anything. You don’t send any data to their server. They also don’t host your data or visualizations.

Instead RAWGraphs focuses in on being a pragmatic visual tool to efficiently move from a spreadsheet to a vector graphic visualization. Most often you would do some data wrangling (with Sheets, Excel, LibreOffice, OpenRefine) before using RAWGraphs, and maybe some vector editing after exporting your visualization (with Inkscape).

Early versions built on the svg visualization library D3.js. Part of what was cool about D3 was there was a gallery of examples with the code directly available to edit, copy, and repurpose with your own data (now closely integrated with Observable, JS browser-based code notebooks; for example of older style, see NVD3 live code). These examples make a clear connection of learning by experimenting and re-using templates. However, D3 has a steep learning curve, and you can’t just smoothly explore your data via a variety of visualizations.

As a code free alternative, RAWGraphs uses the power of JS to provide a simple-ish visual interface to create and configure data visualizations in the browser. The goal is to get you to a solid SVG export that can then be tweaked for publication and sharing.

It is a great tool for prototyping, quick exploration, and teaching/learning. For example, provide your students a link to RAWGraphs plus a link to a CSV, and have them learn about steps to a visualization–without installing anything or leaving the browser. Each chart type has a description and related tutorial, so there is a ton of learning built directly into the interface.

Walkthrough RAWGraphs app:

  1. “Try our data samples” > Iris flowers. Check parsing options and stacking transformation utility.
  2. select “Convex hull” (check description and tutorial)
  3. map length to X, width to Y, Species to Groups
  4. customize
  5. Export as SVG

Data on the web

When trying to load data from the web you may encounter CORS errors. Browsers will not directly load files from a different domain than the page’s home domain for security reasons. However, servers can implement a CORS-enabled policy that allows cross-domain sharing–so you will have to put your data somewhere that is configured for sharing!

Here is some good options:

  • Publish a Google Sheet as CSV –> On the Sheet, go to File > Publish to the Web. On the popup modal, use the dropdowns in “Link” tab to select the sheet name of your metadata (usually “Sheet 1”) and “Comma-separated values (.csv)” options, then click “Publish” button. Copy the link that is provided.
  • Publish on GitHub –> put your data in a repository, then use the “raw” link provided. It follows the pattern: “https://raw.githubusercontent.com/username/repositoryname/branchname/filename”
  • Publish on GitHub Gist –> create a new Gist, paste or drag your data in, make sure you provide a correct filename. Use the “raw” link. It follows the pattern: “https://gist.githubusercontent.com/username/hash/raw/hash/filename”
  • Handy note: GitHub will preview render geojson on a map!

Other client-side apps

Data viz resources