Width of DIV
The following example constructs a
bar chart by creating a
<div> element for each bar and setting its
width CSS style.
First, d3.select('.bar-chart') selects the DIV into which the bar chart will be placed (.bar-chart) and then applies selectAll() (which is not entirely clear to me why this step is needed) and then assigns an array of values (.data()) and finally creates (.append()) the divs for each bar with their corresponding widht and text:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>d3.js: Bar Chart</title>
<style type="text/css">
.bar-chart {
border: #f72 solid 1px;
display: inline-block
}
.bar-chart div {
background-color:#fa5;
margin: 2px;
color: #713;
text-align: right}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script type="text/javascript">
function main() {
d3.select('.bar-chart').
selectAll(). // What is this step really needed for?
data([194, 52, 228, 268, 163, 138, 92]).
enter().
append('div').
style ('width', function(d) {return d + "px"}).
text ( function(d) {return d });
}
</script>
</head>
<body onload='main()'>
<div class='bar-chart'></div>
</body>
</html>
scaleLinear
The following example uses d3.scaleLinear to create a function with which the length of the bar chart is scaled across the entire screen.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>d3.js: Bar chart (scaled)</title>
<style type="text/css">
.bar-chart {
border: #f72 solid 1px;
display: inline-block
}
.bar-chart div {
background-color:#fa5;
margin: 2px;
color: #713;
text-align: right}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script>
var data = [194, 52, 228, 268, 163, 138, 92];
function main() {
var scale=d3.scaleLinear().
domain([0, d3.max(data)]).
range([0, window.innerWidth - 20]);
d3.select('.bar-chart').
selectAll('div').
data(data).
enter().
append('div').
style ('width', function(d) {return scale(d) + "px"}).
text ( function(d) {return d });
}
</script>
</head>
<body onload='main()'>
<div class='bar-chart'></div>
</body>
</html>
SVG
This example creates a bar chart using
SVG primitives rathern than a DIV element:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>d3.js: Bar chart (scaled)</title>
<style type="text/css">
#bar-chart rect {
fill:#fa5;
}
#bar-chart text {
fill:#03f;
font: 10px sans-serif;
text-anchor: end;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<script>
var data = [194, 52, 228, 268, 163, 138, 92];
var bar_height = 20;
function main() {
var window_width = window.innerWidth;
var scale=d3.scaleLinear().
domain([0, d3.max(data)]).
range([0, window_width - 20]);
var bar_chart = d3.select('#bar-chart').
attr('width' , window_width).
attr('height', bar_height * data.length);
var bar = bar_chart.selectAll('g').
data(data).
enter().append('g').
attr('transform', function(d, i) {return 'translate(0,' + i* bar_height + ')'; });
bar.append('rect').
attr('width', scale).
attr('height', bar_height-3)
bar.append('text').
attr('x', function(d) {return scale(d) - 3;}).
attr('y', bar_height / 2).
attr('dy', '.25em').
text(function(d){return d});
}
</script>
</head>
<body onload='main()'>
<svg id="bar-chart"></svg>
</body>
</html>