使用d3.js画一个BoxPlot

Box Plot

在画Box Plot之前，先来了解下Box Plot是什么？

箱线图（Box Plot）也称盒须图、盒式图或箱型图，是一种用于展示数据分布特征的统计图表。

它由以下几个部分组成：

  1. 箱子：表示数据的四分位数范围，箱子的上下边界分别为上四分位数（Q3）和下四分位数（Q1）。
  2. 中间的横线：表示中位数。
  3. 胡须：也称为触须，分别延伸到最小值和最大值。

箱线图的优点包括：

  1. 直观展示数据的分布情况，包括中心位置、离散程度等。
  2. 快速比较多个数据集的特征。
  3. 检测异常值。

它常用于：

  1. 展示一组数据的分布特征。
  2. 比较不同组数据的分布情况。
  3. 识别可能的异常值。

通过箱线图，可以快速了解数据的关键特征，帮助分析和解释数据。

效果图

在这里插入图片描述

代码实现

第一步，先来绘制画布。
  const chart_id = '#box_plot'const margin = ({top: 10, right: 10, bottom: 20, left: 30})const height = 600document.getElementById('box_plot').innerHTML = ''const width = d3.select(chart_id).node().getBoundingClientRect().widthconst boxWidth = 50const rd = dataset.slice().sort((a, b) => d3.ascending(a.name, b.name))const chart = d3.select(chart_id).attr('height', height)
第二步，生成 x 轴 和 y 轴比例尺
  const yScale = d3.scaleLinear().domain(d3.extent(rd, d => d.value)).range([height - margin.bottom, margin.top]).nice()const xScale = d3.scaleBand().domain(boxes().map(d => d.key)).range([margin.left, width - margin.right]).paddingInner(1).paddingOuter(.5)
第三步，生成 box
/* 生成 box 方法 */
const boxes = () => {let arrMap = Array.from(d3.group(dataset, d => d.name), ([key, dat]) => ({key, dat}))arrMap.map(o => {const values = o.dat.map(d => d.value);const min = d3.min(values);const max = d3.max(values);const q1 = d3.quantile(values, .25);const q2 = d3.quantile(values, .5);const q3 = d3.quantile(values, .75);const iqr = q3 - q1;const r0 = Math.max(min, q1 - iqr * 1.5);const r1 = Math.min(max, q3 + iqr * 1.5);o.quartiles = [q1, q2, q3];o.range = [r0, r1];o.outliers = values.filter(v => v < r0 || v > r1);return o;});return (arrMap)
};
第四步，添加 box 组，设置其偏移量
  const groups = chart.selectAll("g").data(boxes()).join("g").attr("transform", d => `translate(${xScale(d.key)}, 0)`).attr('class', 'ind')
第五步，添加垂直方向上的线
  groups.selectAll("vertLine").data(d => [d.range]).join("line").attr("class", "vertLine").attr("stroke", "#7e7e7e").attr('stroke-width', '1px').attr("x1", 0).attr("x2", 0).attr("y1", d => yScale(d[0])).attr("y2", d => yScale(d[1]))
第六步，添加水平方向上的线

水平方向上的三条线分别是 q1(第一四分位)，median（中位数），q3（第三四分位），有的需求的第二条线不一定是中位数，也有可能是平均数（mean）。

  groups.selectAll('horizontalLine').data((d) => [d.range[0], d.quartiles[1], d.range[1]]).join('line').attr('class', 'horizontalLine').attr('stroke', '#7e7e7e').attr('stroke-width', '1px').style('width', boxWidth).attr('x1', -boxWidth / 2).attr('x2', boxWidth / 2).attr('y1', (d) => yScale(d)).attr('y2', (d) => yScale(d))
第七步，添加数据点
 groups.selectAll("points").data(d => d.dat).join("circle").attr("cx", () => 0 - 30 / 2 + Math.random() * 30).attr("cy", d => yScale(d.value)).attr("r", 2).style("fill", "#1867c0").attr("fill-opacity", 1)
第八步，添加盒子
  groups.selectAll("box").data(d => [d]).join("rect").attr("class", "box").attr("x", -boxWidth / 2).attr("y", d => yScale(d.quartiles[2])).attr("height", d => yScale(d.quartiles[0]) - yScale(d.quartiles[2])).attr("width", boxWidth).attr("stroke", "#545454").style("fill", "#1890ff").style("fill-opacity", 0.3)
第九步，添加 X 轴 和 Y 轴
/* Y 轴 */
chart.append("g").style("font", "12px").style('stroke-width', '1px').call(d3.axisLeft(yScale).tickSizeOuter(0)).attr('transform', `translate(${margin.left},0)`).call(g => g.selectAll('.tick line').clone().attr('x2', width - margin.left - margin.right).attr('stroke-opacity', 0.2))/* X 轴 */
chart.append('g').style('font', '12px').style('stroke-width', '1px').attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(xScale))

整体代码

<template><div style="width: 100%"><svg id="box_plot" style="width: 100%"/></div>
</template><script setup>
import {onMounted} from "vue";
import * as d3 from "d3";
import dataset from "@/mock/dataset_boxplot"onMounted(() => {drawBoxPlot()
})function drawBoxPlot() {const chart_id = '#box_plot'const margin = ({top: 10, right: 10, bottom: 20, left: 30})const height = 600document.getElementById('box_plot').innerHTML = ''const width = d3.select(chart_id).node().getBoundingClientRect().widthconst boxWidth = 50const rd = dataset.slice().sort((a, b) => d3.ascending(a.name, b.name))const yScale = d3.scaleLinear().domain(d3.extent(rd, d => d.value)).range([height - margin.bottom, margin.top]).nice()const xScale = d3.scaleBand().domain(boxes().map(d => d.key)).range([margin.left, width - margin.right]).paddingInner(1).paddingOuter(.5)const chart = d3.select(chart_id).attr('height', height)const groups = chart.selectAll("g").data(boxes()).join("g").attr("transform", d => `translate(${xScale(d.key)}, 0)`).attr('class', 'ind')groups.selectAll("vertLine").data(d => [d.range]).join("line").attr("class", "vertLine").attr("stroke", "#7e7e7e").attr('stroke-width', '1px').attr("x1", 0).attr("x2", 0).attr("y1", d => yScale(d[0])).attr("y2", d => yScale(d[1]))groups.selectAll('horizontalLine').data((d) => [d.range[0], d.quartiles[1], d.range[1]]).join('line').attr('class', 'horizontalLine').attr('stroke', '#7e7e7e').attr('stroke-width', '1px').style('width', boxWidth).attr('x1', -boxWidth / 2).attr('x2', boxWidth / 2).attr('y1', (d) => yScale(d)).attr('y2', (d) => yScale(d))groups.selectAll("points").data(d => d.dat).join("circle").attr("cx", () => 0 - 30 / 2 + Math.random() * 30).attr("cy", d => yScale(d.value)).attr("r", 2).style("fill", "#1867c0").attr("fill-opacity", 1)// 添加盒子groups.selectAll("box").data(d => [d]).join("rect").attr("class", "box").attr("x", -boxWidth / 2).attr("y", d => yScale(d.quartiles[2])).attr("height", d => yScale(d.quartiles[0]) - yScale(d.quartiles[2])).attr("width", boxWidth).attr("stroke", "#545454").style("fill", "#1890ff").style("fill-opacity", 0.3)/* Y 轴 */chart.append("g").style("font", "12px").style('stroke-width', '1px').call(d3.axisLeft(yScale).tickSizeOuter(0)).attr('transform', `translate(${margin.left},0)`).call(g => g.selectAll('.tick line').clone().attr('x2', width - margin.left - margin.right).attr('stroke-opacity', 0.2))/* X 轴 */chart.append('g').style('font', '12px').style('stroke-width', '1px').attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(xScale))const tooltip = d3.select(chart_id).append('div')/* 设置鼠标进入显示提交框 */chart.selectAll('.ind').on("mousemove", function (event) {tooltip.attr('class', 'tooltip').style('opacity', 1).style('transform', `translate(${event.clientX - 50}px,${event.clientY - 50}px)`).text('test: tooltip')})groups.on("mouseleave", function () {tooltip.style('opacity', 0)})return chart.node()
}/* 生成 box 方法 */
const boxes = () => {let arrMap = Array.from(d3.group(dataset, d => d.name), ([key, dat]) => ({key, dat}))arrMap.map(o => {const values = o.dat.map(d => d.value);const min = d3.min(values);const max = d3.max(values);const q1 = d3.quantile(values, .25);const q2 = d3.quantile(values, .5);const q3 = d3.quantile(values, .75);const iqr = q3 - q1;const r0 = Math.max(min, q1 - iqr * 1.5);const r1 = Math.min(max, q3 + iqr * 1.5);o.quartiles = [q1, q2, q3];o.range = [r0, r1];o.outliers = values.filter(v => v < r0 || v > r1);return o;});return (arrMap)
};</script>

源码地址

源码和 mock 数据都在git仓库上，想要的小伙伴可以自己去git上拉一下。

gitee：https://gitee.com/li-jiayin167/data-visualization.git

github：https://github.com/Jane167/Data-visualization.git

如果觉得不错的话，点个 star

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/2305.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ruoyi element-ui 实现拖拉调整图片顺序

ruoyi element-ui 实现拖拉调整图片顺序

ruoyi element-ui 实现拖拉调整图片顺序 安装sortablejs https://sortablejs.com/npm 安装sortablejs npm install sortablejs --save相关options var sortable new Sortable(el, {group: "name", // or { name: "...", pull: [true, false, clone, …
阅读更多...
甘特图：如何制定一个有效的产品运营规划？

甘特图：如何制定一个有效的产品运营规划？

做好一个产品的运营规划是一个复杂且系统的过程&#xff0c;涉及多个方面和阶段。以下是一些关键步骤和考虑因素&#xff0c;帮助你制定一个有效的产品运营规划&#xff1a; 1、明确产品定位和目标用户&#xff1a; 确定产品的核心功能、特点和优势&#xff0c;明确产品在市…
阅读更多...
python自动生成SQL语句自动化

python自动生成SQL语句自动化

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python自动生成SQL语句自动化 在数据处理和管理中&#xff0c;SQL&#xff08;Structured …
阅读更多...
跟我学C++高级篇——获取类型名称的番外小插曲

跟我学C++高级篇——获取类型名称的番外小插曲

一、获取类型名称 在前面的反射中&#xff0c;可以通过一些技术手段来实现获取类型的名称。这么一个看似简单的功能&#xff0c;其实实现起来并没有想象的那么简单。在一些框架中&#xff0c;包含了类似的功能&#xff0c;而主流的编译器则支持的各有不同。这不是说这种接口有…
阅读更多...
【华为OD机试】处理器问题

【华为OD机试】处理器问题

目录 题目描述 输入描述 输出描述 用例 考察算法&#xff1a;深度优先搜索 题目解析 步骤1&#xff1a;确定每个链路上可用的处理器数量 步骤2&#xff1a;确定最佳的芯片组合策略 步骤3&#xff1a;选择合适的芯片组合 算法实现 实现一 实现二 实现三 题目描述 …
阅读更多...
统一SQL 支持Oracle CHAR和VARCHAR2 (size BYTE|CHAR)转换

统一SQL 支持Oracle CHAR和VARCHAR2 (size BYTE|CHAR)转换

统一SQL介绍 https://www.light-pg.com/docs/LTSQL/current/index.html 源和目标 源数据库&#xff1a;Oracle 目标数据库&#xff1a;Postgresql&#xff0c;TDSQL-MySQL&#xff0c;达梦8&#xff0c;LightDB-Oracle 操作目标 在Oracle中的CHAR和VARCHAR2数据类型&…
阅读更多...
揭开ChatGPT面纱（1）：准备工作（搭建开发环境运行OpenAI Demo）

揭开ChatGPT面纱（1）：准备工作（搭建开发环境运行OpenAI Demo）

文章目录 序言&#xff1a;探索人工智能的新篇章一、搭建开发环境二、编写并运行demo1.代码2.解析3.执行结果 本博客的gitlab仓库&#xff1a;地址&#xff0c;本博客对应01文件夹。 序言&#xff1a;探索人工智能的新篇章 随着人工智能技术的飞速发展&#xff0c;ChatGPT作为…
阅读更多...
nginx服务访问页面白色

nginx服务访问页面白色

问题描述 访问一个域名服务返回页面空白&#xff0c;非响应404。报错如下图。 排查问题 域名解析正常&#xff0c;网络通讯正常&#xff0c;绕过解析地址访问源站IP地址端口访问正常&#xff0c;nginx无异常报错。 在打开文件时&#xff0c;发现无法打开配置文件&#xff0c…
阅读更多...
982: 输出利用二叉树存储的普通树的度

982: 输出利用二叉树存储的普通树的度

解法&#xff1a; 由题意&#xff0c;根据二叉树求对应的合法普通树的度&#xff0c;度就是节点儿子数的最大值。 也就是左孩子&#xff0b;兄弟 在二叉树中就是某根节点的右孩子某根节点的右孩子的右孩子。。。 例AB#CD##E### 关于树概念不理解的可以看看981: 统计利用二叉…
阅读更多...
解决常见的 `npm install` 报错

解决常见的 `npm install` 报错

解决常见的 npm install 报错 在 Node.js 项目中&#xff0c;我们经常使用 npm install 命令来安装项目所需的依赖包。然而&#xff0c;有时候在执行这个命令时会遇到一些问题和报错。本文将介绍一些常见的 npm install 报错&#xff0c;并提供相应的解决方法。 报错 1: “ER…
阅读更多...
【WPF】取色器-Color Extractor

【WPF】取色器-Color Extractor

【WPF】取色器 序实现HookScreen Colorlayout.CS预览下载序 取色器是一个非常实用的小工具，网上也很多可供下载使用。为什么已有却还是想要自己去实现一个呢？一方面是因为工具虽小但毕竟涉及到操作系统 API 的使用。另一方面想要在技术上精进一些。 实现 实现思路测试通过 Ho…
阅读更多...
PostgreSQL 17新特性之MERGE语句增强

PostgreSQL 17新特性之MERGE语句增强

PostgreSQL 15 提供了 MERGE 语句&#xff0c;它可以基于源表或者查询结果更新目标表中的数据。MERGE 可以在单个语句中实现 INSERT、UPDATE 以及 DELETE 操作。 PostgreSQL 17 进一步增强了该语句的功能&#xff0c;包括&#xff1a; 支持 RETURNING 子句&#xff0c;可以返…
阅读更多...
牛客NC179 长度为 K 的重复字符子串【simple 哈希，滑动窗口 C++、Java、Go、PHP】

牛客NC179 长度为 K 的重复字符子串【simple 哈希，滑动窗口 C++、Java、Go、PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/eced9a8a4b6c42b79c95ae5625e1d5fd 思路 哈希统计每个字符出现的次数。没在窗口内的字符要删除参考答案C class Solution {public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c…
阅读更多...
java Date 月份加1

java Date 月份加1

介绍 使用Date对象&#xff0c;执行月份加1操作 代码示例 import java.util.Calendar; import java.util.Date;public class Main {public static void main(String[] args) {// 获取当前日期的Calendar实例Calendar calendar Calendar.getInstance();// 设置为需要加一的日…
阅读更多...
expdp备份报错ORA-01658

expdp备份报错ORA-01658

有个测试环境&#xff0c;没开归档&#xff0c;每天做一个expdp全备份&#xff0c;周末现场反馈备份失败&#xff0c;发出来的报错如下 orcl:/backup/orcldb> tail -f /tmp/orcl.log Export: Release 12.2.0.1.0 - Production on Mon Apr 21 10:58:28 2024 Copyright …
阅读更多...
记录Python链接mysql的数据库的2种操作方式

记录Python链接mysql的数据库的2种操作方式

一、使用pymysql库方式 import pymysqldb pymysql.connect(hostlocalhost,userroot,password123456) #创建链接&#xff0c;在3.8以后好像已经不支持这个种链接方式了&#xff0c; #db pymysql.connect(localhost,root,123456) cursor db.cursor()#拿到游标这样我们就拿到了…
阅读更多...
在微信小程序部署AI模型的几种方法

在微信小程序部署AI模型的几种方法

前言 本文只是分享思路&#xff0c;不提供可完整运行的项目代码 onnx部署 以目标检测类模型为例&#xff0c;该类模型会输出类别信息&#xff0c;置信度&#xff0c;包含检测框的4个坐标信息 但不是所有的onnx模型都能在微信小程序部署&#xff0c;有些算子不支持&#xff…
阅读更多...
一维递归：递去

一维递归：递去

示例&#xff1a; /*** brief how about recursive-forward-1? show you here.* author wenxuanpei* email 15873152445163.com(query for any question here)*/ #define _CRT_SECURE_NO_WARNINGS//support c-library in Microsoft-Visual-Studio #include <stdio.h>…
阅读更多...
ctfshow 每周大挑战RCE极限挑战

ctfshow 每周大挑战RCE极限挑战

讨厌SQl看到这个了想来玩玩 rce1 <?phperror_reporting(0); highlight_file(__FILE__);$code $_POST[code];$code str_replace("(","括号",$code);$code str_replace(".","点",$code);eval($code);?>括号过滤点过滤&…
阅读更多...
c++补充

c++补充

构造函数、析构函数 #include <iostream> using namespace std;// 构造函数、析构函数 // --- "构造函数"类比生活中的"出厂设置" --- // --- "析构函数"类比生活中的"销毁设置" --- // 如果我们不写这两种函数&#xff0c;编译…
阅读更多...
最新文章

Copyright @ 2022~2023