,
8 tweets,
4 min read
Read on Twitter
Yo, here's my nü #dataviz workflow:
1. Visidata for data exploration & export
2. @observablehq & d3.js to build graphic pieces
3. Export d3.js graphic as SVG from notebook
4. Finish graphic in Adobe Illustrator
5. Run ai2html to publish on the web
Interested? Keep reading 👇🏿
1. Visidata for data exploration & export
2. @observablehq & d3.js to build graphic pieces
3. Export d3.js graphic as SVG from notebook
4. Finish graphic in Adobe Illustrator
5. Run ai2html to publish on the web
Interested? Keep reading 👇🏿
👉🏿 Visidata is a command-line tool for manipulating data github.com/saulpw/visidata. I first learned about it from @jsvine at #NICAR18. It's a great program for working with data and can work with a ton of formats.
👉🏿 @observablehq let's you create interactive notebooks with data and code beta.observablehq.com. Rather than setting up a local build development for your charts, you can do it all from the browser. You can also share your work with your colleagues. Great for collaboration.
👉🏿 D3.js is a lot of things depending on who you ask. According to @Elijah_Meeks, it's _not_ a data visualization library (I agree) medium.com/@Elijah_Meeks/…. It's great for formatting data to be visualized tho! (Oh, and maps. Use it for maps.)
👉🏿 Adobe Illustrator makes swoopy arrows and curved text super simple to add. No more fancy JavaScript for line breaks in your text! Adding annotations/linebreaks with d3.js has gotten easier thanks to folks like @DataToViz but if you don't need interactivity then go static!
👉🏿 ai2html.js is an Illustrator script that lets you published your sweet charts as HTML and CSS. Sticking with plain ol' HTML/CSS gives you great performance and wider browser support. ai2html.org
🙌🏿 I've used this approach for about two months now and I've found myself making better, faster charts. Try it out sometime!
👉🏿 Oh, and here's how you export SVGs from a notebook in Observable beta.observablehq.com/@mbostock/savi…
