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.
Overview
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
Related articles
-
900 Free Computer Science Courses from World’s Top 50 Universities
-
150+ Stanford On-Campus Computer Science Courses Available Online
-
100+ Free Courses to Learn JavaScript, React, Node
-
10 Best JavaScript Courses for 2024: Create Interactive Websites
-
15 Best React Courses for 2024: Hooks and Components
Reviews
4.5 rating, based on 2 Class Central reviews
-
Exciting course about trending subject. Casual way of explaining of the topics makes learning chill and reduce tension.
-
This class was excellent--where have you been all my life? The instructor was incredibly knowledgeable and articulate. This was the first time I have taken a class in a remote format, and I was delighted with it and look forward to coming back to ONLC for more classes in the future. I loved the fact that even though I was in a class with other people, the actual physical space was private and quiet and very conducive to learning! Thank you.
