d3.js 数据可视化负数_使用D3.js学习基本数据可视化

d3.js 数据可视化负数

我们的目标是学习数据基础 (Our goal is to learn the basics of data)

You'll learn the basics of data visualization using D3 through this project.

您将通过该项目学习使用D3进行数据可视化的基础知识。

什么是D3.js？ (What is D3.js?)

For those who are not familiar with D3, D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.

对于不熟悉D3的人，D3.js是一个JavaScript库，用于根据数据处理文档。 D3可帮助您使用HTML，SVG和CSS使数据栩栩如生。

D3.js helps you attach your data to DOM (Document Object Model) elements. Then you can use CSS3, HTML, and/or SVG showcase this data. Finally, you can make the data interactive through the use of D3.js data-driven transformations and transitions.

D3.js可帮助您将数据附加到DOM(文档对象模型)元素。 然后，您可以使用CSS3，HTML和/或SVG展示此数据。 最后，您可以通过使用D3.js数据驱动的转换和过渡来使数据具有交互性。

项目说明： (Project Explanation:)

场景： (Scenario:)

There”s a class of Online students interacting with different topics of the subject and gives quiz on those topics.

一类在线学生与该主题的不同主题进行交互，并对这些主题进行测验。

There are 15 topics and on each topic, we have a numbers of student who have taken quiz and have scored in three categories: Low, Mid and High

有15个主题，在每个主题上，我们都有大量的学生参加了测验，并在以下三个类别中得分：低，中和高

例如(给出数据)： (For example (Given data ):)

Topic: “1”, low: 4, mid:13, high: 18

主题：“ 1”，低：4，中：13，高：18

Topic: “2”, low: 11, mid:12, high: 6

主题：“ 2”，低：11，中：12，高：6

Topic: “3”, low: 12, mid:24, high: 6 and so on.

主题：“ 3”，低：12，中：24，高：6，依此类推。

Note that Topic 1 has4 + 13 + 8 = 35 student has taken the quiz and Topic 2 has 11+12+6 = 29 student and topic 3 has 42 students and so on.

请注意，主题1有4 + 13 + 8 = 35学生参加了测验，主题2有11+12+6 = 29学生，主题3有42个学生，依此类推。

We want to make interactive Bar and Pie charts. For example, a mouse hover on one of the bars will change the pie chart accordingly and vice-versa.

我们要制作交互式条形图和饼图。 例如，将鼠标悬停在这些条之一上会相应地更改饼图，反之亦然。

With Interactive combination of bar chart and pie chart, where bar chart shows number of students who have interacted with particular topic(taken the quiz) and pie chart showing classification of that students performance in categories of “low, mid, high”, we can visualize our data and get more data analysis from it.

通过条形图和饼图的交互式组合，其中条形图显示了与特定主题互动的学生人数(参加测验)，而饼形图显示了学生表现的分类，分为“低，中，高”类别，可视化我们的数据并从中获得更多数据分析。

提示和资源： (Hints and Resources:)

分步说明： (Step by Step instructions:)

D3 Introduction: where you can learn about Selections , Dynamic properties and Transitions in D3.js.

D3简介：在这里您可以了解D3.js中的Selections，Dynamic属性和Transitions。

In the main javascript function, write a function to handle Histogram (Bar chart) - Histogram will show the total number of students who has taken the quiz (interacted with that topic) for 15 topics.

在主要的javascript函数中，编写一个处理直方图(条形图)的函数-直方图将显示参加15个主题的测验(与该主题互动)的学生总数。

• (Here”s the Tutorial where you can learn how to make a bar chart using the D3 JavaScript library. The first tutorial teaches how to make a bare-bones version in HTML, then a more complete chart in Scalable Vector Graphics (SVG), and lastly animated transitions between views.)

  (在此教程中 ，您可以学习如何使用D3 JavaScript库制作条形图。第一个教程介绍了如何在HTML中制作准系统版本，然后在可缩放矢量图形(SVG)中制作更完整的图表，最后是视图之间的动画过渡。)

• Create SVG for histogram

  为直方图创建SVG

• Create function for x-axis mapping and add x-axis to histogram SVG
  创建用于x轴映射的函数并将x轴添加到直方图SVG
• Create function for y-axis mapping and Create bars for histogram to contain rectangles and topic labels.
  创建用于y轴映射的函数，并创建用于直方图的条以包含矩形和主题标签。
• Create the rectangles and topic labels
  创建矩形和主题标签
• Create function to update the bars. This will be used by pie-chart
  创建功能以更新酒吧。 饼图将使用它

Write a function to handle pieChart. – pie chart will have three slices – Low , Mid and High to represent scores.

编写一个处理pieChart的函数。 –饼图将分为三个部分–低，中和高代表分数。

• Tutorial where you can learn how to make a pie chart, then transitions between views and how to create a legend.

  该教程可让您学习如何制作饼图，然后在视图之间过渡以及如何创建图例。

• Create svg for pie chart.
  为饼图创建svg。
• Create function to draw the arcs of the pie slices - pie slices will be Low , Mid and high
  创建函数以绘制饼图的弧线-饼图将为Low，Mid和High
• Create a function to compute the pie slice angles.
  创建一个函数来计算扇形切片角度。
• Draw the pie slices.
  画馅饼切片。
• Create function to update pie-chart. This will be used by histogram.
  创建功能以更新饼图。 直方图将使用它。
• Calculate total frequency by segment for all topic.
  按分段计算所有主题的总频率。
• Calculate total frequency by state for all segment.
  按状态计算所有网段的总频率。

数据分析的结果以及我们可以从可视化中推断出什么： (Result of Data Analysis and what can we infer from Visualization:)

• Initial pie chart shows aggregate classification of all student score on all topic combined into three categories “low, mid ,high”
  初始饼图显示所有主题的所有学生分数的汇总分类，分为“低，中，高”三类
• Initial bar chart showing number of students who have interacted on that particular topic
  初始条形图，显示在该特定主题上进行互动的学生人数
• Any Selected category from pie chart will update bar chart, showing number of students who have interacted on various topics having score belonging to that particular category .
  饼图中的任何“选定类别”都将更新条形图，显示与属于该特定类别的分数的各种主题进行过互动的学生人数。
• Screenshots below shows the mouse hover on “Mid” slice and “High” slice of the pie chart respectively and for that particular slice , topic-wise bar charts and number of students.
  下面的屏幕截图显示了鼠标分别悬停在饼图的“中”部分和“高”部分上以及针对该特定部分，主题条形图和学生人数的鼠标悬停。

• Any selected bar chart”s bar will update pie chart showing classification of all students score on that particular topic into three categories Low , Mid and High. Screenshot below shows the mouse hover on Topic 2 and for that particular topic , how many student are in categories Low , Mid and High
  任何选定的条形图的条形图都将更新饼图，显示该特定主题上所有学生得分的分类，分为低，中和高三类。 以下屏幕截图显示了将鼠标悬停在主题2上，对于该特定主题，低，中和高类别中有多少学生

翻译自: https://www.freecodecamp.org/news/learn-basic-data-visualization-with-d3-js/

d3.js 数据可视化负数