The Wayback Machine - https://web.archive.org/web/20171014100056/https://www.packtpub.com/web-development/learning-reactjs-data-visualization-video

Learning React.js Data Visualization [Video]

Preview in Mapt

Learning React.js Data Visualization [Video]

Ben Fhala

Make the most of your data using React.js
Mapt Subscription
FREE
$29.99/m after trial
Video
$60.35
RRP $70.99
Save 14%
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$60.35
$29.99p/m after trial
RRP $70.99
Subscription
Video
Start 30 Day Trial

Frequently bought together


Learning React.js Data Visualization [Video] Book Cover
Learning React.js Data Visualization [Video]
$ 70.99
$ 60.35
Machine Learning for Data Science [Video] Book Cover
Machine Learning for Data Science [Video]
$ 60.99
$ 51.85
Buy 2 for $35.00
Save $96.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Video Details

ISBN 139781787285750
Course Length3 hours 05 minutes

Video Description

React is an incredibly popular part of modern full-stack web development, and is a keystone of fluid SPAs (single page applications). It is capable of rendering data reactively on to the web, enabling users to interact with it and see the results in real time.

Using JSON as the data format, this course will show you how to ingest your data and display it on the web using a variety of techniques, such as charts and grids. It will run through the logic process, meaning that you will be able to take these skills and apply them in your own projects. Along the way, you will also learn more about the new ES6 language and how it can benefit your React skills, and how to create React controllers.

You’ll begin by gaining an understanding of JSON and how to create JSON files, then how to load them using webpack and ES6 and integrate them into a React component. We will then examine different data types, and you’ll find out how to move data between them in order to create a reactive map. Next, we’ll use ChartJS to display data in various chart forms, and finally we’ll look at how to load data dynamically from a MongoDB database and display it in our React component.

Style and Approach

This carefully modulated course will take you every step of the way through importing your data into React and creating visualizations from it. It is a thorough and methodical course, not skipping over technologies or assuming knowledge. It is also a very practical course, with full examples of technologies used along the way.

Table of Contents

JSON
Overview and Setting Things Up
Overview of JSON Basics
Importing JSON Files with webpack
Building ES6 React Classes
Integrating JSON into React Components
From Web Services to Maps
Creating a Map
Finding Points on a Map
Calculating a Map’s Latitude and Longitude
Using ES6 String Templates
Connecting to the Web Service
Changing a Component’s State
From CSV to a Bar Chart
Reviewing package.json and webpack Configurations
Modifying Style Attributes in React
Preparing the Chart Data Object
Creating a Bar Chart with ChartJS
Formatting Data
Creating a React Chart Component for ChartJS
Creating Utility Modules
Adding Random Colors
Cleaning Up Memory Leaks
Diving Deep into Properties
Exploring the Options in ChartJS
From JSON to MongoDB
MongoD Versus Mongo
Database, Collection, and Document
Preparing Our Data for MongoDB
Setting Up NodeJS with Express and MongoJS
Creating a Radar Chart with MongoDB

What You Will Learn

  • Understand how different types of data can be ingested into React
  • Create different visualizations from your data (charts, grids, maps, and more)
  • Find out how to create React controllers
  • Integrate JSON data into your react component using JSX spread and React props
  • Enable react to be prepared for changes within the component
  • Create data driven charts

Authors

Table of Contents

JSON
Overview and Setting Things Up
Overview of JSON Basics
Importing JSON Files with webpack
Building ES6 React Classes
Integrating JSON into React Components
From Web Services to Maps
Creating a Map
Finding Points on a Map
Calculating a Map’s Latitude and Longitude
Using ES6 String Templates
Connecting to the Web Service
Changing a Component’s State
From CSV to a Bar Chart
Reviewing package.json and webpack Configurations
Modifying Style Attributes in React
Preparing the Chart Data Object
Creating a Bar Chart with ChartJS
Formatting Data
Creating a React Chart Component for ChartJS
Creating Utility Modules
Adding Random Colors
Cleaning Up Memory Leaks
Diving Deep into Properties
Exploring the Options in ChartJS
From JSON to MongoDB
MongoD Versus Mongo
Database, Collection, and Document
Preparing Our Data for MongoDB
Setting Up NodeJS with Express and MongoJS
Creating a Radar Chart with MongoDB

Video Details

ISBN 139781787285750
Course Length3 hours 05 minutes
Read More

Read More Reviews

Recommended for You

Machine Learning for Data Science [Video] Book Cover
Machine Learning for Data Science [Video]
$ 60.99
$ 51.85
Java from Beginner to Expert [Video] Book Cover
Java from Beginner to Expert [Video]
$ 121.99
$ 103.70
3D Game Development with Unity 5.x [Video] Book Cover
3D Game Development with Unity 5.x [Video]
$ 124.99
$ 106.25
Learning Ceph - Second Edition Book Cover
Learning Ceph - Second Edition
$ 39.99
$ 28.00
Tech Explorations™ Make an Arduino Robot [Video] Book Cover
Tech Explorations™ Make an Arduino Robot [Video]
$ 64.99
$ 55.25
Building a Basic App Using Xamarin and Xamarin.Forms [Video] Book Cover
Building a Basic App Using Xamarin and Xamarin.Forms [Video]
$ 124.99
$ 106.25