FloorViz/bar.js at master · shred444/FloorViz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
var data = rawData.hist;//[4, 8, 15, 16, 23, 42];


var chart = d3.select("#barchart")
    //.attr("class", "barchart")
    .attr("width", 420)
	.attr("height", 140)
	.append("g")
	.attr("transform", "translate(10,15)");

var x = d3.scale.linear()
    .domain([0, 100])
    .range([0, 420]);

 var y = d3.scale.ordinal()
    .domain(data)
    .rangeBands([0, 120]);

//Draw grid lines
chart.selectAll("line")
    .data(x.ticks(10))
  .enter().append("line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", 0)
    .attr("y2", 120)
    .style("stroke", "#ccc");

chart.selectAll(".rule")
    .data(x.ticks(10))
  .enter().append("text")
    .attr("class", "rule")
    .attr("x", x)
    .attr("y", 0)
    .attr("dy", -3)
    .attr("text-anchor", "middle")
    .text(String);

//draw y axis line
chart.append("line")
    .attr("y1", 0)
    .attr("y2", 120)
    .style("stroke", "#000");

//draw bars
chart.selectAll("rect")
		.data(data, function (d) { return d.id;})
		//.data(data)
	.enter().append("rect")
		//.attr("class", "bar")
		.attr("y", y)
		.attr("width", function(d) { return d.percent; })
		.attr("height", y.rangeBand());

//draw text
chart.selectAll("text")
		.data(data)
	.enter().append("text")
		.attr("x", x)
		.attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
		.attr("dx", -3) // padding-right
		.attr("dy", ".35em") // vertical-align: middle
		.attr("text-anchor", "end") // text-align: right
		.text(String);