YoVDO

Data Visualization with D3, JavaScript, React - Full Course [2021]

Offered By: freeCodeCamp

Tags

Data Visualization Courses Computer Science Courses Javascript Courses React Courses D3.js Courses HTML Courses

Course Description

Overview

Dive into a comprehensive 12-hour course on data visualization using D3, JavaScript, and React. Master the fundamentals of web technologies, including HTML, CSS, and SVG, before progressing to more advanced concepts. Learn to create various chart types, including bar charts, scatter plots, and line charts, while incorporating interactive elements. Explore geospatial data visualization techniques, create world maps, and work with time-based data. Develop skills in data preparation, loading, and parsing using modern web technologies. Gain insights into React performance optimization and modular code organization. Apply your knowledge to real-world projects, such as visualizing coronavirus data and mapping missing migrants. By the end of this course, you'll have the skills to create sophisticated, interactive data visualizations for web applications.

Syllabus

Datavis 2020 Introduction.
What is Data Visualization.
Week 1 Q & A.
Finding Visualizations.
Introduction to Web Technologies.
Let's Make a Face Part I (HTML, CSS, SVG).
Let's Make a Face Part II (React).
Let's Make a Face Part III (React & D3).
Let's Make a Face Part IV (React Components & ES6).
Let's Make a Face Part V multiple files with ES6 modules.
Let's Make a Face Part VI (Compartmentalizing Complexity).
Coronavirus Dataviz Hackathon Part I (Coronavirus Dataviz).
Preparing Data for Visualization.
Loading Data with Fetch, Promises, Aync & Await.
Interaction With React.
Parsing CSV Data with D3.
Loading Data in React.
Inputs for Visualization: Data & Tasks.
Iterating Fast with Vega Lite API.
Marks & Channels.
Visualizing Data with React & D3.
Making a Bar Chart with React & D3.
Margins and Axes.
Refactoring a Bar Chart.
Stylized Bar Chart.
Making a Scatter Plot.
Working with Time.
Making a Line Chart.
Preparing Geospatial Data.
Making a World Map with React & D3.
Menus with React.
Scatter Plot with Menus.
Polished Scatter Plot with Menus.
Scatter Plot with Color.
Making a Color Legend.
Interactive Color Legend.
Points on a Map.
Using Size.
Missing Migrants.
Missing Migrants Part II: Aggregation by Month.
Missing Migrants Part III: On a Map.
Multiple Views.
Why Use Modules.
Multiple Views Cleanup.
Multiple Views with Brushing.
React Performance Optimization.
Choropleth Map.
Log Scales.


Taught by

freeCodeCamp.org

Related Courses

Web Development
Udacity
Programming Languages
University of Virginia via Udacity
Building a Basic Website
University of Massachusetts Amherst via Independent
Web-Technologien
openHPI
iDESWEB, Introducción al desarrollo web
Miríadax