在d3.js中从CSV中选择一段数据
Selecting a section of data from CSV in d3.js
我通过创建一个新的csv创建了一个条形图,该csv是更大数据集的一部分。我现在想使用原始数据集中的数据来绘制条形图,只选择两列(Ward和Unemploymet)和一个月的数据。我该怎么做?
代码如下:
<!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
我希望能够更改代码,从一个更大的csv中选择数据集的这一部分,该csv包括56行和6列。有人能帮我做这个吗?提前谢谢。
在将csv传递给d3之前,您可以过滤csv以创建数据的子集。
在d3.csv调用的顶部执行类似的操作
var newData = data.filter(filterCriteria);
并且有一个filterCcriteria函数,根据您想要显示的内容返回true或false:
function filterCriteria(d) {
return d.month === targetMonth;
}
其中targetMonth
等于要显示的月份。
然后将newData传递给d3。
相关文章:
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 收集一段时间内的EMG数据.建议JS
- 在一段时间内切换文本
- 如何停止字幕文本一段时间,然后继续
- HTTP服务器在一段时间后停止(Node.js)
- Hammer.js过了一段时间就停止工作了
- 在经过一段时间或满足条件后运行代码
- Meteor-在一段时间内解锁模板(按日期)
- 画布在一段时间后开始滞后
- 如何使用jquery/js/css逐步突出显示一段文本
- 在d3.js中从CSV中选择一段数据
- Chrome扩展程序每隔一段时间检查来自服务器的数据
- 如何在一段时间内动态更新Highcharts数据
- 如何将字段数据从一种格式更改为另一种格式
- 从用户ip中插入数据后,阻塞用户一段时间
- 我如何发布一段数据,然后停止对它的反应
- 使用javascript/html从JSON结果中抓取一段数据
- 使用XMLHttpRequest读取数据后一段时间- Chrome扩展
- ZingChart如何在一段时间后加载最新数据并更新图表
- 为什么在页面空闲一段时间后,数据不传递给客户端?