D3.js互动数据可视化技巧与秘诀v4

需积分: 10 118 浏览量更新于2024-07-18 收藏 4.96MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"D3 Tips and Tricks Version 4是Malcolm Maclean编写的一本关于使用D3.js进行交互式数据可视化的书籍，适用于前端JavaScript开发者。本书介绍了如何在Web浏览器中创建动态的数据图表，并且强调了与读者的互动反馈和多次迭代以优化内容。" 在这本D3.js的指南中，作者Malcolm Maclean分享了他在数据可视化领域的专业知识，特别是针对D3.js版本4的技巧和最佳实践。D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于创建可交互的数据驱动文档，广泛应用于网页上的数据可视化。在“什么是d3.js？”这一部分，书中会介绍D3.js的核心概念，包括它如何通过绑定数据到DOM（文档对象模型）并应用数据驱动的转换来使数据活起来。D3.js允许开发者直接操作SVG、HTML和CSS，提供极高的灵活性来设计复杂的视觉效果。书中的“我们开始需要什么？”章节，将引导读者了解开始使用D3.js之前需要的基础知识，如HTML作为数据可视化的容器，以及JavaScript作为实现D3.js功能的语言基础。这部分还会讲解如何设置开发环境，以及理解数据绑定和选择集等D3.js的基本概念。此外，书中可能会涵盖以下关键主题： 1. 数据加载与处理：如何从各种数据源（如CSV、JSON）加载数据，并进行预处理，使其适合于可视化。 2. 基本图表制作：线图、柱状图、饼图等常见图表的创建方法。 3. 动态更新：如何在数据变化时实时更新图表，以反映数据的最新状态。 4. 交互性：添加鼠标悬停、点击事件和其他用户交互功能，增强用户体验。 5. 标准图例、轴和指南线：如何优雅地添加这些元素以提高图表的可读性。 6. 可视化设计原则：遵循良好的设计原则，如颜色选择、比例和布局，以有效地传达信息。 7. D3.js模块系统：了解如何利用D3.js的模块化结构，只引入项目所需的部分，降低代码体积。 8. 性能优化：处理大数据集时的性能考虑，以及避免性能瓶颈的策略。 9. 兼容性和响应式设计：确保图表在不同设备和屏幕尺寸上都能正常工作。通过这本书，读者不仅能学习到D3.js的技术细节，还能理解数据可视化的更深层次原理，从而创作出具有吸引力且信息丰富的数据故事。对于想要提升前端开发技能，尤其是专注于数据可视化的开发者来说，这本书是一个宝贵的资源。同时，书中提及的社区支持和反馈机制也强调了开源精神和持续改进的重要性。

资源详情

资源推荐

What do we need to get started? 7

from O’Reilly) and that helped with context, but the examples that are available for D3 graphics

are understandable, and with a bit of trial and error, you can figure out what’s going on.

In fact, most of what this collection of information’s about is providing examples and explana-

tions for the JavaScript components of D3.

Cascading Style Sheets (CSS)

Cascading Style Sheets

(everyone tends to call them ‘Style Sheets’ or ‘CSS’) is a language used

to describe the formatting (or “look and feel”) of a document written in a markup language.

The job of CSS is to make the presentation of the components you will draw with D3 simpler

by assigning specific styles to specific objects. One of the cool things about CSS is that it is

an enormously flexible and efficient method for making everything on the screen look more

consistent and when you want to change the format of something you can just change the CSS

component and the whole look and feel of your graphics will change.

The wonderful World of Cascading Style Sheets

Full disclosure

I know CSS is an incredibly powerful tool that would make my life easier, but I use it

in a very basic (and probably painful) way. Don’t judge me, just accept that the way

I’ve learnt was what I needed to get the job done (this probably means that noobs like

myself will find it easier, but where possible try and use examples that include what

look like logical CSS structures).

http://en.wikipedia.org/wiki/Css

What do we need to get started? 8

Web Servers

Web servers can go one of two ways. If you have access to a web server and know where to put

the files so that you can access them with your browser, you’re in a good place. If you’re not

quite sure, read on…

A web server will allow you to access your HTML files and will provide the structure that allows

it to be displayed on a web browser. There are some simple instructions on the main D3 wiki

page

for setting up a local server. Or you might have access to a remote one and be able to

upload your files. However, for a little more functionality and a whole lot of ease of use, I can

thoroughly recommend WampServer (WAMP) as a free and simple way to set up a local web

server that includes PHP and a MySQL database (more on those later). Go to the WampServer

web page

(http://www.wampserver.com/en/) and see if it suits you.

Throughout this document I will be describing the files and how they’re laid out in a way that

has suited my efforts while using WAMP, but they will work equally well on a remote server. I

will explain a little more about how I arrange the files later in the ‘Getting D3’ section.

WAMP = Windows + Apache + MySQL + PHP

There are other options of course. You could host code on GitHub

and present the resulting

graphics on bl.ocks.org

. This is a great way to make sure that your code is available for peer

review and sharing with the wider community.

One such alternative option that I have recently started playing with is Plunker (http://plnkr.co/)

This is a lightweight collaborative online editing tool. It’s so cool I wrote a special section for

it which you can find later in this document. This is definitely worth trying if you want to use

something simple without a great deal of overhead. If you like what you see, perhaps consider

an alternative that provides a greater degree of capability if you go on to greater d3.js things.

https://github.com/mbostock/d3/wiki

http://www.wampserver.com/en/

https://github.com/about

http://bl.ocks.org/

What do we need to get started? 9

PHP

PHP is a scripting language for the web. That is to say that it is a programming language which

is executed when you load web pages and it helps web pages do dynamic things.

You might think that this sounds familiar and that JavaScript does the same thing. But not quite.

JavaScript is designed so that it travels with the web page when it is downloaded by a browser

(the client). However, PHP is executed remotely on the server that supplies the web page. This

might sound a bit redundant, but it’s a big deal. This means that the PHP which is executed

doesn’t form part of the web page, but it can form the web page. The implication here is that the

web page you are viewing can be altered by the PHP code that runs on a remote server. This is

the dynamic aspect of it.

In practice, PHP could be analogous to the glue that binds web pages together. Allowing different

portions of the web page to respond to directions from the end user.

It is widely recognised not only as a relatively simple language to learn, but also as a fairly

powerful one. At the same time it comes into criticism for being somewhat fragmented and

sometimes contradictory or confusing. But in spite of any perceived shortcomings, it is a very

widely used and implemented language and one for which there is no obvious better option.

Other Useful Stuff

Text Editor

A good text editor for writing up your code will be a real boost. Don’t make the fatal mistake of

using an office word processor or similar. THEY WILL DOOM YOU TO A LIFE OF MISERY.

They add in crazy stuff that you can’t even see and never save the files in a way that can be used

properly.

Preferably, you should get an editor that will provide some assistance in the form of syntax

highlighting which is where the editor knows what language you are writing in (JavaScript for

example) and highlights the text in a way that helps you read it. For example, it will change text

that might appear as this;

// Get the data

d3.tsv("data/data.tsv", function(error, data) {

data.forEach(function(d) {

d.date = parseDate(d.date

d.close = +d.close;

});

Into something like this;

剩余366页未读，继续阅读

a009001

粉丝: 0
资源: 4

D3.js互动数据可视化技巧与秘诀v4

D3技巧和窍门v3.x：Web浏览器中的交互式数据可视化D3 Tips and Tricks v3.x: Interactive Data Visualization in a Web Browser

最新英文java mysql vue文献

android studio学习文档

Bag of Tricks and A Strong Baseline for Deep Person Re-identification

给我写一个200字的英语作文

推荐几篇Obsidian教程

yolov5的Tricks

numpy stride_tricks怎么用

import json_tricks as json 解释

请帮我写一份解析网站内容的脚本

深度学习tricks是什么

obsidian教程索引

plt.tricks

深度学习tricks

船只目标检测tricks

yolov5的tricks

transformer-xl小tricks

AttributeError: module 'numpy.lib.stride_tricks' has no attribute 'sliding_window_view'

np.lib.stride_tricks.as_strided

超长窄型目标检测的tricks

最新资源