07-Making a Bar Chart with D3.js and SVG

课程链接

Curran的课程,通过 D3.js 的 scaleLinear, max, scaleBand, axisLeft, axisBottom,根据 .csv 文件生成一个横向柱状图。

【注】如果想造csv数据,可以使用通义千问,关于LinearScale与BandScale不懂的地方也可以在通义千问里提问

https://tongyi.aliyun.com/qianwen/
 


Linear Scale (线性比例尺)

定义: 线性比例尺是一种将输入域(通常是数值范围)线性地映射到输出范围的比例尺。它非常适合处理连续的数值数据。(大体就是处理数据)

Band Scale (带状比例尺)

定义: 带状比例尺是一种将输入域(通常是离散的类别值)映射到输出范围的比例尺。它主要用于处理分类数据,常用于条形图的 x 轴或 y 轴。(大体就是处理文字、名称)

【data.csv】

country,population
China,1415046
India,1354052
United States,326767
Indonaesia,266795
Brazil,210868
Pakistan,200814
Nigeria,195875
Bangladesh,166368
Russia,143965
Mexico,130759

 

【pokemon.csv】 

Rank,Pokemon,Type,Base_Attack
1,Kommo-o,Dragon/Fighting,165
2,Kyurem-Black,Dragon/Ice,170
3,Groudon,Ground,180
4,Kyogre,Water,150
5,Deoxys-Attack Forme,Psychic,180
6,Mega Rayquaza,Dragon/Flying,180
7,Xerneas,Fairy,130
8,Yveltal,Dark/Flying,130
9,Mewtwo-Mega X,Psychic/Fighting,190
10,Zekrom,Dragon/Electric,170

【style.css】

body {margin: 0;overflow: hidden;
}rect {fill: steelblue
}text {font-size: 1.4em;
}

 

【index.html】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="./style.css"><script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/d3/5.6.0/d3.min.js"type="application/javascript"></script>
</head><body><svg width="960" height="500"></svg><script>const select = d3.selectconst csv = d3.csvconst scaleLinear = d3.scaleLinearconst max = d3.maxconst scaleBand = d3.scaleBandconst axisLeft = d3.axisLeftconst axisBottom = d3.axisBottomconst svg = select('svg')const width = +svg.attr('width')const height = +svg.attr('height')const render = data => {// const xValue = d => d.population;// const yValue = d => d.country;const xValue = d => d.Base_Attack;const yValue = d => d.Pokemon;const margin = {top: 20,right: 40,bottom: 20,left: 160}const innerWidth = width - margin.left - margin.rightconst innerHeight = height - margin.top - margin.bottomconst xScale = scaleLinear().domain([0, max(data, xValue)]).range([0, innerWidth])const yScale = scaleBand().domain(data.map(yValue)).range([0, innerHeight]).padding(0.1)// const yAxis = axisLeft(yScale)const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)// yAxis(g.append('g')) // 添加Y轴// 添加Y轴g.append('g').call(axisLeft(yScale)) // 添加X轴g.append('g').call(axisBottom(xScale)) .attr('transform',`translate(0,${innerHeight})`)g.selectAll('rect').data(data).enter().append('rect').attr('y', d => yScale(yValue(d))).attr('width', d => xScale(xValue(d))).attr('height', yScale.bandwidth())}csv('./data.csv').then(data => {data.forEach(d => {d.population = + d.population * 1000;});// console.log(data);render(data)})</script>
</body></html>

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

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

相关文章

Fakelocation Server服务器/专业版 ubuntu

前言:需要Ubuntu系统 Fakelocation开源文件系统需求 Ubuntu | Fakelocation | 任务一 任务一 更新Ubuntu&#xff08;安装下载不再赘述&#xff09; sudo -i # 提权 sudo apt update # 更新软件包列表 sudo apt upgrade # 升级已安装的软…

ansible playbook安装nacos

目录 1.创建nacos应用相关的用户 2.创建rocketmq所需目录任务 3.安装JDK1.8、python以及虚拟环境安装PyMysql(用于执行数据库脚本) 4. 解压nacos 5.创建nacos数据库 6.上传sql文件 7.创建数据库表 8.启动nacos 9.nacos集群主机ip配置 10.变量配置 11.配置nacos.yml 更…

从搭建uni-app+vue3工程开始

技术栈 uni-app、vue3、typescript、vite、sass、uview-plus、pinia 一、项目搭建 1、创建以 typescript 开发的工程 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project2、安装sass npm install -D sass// 安装sass-loader&#xff0c;注意需要版本10&#xff0c;…

SMMU软件指南操作之流(stream)安全性和流标识

安全之安全(security)博客目录导读 目录 1、流安全性 2、流标识 2.1 什么是 StreamID? 2.2 SubstreamID 的作用 1、流安全性 SMMUv3 架构在没有实现 RME 设备分配的情况下,支持两种可选的安全状态,这由 SMMU_S_IDR1.SECURE_IMPL 报告。如果实现了 RME 设备分配,则通过…

Android仿前端分页组件pagination

仿前端pagination Android仿前端分页组件pagination 最近Android原生有个需求就是做个分页组件&#xff0c;不用上拉加载&#xff0c;因为数据量太大用户喜欢前端的方式&#xff0c;UI主要是拼凑比较简单&#xff0c;主要补充了一些判断越界和数据不全的细节&#xff0c;记录方…

php:使用Ratchet类实现分布式websocket服务

一、前言 最近需要做一个有关聊天的小程序&#xff0c;逻辑很简单&#xff0c;所以不打算用Swoole和workerman之类的&#xff0c;最后选择了Ratchet&#xff0c;因为简单易用&#xff0c;适合小型websocket服务。 二、问题 但是目前我的项目是分布式环境&#xff0c;统一通过Ng…

贴代码框架PasteForm特性介绍之query,linkquery

简介 PasteForm是贴代码推出的 “新一代CRUD” &#xff0c;基于ABPvNext&#xff0c;目的是通过对Dto的特性的标注&#xff0c;从而实现管理端的统一UI&#xff0c;借助于配套的PasteBuilder代码生成器&#xff0c;你可以快速的为自己的项目构建后台管理端&#xff01;目前管…

深入理解下oracle 11g block组成

深层次说&#xff0c;oracle数据库的最少组成单位应该是块&#xff0c;一般默认情况下&#xff0c;oracle数据库的块大小是8kb&#xff0c;其中存储着我们平常所需的数据。我们在使用过程中&#xff0c;难免会疑问道&#xff1a;“oracle数据块中到底是怎样组成的&#xff0c;平…

万有引力定律和库仑定律:自然的对称诗篇

万有引力定律和库仑定律&#xff1a;自然的对称诗篇 在宇宙深邃的知识长河中&#xff0c;万有引力定律和库仑定律恰似两颗璀璨的明珠&#xff0c;闪耀着人类智慧与自然奥秘的光辉。 十七世纪&#xff0c;牛顿在对天体运行的深邃思索中&#xff0c;拨开重重迷雾&#xff0c;发现…

win10局域网加密共享设置

1、创建共享账户 我的电脑右键选择管理 选择本地用户和组 -> 用户 双击用户 在空白区域右键,新建用户 然后创建用户 点击创建后 2、设置网络 右下角网络右键

leetcode 50个简单和中等难度的题

简单难度题目&#xff08;25个&#xff09; ‌两数之和 (Two Sum)‌‌有效的括号 (Valid Parentheses)‌‌罗马数字转整数 (Roman to Integer)‌‌最长公共前缀 (Longest Common Prefix)‌‌合并两个有序链表 (Merge Two Sorted Lists)‌‌移除链表元素 (Remove Linked List E…

iic协议

IIC&#xff08;Inter-Integrated Circuit&#xff09;协议&#xff0c;也被称为I2C协议&#xff0c;是一种由荷兰的PHILIPS公司&#xff08;现为NXP半导体公司&#xff09;开发的简单、高效的通信协议。以下是关于IIC协议的详细介绍&#xff1a; 一、IIC协议概述 定义&#…

.NET6 WebApi第1讲:VSCode开发.NET项目、区别.NET5框架【两个框架启动流程详解】

一、使用VSCode开发.NET项目 1、创建文件夹&#xff0c;使用VSCode打开 2、安装扩展工具 1>C# 2>安装NuGet包管理工具&#xff0c;外部dll包依靠它来加载 法1》&#xff1a;NuGet Gallery&#xff0c;注意要启动科学的工具 法2》NuGet Package Manager GUl&#xff0c…

准备阶段 Profiler性能分析工具的使用(一)

Unity 性能分析器 (Unity Profiler) 性能分析器记录应用程序性能的多个方面并显示相关信息。使用此信息可以做出有关应用程序中可能需要优化的事项的明智决策&#xff0c;并确认所做的优化是否产生预期结果。 默认情况下&#xff0c;性能分析器记录并保留游戏的最后 300 帧&a…

【LeetCode面试150】——219存在重复元素

博客昵称&#xff1a;沈小农学编程 作者简介&#xff1a;一名在读硕士&#xff0c;定期更新相关算法面试题&#xff0c;欢迎关注小弟&#xff01; PS&#xff1a;哈喽&#xff01;各位CSDN的uu们&#xff0c;我是你的小弟沈小农&#xff0c;希望我的文章能帮助到你。欢迎大家在…

运维面试题.云计算面试题之四.K8S

常见的k8s运维面试题 1、简述ETCD及其特点? etcd是一个用于配置共享和服务发现的键值存储系统,能够为整个分布式集群存储关键数据,协助集群正常运转 服务端将配置信息存储在etcd中,客户端从etcd中得到配置信息,etcd监听配置信息的变化,发现配置变化通知到客户端 特点 - 安…

【强化学习的数学原理】第03课-贝尔曼最优公式-笔记

学习资料&#xff1a;bilibili 西湖大学赵世钰老师的【强化学习的数学原理】课程。链接&#xff1a;强化学习的数学原理 西湖大学 赵世钰 文章目录 一、例子&#xff1a;如何改进策略&#xff1f;二、最优策略和公式推导三、公式求解以及最优性四、最优策略的有趣性质五、本节课…

24小时自动监控,自动录制直播蓝光视频!支持抖音等热门直播软件

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 工具特点📒📝 使用🎈 获取方式 🎈⚓️ 相关链接 ⚓️📖 介绍 📖 对于许多直播爱好者和内容创作者而言,错过心爱的直播或难以搜集视频素材始终是一个难题。今天,给大家分享的这款工具可以轻松解决这个问题,它拥有…

【LSTM实战】跨越千年,赋诗成文:用LSTM重现唐诗的韵律与情感

本文将介绍如何使用LSTM训练一个能够创作诗歌的模型。为了训练出效果优秀的模型&#xff0c;我整理了来自网络的4万首诗歌数据集。我们的模型可以直接使用预先训练好的参数&#xff0c;这意味着您无需从头开始训练&#xff0c;即可在自己的电脑上体验AI作诗的乐趣。我已经为您准…

【Swift】运算符

文章目录 术语赋值运算符算数运算符基本四则算术运算符求余运算符一元负号运算符一元正号运算符 比较运算符三元运算符空合运算符区间运算符闭区间运算符半开区间运算符单侧区间运算符 逻辑运算符逻辑非运算符逻辑与运算符逻辑或运算符逻辑运算符组合计算 位运算符运算符优先级…