Let's decorate the histogram such as convert the chart, apply the text, axis so on following previous post(2020/12/30 - [d3.js] - histogram layout, parseInt).
- CSV file
"name","age"
"maria",17
"maria",6
"maria",5
"maria",8
"maria",4
"maria",6
"maria",7
"maria",3
"maria",19
"maria",17
"maria",6
"maria",5
"maria",8
"maria",4
"maria",6
"maria",7
"maria",3
"maria",19
"maria",17
"maria",6
"maria",5
"maria",8
"maria",4
"maria",6
"maria",7
"maria",3
"maria",19
Let's make histogram layout and decorate it with this guys.
- HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3JS</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var width = 500,
height = 500,
padding=50;
d3.csv("mydata.csv", function (data){ //data is stored in this data
var map = data.map(function (i) {return parseInt(i.age);}) //map goes through each element in array and returns a new array based on criteria
//convert string to the numbers with parseInt
var histogram = d3.layout.histogram()
.bins(7)
(map)
var y = d3.scale.linear() //vertical scale
.domain([0,d3.max(histogram.map(function (i) {return i.length;}))]) //it returns the length of each array and handing that over to the d3 max function which takes the maximum value of that new array
.range([0,height])
var x = d3.scale.linear()
.domain([0,d3.max(map)]) //get the maximum age by calling the map array
.range([0,width])
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var canvas = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height+padding)//make room for the axis
.append("g")
.attr("transform", "trnaslate(20,0)");//move everything a bit to the right
var group = canvas.append("g")
.attr("transform", "translate(0,"+height+")") //transform axis from zero to horizontal, conctenate the height, move it down,
.call(xAxis)//call x-axis
var bars = canvas.selectAll(".bar")
.data(histogram)
.enter()
.append("g") //it will append a rectangle which is the actual bar
bars.append("rect")
.attr("x", function (d) {return x(d.x);})
.attr("y", function (d) {return 500-y(d.y);}) //for each bar y position is 500down minus height of the bar
.attr("width", function (d) {return x(d.dx);})
.attr("height", function (d) {return y(d.y);})
.attr("fill","orange")
bars.append("text")
.attr("x", function (d) {return x(d.x);})
.attr("y", function (d) {return 500-y(d.y);})
.attr("dy", "20px")
.attr("dx", function (d) {return x(d.dx)/2;})
.attr("fill","#fff")
.attr("text-anchor", "middle")
.text(function (d) {return d.y;})
});
</script>
</body>
</html>
- Result
'd3.js' 카테고리의 다른 글
| maps, geoMercator, geoPath, projection (0) | 2020.12.31 |
|---|---|
| treemap, category10, children, text-anchor (0) | 2020.12.31 |
| histogram layout, parseInt (0) | 2020.12.30 |
| cluster (0) | 2020.12.30 |
| tree layout, tree.nodes, tree.links (0) | 2020.12.29 |