mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): add d3 lessons (#64992)
Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com>
This commit is contained in:
majestic-owl448
@@ -6601,6 +6601,12 @@
|
||||
"Test what you've learned about CSS Libraries and Frameworks with this quiz."
|
||||
]
|
||||
},
|
||||
"lecture-introduction-to-data-visualization": {
|
||||
"title": "Introduction to Data Visualization",
|
||||
"intro": [
|
||||
"In these lessons, you will learn about basic data visualization concepts."
|
||||
]
|
||||
},
|
||||
"lecture-introduction-to-typescript": {
|
||||
"title": "Introduction to TypeScript",
|
||||
"intro": [
|
||||
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Introduction to Data Visualization
|
||||
block: lecture-introduction-to-data-visualization
|
||||
superBlock: front-end-development-libraries-v9
|
||||
---
|
||||
|
||||
## Introduction to the Introduction to Data Visualization
|
||||
|
||||
In these lessons, you will learn about basic data visualization concepts.
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 695b906494aa8d03c39ec2db
|
||||
title: What Is Data Visualization?
|
||||
challengeType: 19
|
||||
dashedName: what-is-data-visualization
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Every industry, from music to healthcare, works with large and often complex datasets. These can include patient medical records, playlist trends over time, or social media engagement metrics.
|
||||
|
||||
To make sense of this information, businesses use a variety of tools to help their teams analyze data and make informed decisions about their products and services.
|
||||
|
||||
One of the most powerful tools for understanding and communicating this data is **data visualization**.
|
||||
|
||||
Data visualization creates clear, visual formats from complex data. Examples of these types of visuals include pie charts, scatter plots, bar charts, and more. Good visualizations help businesses save time identifying key information, trends, and relationships in the data.
|
||||
|
||||
There are many popular data visualization tools used in business, including Microsoft Excel, Power BI, Google Charts, and Tableau.
|
||||
|
||||
In these upcoming lessons and workshops, you’ll learn how to create interactive visualizations using the D3.js JavaScript library.
|
||||
|
||||
The goal of this module is to introduce you to the fundamentals of data visualization, and guide you through building your own visualizations with JavaScript.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
What is data visualization?
|
||||
|
||||
## --answers--
|
||||
|
||||
A method for storing large datasets in cloud storage platforms.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how visuals can help teams understand complex data.
|
||||
|
||||
---
|
||||
|
||||
A technique used to encrypt data for secure transmission.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how visuals can help teams understand complex data.
|
||||
|
||||
---
|
||||
|
||||
A process of creating clear, visual formats from complex data.
|
||||
|
||||
---
|
||||
|
||||
A programming language used exclusively for statistical analysis.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how visuals can help teams understand complex data.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is NOT an example of a commonly used data visualization tool?
|
||||
|
||||
## --answers--
|
||||
|
||||
Microsoft Excel (and Power BI)
|
||||
|
||||
### --feedback--
|
||||
|
||||
The wrong option is a commonly used Python IDE.
|
||||
|
||||
---
|
||||
|
||||
PyCharm
|
||||
|
||||
---
|
||||
|
||||
Google Charts
|
||||
|
||||
### --feedback--
|
||||
|
||||
The wrong option is a commonly used Python IDE.
|
||||
|
||||
---
|
||||
|
||||
Tableau
|
||||
|
||||
### --feedback--
|
||||
|
||||
The wrong option is a commonly used Python IDE.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is a commonly used JavaScript library for creating data visualizations?
|
||||
|
||||
## --answers--
|
||||
|
||||
Django
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the last part of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
D3
|
||||
|
||||
---
|
||||
|
||||
NumPy
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the last part of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
Keras
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the last part of the lesson for the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 695b9093a0c45b36932dcbca
|
||||
title: What Are Common Chart Types and When Should You Use Them?
|
||||
challengeType: 19
|
||||
dashedName: what-are-common-chart-types-and-when-should-you-use-them
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There are many ways to represent data in a visual format. In this lesson, you will learn about a few commonly used types of data visualizations.
|
||||
|
||||
The first type you will learn about is charts that represent change over time, like stock price performance or health statistics.
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-common-chart-types-and-when-should-you-use-them-1.png" alt="example area chart">
|
||||
|
||||
Another common type of visual would be a category comparison chart. This type of visual shows comparisons between different categories, such as ad performance across marketing channels, or sales by product category for online stores.
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-common-chart-types-and-when-should-you-use-them-2.png" alt="example bubble chart for marketing channel performance leads">
|
||||
|
||||
If you needed to represent an item's position in an ordered list, you could use a ranking chart. Examples of this type of visual would include performance statistics or election results.
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-common-chart-types-and-when-should-you-use-them-3.png" alt="example ranking chart for election results">
|
||||
|
||||
Another commonly used type of data visualization would be a part of the whole visual. This would include pie charts or treemaps that could be used to represent budgets or product categories.
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-common-chart-types-and-when-should-you-use-them-4.png" alt="example pie chart for budget">
|
||||
|
||||
If you are working with data that shows a correlation between two or more variables, you can use a correlation chart. These types of charts would include heat maps or scatterplots that could represent data such as income vs. education level, advertising spend vs. sales, or temperature vs. energy consumption.
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-common-chart-types-and-when-should-you-use-them-5.png" alt="example scatterplot for income vs. education level">
|
||||
|
||||
There are many more types of charts like flow charts, distribution charts, relationship charts and more. But this lesson was about providing you with a brief introduction into some of the types of charts you might consider when representing complex data.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
What is a good real-world example of using a chart to show changes over time?
|
||||
|
||||
## --answers--
|
||||
|
||||
Example budget breakdowns for different categories.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the first part of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
Comparing sales performances in different categories.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the first part of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
Displaying the market share distribution.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the first part of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
Stock price performances or health statistics.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following types of charts can be used to show ad performance across channels in marketing or sales by product category for online stores?
|
||||
|
||||
## --answers--
|
||||
|
||||
Distribution chart
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the type to best show comparisons.
|
||||
|
||||
---
|
||||
|
||||
Category comparison chart
|
||||
|
||||
---
|
||||
|
||||
Relationship chart
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the type to best show comparisons.
|
||||
|
||||
---
|
||||
|
||||
Flow chart
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the type to best show comparisons.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is NOT a common type of chart used in data visualization?
|
||||
|
||||
## --answers--
|
||||
|
||||
Relationship chart
|
||||
|
||||
### --feedback--
|
||||
|
||||
One of these is part of a plant and not a type of data visualization chart.
|
||||
|
||||
---
|
||||
|
||||
Correlation chart
|
||||
|
||||
### --feedback--
|
||||
|
||||
One of these is part of a plant and not a type of data visualization chart.
|
||||
|
||||
---
|
||||
|
||||
Twig chart
|
||||
|
||||
---
|
||||
|
||||
Flow chart
|
||||
|
||||
### --feedback--
|
||||
|
||||
One of these is part of a plant and not a type of data visualization chart.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
+145
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 695b9093a0c45b36932dcbcb
|
||||
title: What Is the D3 Library Used For?
|
||||
challengeType: 19
|
||||
dashedName: what-is-the-d3-library-used-for
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the prior lessons, you were introduced to data visualization which is the process of creating clear, visual formats to represent complex data. In this lesson, you will learn about the D3 library.
|
||||
|
||||
The D3 library is a free and open source library you can use to create compelling and effective data visualizations in JavaScript.
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-is-the-d3-library-used-for-1.png" alt="A graph with four nodes labeled A, B, C, and D. Node A connects to B, C, and D. Node B connects to A and D. Node C connects to A. Node D connects to A and B. It's the same image as before.">
|
||||
|
||||
|
||||
The name D3 is an abbreviation for data-driven documents, referring to how it dynamically binds data to elements in the Document Object Model (DOM). This library is flexible and works naturally with the web. Instead of having to learn a whole new graphical representation, you can build data visualizations with `svg` and `canvas` elements.
|
||||
|
||||
For example, if you want to create a bar chart using D3, you can do the following all in one JS file:
|
||||
|
||||
* Declare variables representing the chart dimensions and margins
|
||||
|
||||
* Declare the horizontal position scale
|
||||
|
||||
* Declare the vertical position scale
|
||||
|
||||
* Create the SVG container with the bars and labels
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-is-the-d3-library-used-for-2.png" alt="A graph with four nodes labeled A, B, C, and D. Node A connects to B, C, and D. Node B connects to A and D. Node C connects to A. Node D connects to A and B. It's the same image as before.">
|
||||
|
||||
So what are some other reasons to learn D3 over other visualization tools like Chart.js, Plotly, or Tableau?
|
||||
|
||||
Unlike other tools, D3 provides you with a lot of low-level control where you can build customizable and interactive visualizations with just vanilla HTML, CSS, and JavaScript. Plus, the library is in JavaScript, so you don't need to worry about learning a whole new language.
|
||||
|
||||
In upcoming workshops and labs, you will learn the fundamentals of the D3 library, like selections, shapes, and scales. You will learn these key concepts by building scatterplot graphs, bar charts, dashboard apps, and more.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the D3 library?
|
||||
|
||||
## --answers--
|
||||
|
||||
A free and open source library for creating compilers.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer back to the beginning of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
A free and open source library for creating interactive forms and tables.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer back to the beginning of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
A free and open source library for creating data visualizations in JavaScript.
|
||||
|
||||
---
|
||||
|
||||
A free and open source library for creating microservices.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer back to the beginning of the lesson for the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What is one advantage to using D3 over another tool like Chart.js or Tableau?
|
||||
|
||||
## --answers--
|
||||
|
||||
D3 automatically generates all chart types with minimal configuration, similar to drag-and-drop tools.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the level of control D3 provides you.
|
||||
|
||||
---
|
||||
|
||||
D3 provides you with low-level control so you can build customizable and interactive visualizations.
|
||||
|
||||
---
|
||||
|
||||
D3 includes a built-in GUI (graphical user interface) for creating dashboards without writing code.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the level of control D3 provides you.
|
||||
|
||||
---
|
||||
|
||||
D3 uses a completely new programming language designed for data visualization.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the level of control D3 provides you.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What is a type of project you will build in this data visualization module?
|
||||
|
||||
## --answers--
|
||||
|
||||
e-commerce site
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
express server
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
discord bot
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lesson for the answer.
|
||||
|
||||
---
|
||||
|
||||
scatterplot graph
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "Introduction to Data Visualization",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "lecture-introduction-to-data-visualization",
|
||||
"helpCategory": "JavaScript",
|
||||
"blockLayout": "challenge-list",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "695b906494aa8d03c39ec2db",
|
||||
"title": "What Is Data Visualization?"
|
||||
},
|
||||
{
|
||||
"id": "695b9093a0c45b36932dcbca",
|
||||
"title": "What Are Common Chart Types and When Should You Use Them?"
|
||||
},
|
||||
{
|
||||
"id": "695b9093a0c45b36932dcbcb",
|
||||
"title": "What Is the D3 Library Used For?"
|
||||
}
|
||||
],
|
||||
"blockLabel": "lecture",
|
||||
"usesMultifileEditor": true
|
||||
}
|
||||
@@ -80,7 +80,7 @@
|
||||
{
|
||||
"dashedName": "data-visualization",
|
||||
"comingSoon": true,
|
||||
"blocks": []
|
||||
"blocks": ["lecture-introduction-to-data-visualization"]
|
||||
},
|
||||
{
|
||||
"dashedName": "typescript-fundamentals",
|
||||
|
||||
Reference in New Issue
Block a user