alt.binaries.e-book.technicalShow header Prev. Next
[ GumRoad - React + D3v4 + Course by Swizec Teller ] MIXED.CONTENT (01/26) - "gr-reactd3v4..nfo" yEnc (1/1) NON-PROFIT
B-WEL (cchristoforous@gmail.com) 2018/01/11 23:12


gr-reactd3v4..nfo
GumRoad - React + D3v4 with Video Files
URL: https://swizec.com/reactd3js/
11.1 GB | English | EPUB/PDF/MOBI/MKV/MP4

Stuck copy pasting random D3 examples?
Become a data visualization engineer with React + D3v4.

Creating dynamic and interactive data visualizations on the web is a pain in the ass. It gets really hard when you add animation, inter-connected dashboards, and fast performance on mobile devices.

You're either using libraries you can't customize, copy pasting D3 examples you don't understand, or battling documentation to write spaghetti code you can't reuse.

It's okay, we've all been there.

But it doesn't have to be that way.

With React+D3v4 you'll learn the basics of building fast data visualization components in about an hour. Get started immediately without installing anything.

Don't know React? React+D3v4 starts at the very beginning.

Struggling with D3? Every function is explained.

New to modern JavaScript syntax? React+D3v4 comes with an interactive ES6 cheatsheet.

Get the confidence you need to excell.

Learning a new coding paradigm is hard

React is the biggest revolution in JavaScript programming since jQuery hit the scene 10 years ago, and D3 is unlike anything you've seen before.

"How the hell is it doing that?" is the most common phrase I hear when teaching people about React and D3. "What do I put in a component? Should it be a state or a prop? These D3 examples don't make any sense"

The problem comes from how most of us first learn to code. "It's like a cooking recipe", teachers will say.

Take a bellpepper and cut it up. Then sprinkle some salt and pepper, add olive oil, and voila: you have a refreshing salad. A very simple salad with a single ingredient, but it's a salad. You can follow along and eventually you will understand what the code does.

That's called imperative programming. It reads as a series of steps. How to do something.

But React and D3 are declarative. You don't write How you want your code to work, you write What you want to achieve. Your bellpepper salad recipe looks more like this:
<Salad>
  <Oil />
  <Bellpepper cut salted />
</Salad>

You look at that and you immediately know it's a salad. It involves oil and bellpeppers. You don't have to read all the steps to know the result. The recipe declares what it's making.

Declarative code makes your project cleaner and easier to maintain, which means you spend more time delivering value to your users and clients.

But learning how to think declaratively is hard. It feels like voodoo magic until you get used to it. We've all been there. To this day it still hurts my brain sometimes.

That's why React+D3v4 takes you on a journey through 7 projects and 5 interactive examples. Learn the basics in about an hour then dive as deep as you want to solidify your knowledge. Get the confidence you need to excell at your job.

Become a data visualization engineer with React+D3v4

React+D3v4 gives you a quick overview of the basics to get you started, followed by a deep dive that solidifies your knowledge through varied projects and examples. Build working code that you can show off to your friends, boss, and coworkers.



Dive into 7 projects that teach you how it all fits together. Build interactive visualizations, create animations, and build fast performance with canvas. Learn everything there is to know about building beautiful apps with React and D3.

From the very basics of React and D3, to state handling with Redux and MobX, React alternatives like Preact and Inferno.

React+D3v4 gives you practical examples

An interactive choropleth map shows you how to work with topographical data, draw maps, and census regions. We implement zooming and map exploration.

An interactive histogram teaches you some of D3's statistical functions, and the basics of drawing charts. Drawing shapes, adding axes, parsing data ...

Together they form an interactive dashboard where multiple charts share data, react to common controls, and act together to give users a full picture.

A rainbow snake teaches you about building transition-based animation. We place 50 circles on the screen and perform transitions when our user touches them with their mouse.

An animated alphabet teaches you about creating enter/update/exit transitions. Animate elements coming in and out of your data visualization.

A particle generator teaches you the basics of using Redux for state management, pushing your browser to the limits, and animating tens of thousands of elements.

An interactive billiards game teaches you about rendering graphical React components onto HTML5 canvas, making them interactive, and using MobX for state handling.

A dancing pythagorean tree fractal teaches you about component recursion. We use it to compare differences between React, Preact, and Inferno.

INCLUDES
React+D3v4 [PDF/epub/mobi]
3 recap videos
5 full HD screencasts
7 full projects
Interactive course

What's in the book
Table of contents
Introduction

    Foreword
    Why you should read React + D3v4
    What you need to know
    How to read this book
    Why React and D3.js
    Buzzword soup explained
    JSX

Visualizing data with React and d3.js

    The basic approach
    Blackbox Components
    A quick blackbox example - a D3 axis
    A quick blackbox example - a React+D3 axis

    Full-feature Integration
    A color scale

    State Handling Architecture
    Basic architecture
    A caveat
    Structuring your React app
    Set up a local environment with create-react-app
    Make sure you have node.js
    Install create-react-app
    Run create-react-app
    What you get
    Install dependencies for this book

A big example project - 176,113 tech salaries visualized

    Show a Preloader
    Step 1: Get the image
    Step 2: Preloader component
    Step 3: Update App
    Step 4: Load Bootstrap styles
    Asynchronously load data
    Step 0: Get the data
    Step 1: Prep App.js
    Step 2: Prep data parsing functions
    Step 3: Load the datasets
    Step 4: Tie the datasets together
    Render a choropleth map of the US
    Step 1: Prep App.js
    Step 2: CountyMap/index.js
    Step 3: CountyMap/CountyMap.js
    Step 4: CountyMap/County.js
    Render a Histogram of salaries
    Step 1: Prep App.js
    Step 2: CSS changes
    Step 3: Histogram component
    Step 4: HistogramBar (sub)component
    Step 5: Axis HOC
    Make it understandable - meta info
    Dynamic title
    Dynamic description
    Median household line
    Add user controls for data slicing and dicing
    Step 1: Update App.js
    Step 2: Build Controls component
    Step 3: Build ControlRow component
    Step 4: Build Toggle component
    Step 5: Add US state and Job Title filters
    A small speed optimization
    Rudimentary routing
    Prep for launch
    Setting up deployment
    Twitter and Facebook cards and SEO
    Full dataset
    Launch!

Animation

    Using a game loop for rich animation
    A bouncing ball
    Using transitions for simple animation
    Rainbow snake
    Enter/update/exit animation
    Animated alphabet
    Animating with React, Redux, and d3

    3 presentation components
    6 Redux Actions
    1 Container component
    1 Redux Reducer
    What we learned

Speed optimizations

    Using canvas
    Why Canvas
    The trouble with HTML5 Canvas
    Declarative HTML5 Canvas with Konva and react-konva
    A particle generator pushed to 20,000 elements with Canvas
    Billiards simulation with MobX and canvas
    Using a React alternative like Preact or Inferno
    Stress testing with a recursive fractal
    Trying the stress test in Preact and Inferno

Conclusion
Appendixes

    Appendix A - roll your own environment
    Appendix B - Browserify-based environment

Next Prev. Article List         Favorite