本文共 5417 字,大约阅读时间需要 18 分钟。
d3.js 数据可视化负数
You'll learn the basics of data visualization using D3 through this project.
您将通过该项目学习使用D3进行数据可视化的基础知识。
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数据驱动的转换和过渡来使数据具有交互性。
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个主题,在每个主题上,我们都有大量的学生参加了测验,并在以下三个类别中得分:低,中和高
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.
通过条形图和饼图的交互式组合,其中条形图显示了与特定主题互动的学生人数(参加测验),而饼形图显示了学生表现的分类,分为“低,中,高”类别,可视化我们的数据并从中获得更多数据分析。
where you can learn about Selections , Dynamic properties and Transitions in D3.js.
在这里您可以了解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 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)中制作更完整的图表,最后是视图之间的动画过渡。)
Write a function to handle pieChart. – pie chart will have three slices – Low , Mid and High to represent scores.
编写一个处理pieChart的函数。 –饼图将分为三个部分–低,中和高代表分数。
where you can learn how to make a pie chart, then transitions between views and how to create a legend.
让您学习如何制作饼图,然后在视图之间过渡以及如何创建图例。
翻译自:
d3.js 数据可视化负数
转载地址:http://sxzzd.baihongyu.com/