javascript - 在 d3.js 中从 CSV 中选择一段数据-6ren

javascript - 在 d3.js 中从 CSV 中选择一段数据

转载作者：行者123 更新时间：2023-11-27 23:09:15

25

4

我通过创建一个新的 csv 创建了一个条形图，该 csv 是更大数据集的一部分。我现在想使用原始数据集中的数据通过仅选择两列(沃德和失业)和一个月的数据来绘制条形图。我该怎么做？

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unemployment by Ward Bar Chart</title>

<style type="text/css">
  .axis text{
  font-family: Arial;
  font-size: 13px;
  color: #333333;
  text-anchor: end;
}
  .axis path{
  fill:none;
  stroke:#333333 ;
  stroke-width: 1.5px;
  shape-rendering: crispEdges
  font-family: Arial;
}
.bar{
    stroke: none;
    fill: #012C3B;

}
.textlabel{
    font-family:  Arial;
    font-size:13px;
    color: #333333;
    text-anchor: middle;
}

</style>
</head>
<body>

<script type="text/javascript" src="d3/d3.js"></script>
<script>
  var margin = {top:20, right:0, bottom:60, left:60},
width  = 475;
height = 350;
padding = 100;


var svg = d3.select("body")
.append("svg")
.attr("width", "30%")
.attr("height", "70%")
.attr("viewBox", "0 0 " + width + " " + height); 

var yScale = d3.scale.linear()
.range([height - margin.top - margin.bottom, 0]);

 var xScale = d3.scale.ordinal()
.rangeRoundBands([0, width - margin.right - margin.left], .1);

var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {return d + "%"})


  d3.csv("Unemployment.csv", function(error, data)
 {

 //map function goes through every element, then returns a number for                  Unemployment
 data = data.map(function(d){ 
 d["Unemployment"] = +d["Unemployment"]; 
 return d;
  });

 //yscale's domain is from zero to the maximum "Unemployment"
 yScale.domain([0, d3.max(data, function(d){ return d["Unemployment"]; })]);

 //xscale is unique values in Ward (Ward, since they are all different)
   xScale.domain(data.map(function(d){ return d["Ward"]; }));
  svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .selectAll(".bar")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", function(d){ return xScale(d["Ward"]); })
  .attr("y", function(d){ return yScale(d["Unemployment"]); })
  .attr("height", function(d){ return height - margin.top - margin.bottom -          yScale(d["Unemployment"]); })
  .attr("width", function(d){ return xScale.rangeBand(); })
  .style("font-family", "Arial");


//adding y axis to the chart
 svg.append("g")
 .attr("class", "y axis")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
 .call(yAxis)
 .style("color", "#333333")
 .style("font-family", "Arial");

//adding x axis to the bottom of chart
 svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + margin.left + "," + (height - margin.bottom)      + ")")
.call(xAxis)
.style("color", "#333333")
.style("font-family", "Arial");


//bar labels

  svg.append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
 .selectAll(".textlabel")
 .data(data)
 .enter()
 .append("text")
 .attr("class", "textlabel")
 .style("font-family", "Arial")
 .style("font-size", "15px")
 .attr("x", function(d){ return xScale(d["Ward"]) + (xScale.rangeBand()/2); })
 .attr("y", function(d){ return yScale(d["Unemployment"]) - 3 ; })
 .text(function(d){ return (d["Unemployment"] + "%"); });

  // Y-axis labels
 svg.append("text")
 .attr("text-anchor", "middle")
 .style("font-size", "13px")
 .style("color", "#333333")
 .attr("transform", "translate ("+ (padding/4) + "," +(height/2)+")     rotate(-90)")
 .text("Unemployment")
 .style("font-family", "Arial"); 

// X-axis labels
 svg.append("text")
 .attr("text-anchor", "middle")
  .style("font-size", "13px")
   .style("color", "#333333")
 .attr("transform", "translate("+ (width/2) + "," +(height-(padding/4)) + ")")
 .text("Ward")
 .style("font-family", "Arial"); 

 //title for the chart 

 svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("color", "#333333")
.attr("transform", "translate("+ (width/3.78) + "," +(height/30) + ")")
.text("Unemployment by Ward")
.style("font-family", "Arial");

//source

svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate("+ (width/3.2) + "," +(height/1) + ")")
.text("Source:Bureau of Labor Statistics")
.style("font-family", "Arial")

 })


 </script>
 </body>
 </html

用于此目的的 CSV 是:

Ward    Unemployment
1   4.5
2   4.3
3   4
4   5.7
5   7.9
6   5.2
7   11
8   14.2

我希望能够更改代码以从包含 56 行和 6 列的更大 csv 中选择这部分数据集。有人可以帮我解决这个问题吗？提前致谢。

最佳答案

您可以过滤 csv 以创建数据子集，然后再将其传递到 d3。

在 d3.csv 调用的顶部执行类似的操作

var newData = data.filter(filterCriteria);

并有一个 filterCriteria 函数，根据您想要显示的内容返回 true 或 false:

function filterCriteria(d) {
    return d.month === targetMonth;
}

其中 targetMonth 等于您要显示的月份。

然后将newData传递给d3。

关于javascript - 在 d3.js 中从 CSV 中选择一段数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36314656/

25

4

0

文章推荐： html - 动态调整图像大小

文章推荐： javascript - HTML Accordion 填充

csv - 如何将 csv 文件读入数组并与另一个 csv 文件中的条目进行比较和替换？
我有两个 csv 文件 file1.csv 和 file2.csv。 file1.csv 包含 4 列。文件1: Header1,Header2,Header3,Header4 aaaaaaa,bb
csv - 如何测试 CSV 文件以及如何找出两个 CSV 文件之间的差异
我想知道是否有任何方法可以在导入数据库之前测试 CSV 文件？我有一个包含多列的巨大 CSV 文件，每列都有不同的数据类型和大小。如何测试生成的 CSV 文件中出现的数据是否与每列的大小一致？还有
csv - CSV 中的查找值和第二列的返回值
我正在从 SCOM 中提取服务器列表，并希望根据包含以下数据的 CSV 检查此列表: Computername,Collection Name Server01,NA - All DA Servers
csv - 如何使用 Super CSV 部分读取 CSV 文件
我有一个包含 24 列的 csv 文件。其中我只想阅读 3 列。我看到 super CSV 是一个非常强大的库，但我不知道如何部分读取 CSV。 partial reading上的链接坏了。请帮我举
csv - 如何将加特林日志文件导出到 csv
我正在尝试将加特林日志文件导出到 CSV，因为我需要更新 google 电子表格中的所有全局值，因为我的经理需要电子表格中的值。最佳答案此 CSV 文件被删除并替换为 JSON 文件，名为 glo
csv - csv 是结构化数据还是半结构化数据？
我对 csv 是结构化数据还是半结构化数据感到困惑。就像 RDBMS 是一个有关系的结构化数据，但 csv 没有关系。我无法找到确切的答案。最佳答案我可以说，具有恒定列和行(二维)的 CSV
csv - 使用 pipes-csv 从 csv 文件中读取第一行
我正在使用 pipes-csv 库读取一个 csv 文件。我想先读第一行，然后再读其余的。不幸的是，在 Pipes.Prelude.head 函数返回之后。管道正在以某种方式关闭。有没有办法先读取 c
csv - CSV 文件中空行的含义
起初这似乎很明显，但现在我不太确定。如果 CSV 文件具有以下行: a, 我会将其解释为具有值“a”和“”的两个字段。但是然后查看一个空行，我可以很容易地争辩说它表示一个值为“”的字段。我接受文件
csv - 将列表字典写入 csv
我正在尝试将列表字典写入 CSV 文件。我希望这些键是 CSV 文件的标题，以及与该键关联的列中的每个键关联的值。如果我的字典是: {'600': [321.4, 123.5, 564.1, 764
csv - 将数组导出为 CSV
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 10 年前。 Improve thi
csv - CSV 文件可以有注释吗？
是否有任何官方方法允许 CSV 格式的文件允许评论，无论是在其自己的行上还是在行尾？我尝试检查wikipedia关于此以及RFC 4180但两者都没有提到任何让我相信它不是文件格式的一部分的内容，所
csv - 如何从字符串中读取 CSV？
我有一些 csv 格式的数据。然而它们已经是一个字符串，因为我是从 HTTP 请求中获取它们的。我想使用数据框来查看数据。但是我不知道如何解析它，因为 CSV 包只接受文件，而不接受字符串。一种解决
csv - CSV 文件中的值列表应该使用哪个分隔符？
我有一个 CSV 文件，其中包含一些字段的值列表。它们作为 HTML“ul”元素存储在数据库中，但我想将它们转换为对电子表格更友好的东西。我应该使用什么作为分隔符？我可以使用转义的逗号、竖线、分号或
csv - 如何使用管道分隔符导出到 .csv
我使用 Google 表格(电子表格)来合并我的 Gambio 商店的不同来源的文章数据。要导入数据，我需要在 .csv 文件中使用管道符号作为分隔符/分隔符，并使用 "作为文本分隔符。在用于导出为
csv - 报表生成器导出到带有列标题空间的 CSV
这是一个奇怪的请求，因为我们都知道数据库头不应该包含空格。但是，我正在使用的系统需要在其标题中使用空格才能导入。我创建了一个 Report Builder 报告，它将数据构建到一个表中，并在我运行
csv - 当其中一个值可能在字符串中包含逗号时处理 .CSV
我有一个 .csv 文件，我需要将其转换为 coldfusion 查询。我使用了 cflib.org CSVtoQuery 方法，它工作正常......但是...... 如果 csv 中的“单元格”在
csv - 文化独立 CSV
我想知道是否有任何方法可以生成文化中性 CSV 文件，或者至少指定文件中存在的特定列的数据格式。例如，我生成了包含带小数点分隔符 (.) 的数字的 CSV 文件，然后将其传递给小数点分隔符为 (,
Javascript:如果 CSV 中没有，则将值添加到 CSV - 如果已经在 CSV 中 - 从 CSV 中删除
我正在构建一个 CSV 字符串 - 因此用户单击 div 的所有内容 - 5 个字符的字符串都会传递到隐藏字段中 - 我想做的是附加每个新值并创建一个 CSV 字符串 - 完成后- 在文本框中显示 -
Linux CSV - 将 CSV 文件中的列添加到另一个 CSV 文件
我正在努力从另外两个文件创建一个 CSV 文件这是我需要的我想要的文件(很多其他行) “AB”；“A”；“B”；“C”；“D”；“E” 我拥有的文件: 文件 1:"A";"B";"C";"D";"
csv - 将包含带引号的值的表导出到配置单元中的本地 csv
我正在尝试将表导出到配置单元中的本地 csv 文件。 INSERT OVERWRITE LOCAL DIRECTORY '/home/sofia/temp.csv' ROW FORMAT DELIMI

首页

博学

6Ren·AI

商城

javascript - 在 d3.js 中从 CSV 中选择一段数据