[英]d3.js - grouping data in a graph
How can I display my bar graph in d3 to show a summary of how much award $ each borough is receiving using this type of data format?: 如何在d3中显示我的条形图,以显示每个行政区使用此类数据格式获得多少奖励的摘要?:
{
School: "PS 1",
Borough: Q,
Award: 1000
},
{
School: "PS 2",
Borough: Q,
Award: 3000
},
School: "PS 4",
Borough: X,
Award: 3000
}
At the moment, my bar graph is organized by X: name of school, and Y: Award $. 目前,我的条形图由X组织:学校名称和Y:奖励$。 But I want to be able to show award $ based on each borough.
但我希望能够根据每个行政区显示奖励$。
Snippet: 片段:
var manhattanList = [];
var queensList = [];
var brooklynList = [];
var statenIsList = [];
var bronxList = [];
for (i=0; i<data.length; i++) {
if (data[i].boro === "M") {
manhattanList.push(data[i])
} else if (data[i].boro == "Q") {
queensList.push(data[i])
} else if (data[i].boro == "X") {
bronxList.push(data[i])
} else if (data[i].boro == "R") {
statenIsList.push(data[i])
} else {
brooklynList.push(data[i])
}
};
var width = 1000;
var height = 10000;
// creating scales:
var widthScaled = d3.scale.linear()
.domain([0, 83300000]) // data space
.range([0, width]); // pixel space
var colorScale = d3.scale.linear()
.domain([0, 83300000])
.range(["red", "blue"]);
// creating an axis - using our width scale
var axis = d3.svg.axis()
.ticks(10) // specifying how many "ticks" you want in your x
.scale(widthScaled); // scalling your x axis by canvas size
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(100, 100)")
.call(axis);
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect") // append rect for each data element
.attr("width", function(d) { return widthScaled(+d.award); })
.attr("height", 48)
.attr("y", function(d, i) { return i * 50; })
.attr("fill", function(d) { // randomizing bar colors
return "hsl(" + Math.random() * 360 + ",60%,80%)"
});
canvas.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("fill", "white")
.attr("y", function(d, i) { return i * 50 + 24; }) // where the text is placed
.text(function (d) { return d.name; })
});
Here's my JSBIN: https://jsbin.com/hiruci/edit?html,output 这是我的JSBIN: https ://jsbin.com/hiruci/edit ? html,output
To map your data by Borough, you can use d3.nest as follows. 要通过Borough映射数据,您可以按如下方式使用d3.nest。 It's a handy method that allows you to turn your data into the hierarchy you need.
这是一种方便的方法,允许您将数据转换为所需的层次结构。
d3.json("https://data.cityofnewyork.us/resource/8586-3zfm.json", ready);
function ready(error, data){
if ( error ) {
console.warn("ERROR: " + error);
}
var dataFormatted = d3.nest()
.key(function(d) { return d.boro; })
.map(data);
console.log(data);
console.log(dataFormatted);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.