- Expert Data Visualization
- Jos Dirksen
- 244字
- 2021-07-09 18:22:45
Creating the donut
The complete source file for this sample is a bit long, so we won't show it completely. You can, of course, look at the complete annotated sources here: <DVD3>/src/chapter-02/D02-01.html. In the following sections, we'll explore the steps you need to take to create this visualization:
- First, we need to load our sanitized data so that we can use it to create the donut.
- Next, we're going to add the dropdown you can see at the top. With this dropdown, we can select which group we want to show in the donut.
- Before we look at the D3 code needed to create the donut, we set up some helper objects for handling colors and determining the arc segments dimensions.
- When you open the page for the first time, we see an empty gray donut. This one we'll add next.
- Then we add the inpidual donut segments-based on the selected group from the dropdown and make sure that they are animated when a new group is selected.
- Besides the arc segments, we also have labels that describe what a specific segment means. We add and animate these separately.
- We also add and animate the lines pointing from the center of a donut segment to the text label.
- Use mouse events to show a percentage and pop out a donut segment.
Lots of steps to take, but as you'll see, most will follow the same principles we've already learned about in the previous chapter.
推薦閱讀
- 深度實踐OpenStack:基于Python的OpenStack組件開發(fā)
- C語言程序設(shè)計案例教程(第2版)
- Visual C++串口通信技術(shù)詳解(第2版)
- Linux環(huán)境編程:從應(yīng)用到內(nèi)核
- Python深度學習:基于TensorFlow
- 單片機C語言程序設(shè)計實訓100例
- 機器學習與R語言實戰(zhàn)
- Python機器學習:預(yù)測分析核心算法
- Swift語言實戰(zhàn)晉級
- Arduino電子設(shè)計實戰(zhàn)指南:零基礎(chǔ)篇
- 奔跑吧 Linux內(nèi)核
- Visual C++程序設(shè)計與項目實踐
- Java RESTful Web Service實戰(zhàn)
- C#網(wǎng)絡(luò)編程高級篇之網(wǎng)頁游戲輔助程序設(shè)計
- C語言開發(fā)寶典