关键词：
说明
【跟月影学可视化】学习笔记。
分清信息主次，建立视觉层次
用醒目的颜色突出显示数据，把被淡化的其他视觉元素当作背景。
比如：平均温度与露点的散点例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>平均温度与露点的散点</title>
</head>
<body>
<div id="app" style="width: 1200px; height: 600px"></div>
<script src="https://d3js.org/d3.v6.js"></script>
<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
<script src="https://unpkg.com/@qcharts/core/dist/index.js"></script>
<script>
(async function ()
// 通过 fetch 读取 csv 的数据
const rawData = await (
await fetch("./data/beijing_2014.csv")
).text();
console.log(rawData);
// 使用 d3 的 csvParse 方法，将数据解析成 JSON 数组
const data = d3.csvParse(rawData);
const dataset = data.map(d =>
return
temperature: Number(d['Temperature(Celsius)(avg)']),
tdp: Number(d['Dew Point(Celsius)(avg)']),
category: '平均气温与露点'
);
const Chart, Scatter, Legend, Tooltip, Axis = qcharts;
// 创建图表（Chart）并传入数据
const chart = new Chart(
container: "#app",
);
let clientRect = bottom: 50 ;
chart.source(dataset,
row: "category",
value: "temperature",
text: "tdp",
);
// 创建横、纵两个坐标轴（Axis）、提示（ToolTip）和一个图例（Legend）
const scatter = new Scatter(
clientRect,
showGuideLine: true,
);
const toolTip = new Tooltip(
title: (data) => data.category,
formatter: (data) =>
return `温度：$data.valueC 露点：$data.tdp% `
);
const legend = new Legend();
const axisLeft = new Axis( orient: "left", clientRect )
.style("axis", false)
.style("scale", false);
const axisBottom = new Axis();
// 将图形、坐标轴、提示和图例都添加到图表上
chart.append([scatter, axisBottom, axisLeft, toolTip, legend]);
)();
</script>
</body>
</html>
下面就是一个有鲜明视觉层次感的图表：
- 使用比较鲜明的蓝色来突出图形
- 用比较淡的灰黑色来显示左侧和下方的坐标轴
- 用存在感最弱的辅助线背景来辅助用户更认真地阅读图表、理解数值
再此基础上可以添加曲线图来引导用户关注到平均气温与露点的正相关性特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>平均温度与露点的散点添加曲线</title>
</head>
<body>
<div id="app" style="width: 1200px; height: 600px"></div>
<script src="https://d3js.org/d3.v6.js"></script>
<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
<script src="https://unpkg.com/@qcharts/core/dist/index.js"></script>
<script>
(async function ()
// 通过 fetch 读取 csv 的数据
const rawData = await (
await fetch("./data/beijing_2014.csv")
).text();
console.log(rawData);
// 使用 d3 的 csvParse 方法，将数据解析成 JSON 数组
const data = d3.csvParse(rawData);
const dataset = data.map((d) =>
return
temperature: Number(d["Temperature(Celsius)(avg)"]),
tdp: Number(d["Dew Point(Celsius)(avg)"]),
category: "平均气温与露点",
;
).sort((a, b) => a.tdp - b.tdp);
// 露点排序
let dataset2 = [...dataset]
// 对相同露点的温度进行分组
dataset2 = dataset2.reduce((a, b) =>
let curr = a[a.length - 1];
if (curr && curr.tdp === b.tdp)
curr.temperature.push(b.temperature);
else
a.push(
temperature: [b.temperature],
tdp: b.tdp,
);
return a;
, []);
// 最后将露点平均温度计算出来
dataset2 = dataset2.map((d) =>
d.category = "露点平均气温";
d.temperature = Math.round(
d.temperature.reduce((a, b) => a + b) /
d.temperature.length
);
return d;
);
console.log("最后将露点平均温度计算出来--->", dataset2)
const Chart, Scatter, Line, Legend, Tooltip, Axis = qcharts;
// 创建图表（Chart）并传入数据
const chart = new Chart(
container: "#app",
);
let clientRect = bottom: 50 ;
chart.source([...dataset, ...dataset2],
row: "category",
value: "temperature",
text: "tdp",
);
const ds = chart.dataset;
const d1 = ds.selectRows("平均气温与露点");
const d2 = ds.selectRows("露点平均气温");
// 散点图
const scatter = new Scatter(
clientRect,
showGuideLine: true,
).source(d1);
// 曲线图
const line = new Line().source(d2);
line.style("line", function (attrs, data, i)
return smooth: true, lineWidth: 3, strokeColor: "#0a0" ;
);
line.style("point", function (attrs)
return display: "none" ;
);
const toolTip = new Tooltip(
title: (data) => data.category,
formatter: (data) =>
return `温度：$data.valueC 露点：$data.tdp% `;
,
);
const legend = new Legend();
const axisLeft = new Axis( orient: "left", clientRect )
.style("axis", false)
.style("scale", false);
const axisBottom = new Axis();
// 将图形、坐标轴、提示和图例都添加到图表上
chart.append([scatter, line, axisBottom, axisLeft, toolTip, legend]);
)();
</script>
</body>
</html>
效果如下图，可以清晰的看到曲线描绘气温与平均露点的关系，这样层次分明的图表，非常有助于理解图表上的信息
选择合适图表，直观表达信息
之前 32 节里的公园游客散点图，在表达某个单组变量的分布状况的时候，不是很直观，可以使用饼图进行处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>游客饼图</title>
<style>
html, body
width: 100%;
height: 100%;
#container
width: 600px;
height: 600px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
#container > div
width: 300px;
height: 300px;
flex-shrink: 0;
</style>
</head>
<body>
<div id="container">
<div id="square"></div>
<div id="sections"></div>
<div id="garden"></div>
<div id="playground"></div>
</div>
<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
<script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script>
<script>
const Scene, Sprite, Polyline, SpriteSvg = spritejs;
(async function ()
const data = await (await fetch("./data/park-people.json")).json();
console.log(data);
function count(d, dataset)
let place;
if (d.x < 300 && d.y < 300)
place = "square";
else if (d.x >= 300 && d.y < 300)
place = "sections";
else if (d.x >= 300 && d.y >= 300)
place = "garden";
else
place = "playground";
dataset[place] = dataset[place] || [
gender: "男游客",
people: 0,
,
gender: "女游客",
people: 0,
,
];
if (d.gender === "f")
dataset[place][0].people++;
else
dataset[place][1].people++;
return dataset;
function groupData(data)
const dataset = ;
for (let i = 0; i < data.length; i++)
const d = data[i];
if (d.time === 12) 查看详情
设计篇36#如何理解可视化设计原则？(代码片段)
说明【跟月影学可视化】学习笔记。可视化设计的四个基本原则基本原则一：简单清晰原则我们可以看下面一张图：国际茶叶委员会制作的全球茶叶消费排行榜图表，目的是想说明喝茶最多的不是中国人我们可以用更... 查看详情
设计模式(代码片段)
设计模式设计模式概述设计模式（Designpattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性以及代码的结构更加清晰.... 查看详情
程序语言的常见设计错误-片面追求短小(代码片段)
...欢写短小的代码，接着就开始说C语言其实有很多巧妙的设计，可以让代码变得非常短小。然后我才发现，这些人所谓的“短小”跟我所说的“短小”完全不是一回事。我的程序的“短小”是建立在语义明确，概念清晰的基础上... 查看详情
pythonqtgui设计：如何调整组件布局比例？（拓展篇—1）(代码片段)
目录1、QtDesigner调整组件布局比例2、addStretch()函数调整组件布局比例在一个布局容器中，有时可能需要调整各组件的显示比例，让界面达到更美观效果。调整组件布局比例有两种办法：第一种是通过QtDesigner调整，... 查看详情
斯坦福大学数据可视化课程学习笔记：第三节视觉设计(代码片段)
《斯坦福大学数据可视化课程学习笔记》课程资源来自于斯坦福大学数据可视化课程，是我所在团队实习生提升计划的一部分。本系列是“秉姝”同学在学习过程中记录和整理的学习笔记，希望这些笔记也能够帮助更多... 查看详情
vue开发实战实战篇#33：更加精细化的权限设计（权限组件权限指令）(代码片段)
说明【Vue开发实战】学习笔记。效果实现两种方式实现权限组件的控制，比如下面两个地方的按钮控制，如果是user用户，就没有权限控制函数式组件<script>importcheckfrom'../utils/auth';exportdefaultfunctional:true,props:a... 查看详情
tomcat优化篇如何让你的tomcat性能更加优越(代码片段)
Tomcat优化篇一、Tomcat自身配置1.Tomcat管理页面 我们可以打开Tomcat的管理页面，这块需要先配置下，在tomcat-users.xml中添加相关的用户和角色信息<rolerolename="manager"/><rolerolename="manager-gui"/>< 查看详情
goweb开发之url路由设计(代码片段)
...goweb开发框架,反正也没打算私藏,所以现在先拿出url路由设计这块来写一篇博客.做过web开发的都知道,一个好的url路由可以让用户浏览器的地址栏总有规律可循,可以让我们开发的网站更容易让搜索引擎收录,可以让我们开发者更加... 查看详情
如何设计一个漂亮的仪表盘—jeecg仪表盘轻松实现数据可视化专题(代码片段)
仪表盘是数据可视化的一种展现方式，是将数据以各类图表和图形化的方式，以视觉形式来呈现，从而帮助我们更加直观的了解数据展示的意义。下面看看Jeecg低代码平台的仪表盘功能效果。操作简单，通过拖拽... 查看详情
如何让客户明白在平面设计过程中需要提供资料的要求——企业标识篇
...识的各种不同应用。 此文档将规范介绍平面设计部分技术参数，以避免线下推广宣传过程因标识使用不规范，而影响企业视觉传达形象。一、文件格式 文件格式将决定其清晰程度，平面设计过程中，文... 查看详情
java进阶篇设计模式之十四-----总结篇(代码片段)
前言本篇是讲述之前学习设计模式的一个总结篇，其目的是为了对这些设计模式的进行一个提炼总结，能够通过查看看此篇就可以理解一些设计模式的核心思想。设计模式简介什么是设计模式设计模式是一套被反复使用的、多数... 查看详情
设计模式篇之——命令设计模式(代码片段)
命令设计模式很多人看了官方的文档是不够清晰的，甚至看了一遍基本记不住，说简单的谈不上，说难的话就那么一点代码，所以思想很重要，经过自己摸索后的一些理解，本文用最形象深刻的例子... 查看详情
如何搭建组件库（基础实战篇）
一、搭建组件库有什么好处？让设计更高效、开发更迅速、产品体验更一致。很多大厂也做了自己的组件库，比如AntDesign，Element等，一个成熟的组件库确实让产品的体验更好，团队的效率更高。如果你也想开始搭建你们产品自... 查看详情
如何搭建组件库（基础实战篇）
一、搭建组件库有什么好处？让设计更高效、开发更迅速、产品体验更一致。很多大厂也做了自己的组件库，比如AntDesign，Element等，一个成熟的组件库确实让产品的体验更好，团队的效率更高。如果你也想开始搭建你们产品自... 查看详情
毕业设计：文献参考(代码片段)
一、基本信息标题：基于JAVAWeb的教材管理系统的设计与实现来源：咸阳师范学院信息工程学院作者：刘敏娜时间：2016年二、研究背景? 传统的教材管理采用手工操作,存在着诸多弊端,譬如效率低、易出错等。若继续采用手工管... 查看详情
前端的ui设计与交互之字体篇
...，力求在各个操作系统下都有最佳展示效果。字体是界面设计中最重要的基本构成之一，用户通过文本来消化内容和完成工作，优雅的字体将大大提升用户的阅读体验及工作效率。在满足不同终端始终保持良好的阅读体验的同时... 查看详情
跟着盒子的代码设计示例，一起对面向对象的设计模式之solid原则加深理解(代码片段)
...#xff1a;原则、模式与实践 6》中首次提出的。SOLID是让软件设计更易于理解、更加灵活和更易于维护的五个原则的简称。本文结合成序言盒子的一些代码设计来简单明了的加深对SOLID五大代码设计原则的理解。前言最近在CodeReview的... 查看详情