First Steps D3 with React & TypeScript — Part I. Setting up your first project.

Integrating interactive data visualizations (aka Data Viz) components can help tell your story better. React is already set to be able to animate Scalable Vector Graphics (SVG), HTML, and Canvas elements, this is nothing new.

Animating SVG, Canvas and HTML have been done for years with HTML, and pure JavaScript. React allow HTML, CSS, and JavaScript capabilities as well as know-how to play nicely with other APIs and add-ons to help animate the view.

I put up two parts articles to help you get started with React & d3 and see what are your options when it comes to creating components, drawing animating, and interacting. This article is part I out of II.

Why use data visualizations?

· Business intelligence with data visualization capabilities has been popular and offers an ROI of $13.01 back on every dollar spent (https://nucleusresearch.com/research/single/analytics-pays-back-13-01-for-every-dollar-spent/).

· A picture is worth 1000 words!

· 93% of communication is nonverbal (https://ubiquity.acm.org/article.cfm?id=2043156)

· Our brain processes an image at a speed of 13 milliseconds. 90% of information transmitted to our brain is visual —…