Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3.js How to add lines to a bar chart

I have a data set of 4 values. [a,b,c,d]. Currently they are displayed in a bar chart, for each value one bar. Now as values c and d are averages, i would like to display them as line behind the bars of a and b. Is this possible with d3? How can I switch between bar or line display within the same dataarray?

Thanks for your help.

like image 916
Olga Avatar asked Nov 05 '12 11:11

Olga


People also ask

How do you customize a bar graph?

Use the Chart Styles button to quickly change the color or style of the chart. Click the chart you want to change. In the upper-right corner, next to the chart, click Chart Styles. Click Color and pick the color scheme you want, or click Style and pick the option you want.

Which is better D3 or chart JS?

Chart. js provides a selection of ready to go charts which can be styled and configured while D3 offers building blocks which are combined to create virtually any data visualisation.

Can bar charts be 3D?

A bar 3D chart represents quantitative information. The chart consists of horizontally aligned rectangular bars of equal width with lengths proportional to the values they represent, something that aids in instant comparison of data. One axis of the chart plots categories and the other axis represents the value scale.


1 Answers

I'm posting an example here because none of the answers provide a working example in jsbin or jsfiddle, etc. of a barchart with a line.
http://jsbin.com/gisinomo/1/edit

The example is a fork of the simple Bar Chart on the d3 wiki.
http://bl.ocks.org/mbostock/3885304

CSS

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: #444;
  stroke-width: 1.5px;
}

JavaScript

var data = [{ "letter": "A", "frequency": .08167},
{ "letter": "B", "frequency": .01492},
{ "letter": "C", "frequency": .02780},
{ "letter": "D", "frequency": .04253},
{ "letter": "E", "frequency": .12702},
{ "letter": "F", "frequency": .02288},
{ "letter": "G", "frequency": .02022},
{ "letter": "H", "frequency": .06094},
{ "letter": "I", "frequency": .06973},
{ "letter": "J", "frequency": .00153},
{ "letter": "K", "frequency": .00747},
{ "letter": "L", "frequency": .04025},
{ "letter": "M", "frequency": .02517},
{ "letter": "N", "frequency": .06749},
{ "letter": "O", "frequency": .07507},
{ "letter": "P", "frequency": .01929},
{ "letter": "Q", "frequency": .00098},
{ "letter": "R", "frequency": .05987},
{ "letter": "S", "frequency": .06333},
{ "letter": "T", "frequency": .09056},
{ "letter": "U", "frequency": .02758},
{ "letter": "V", "frequency": .01037},
{ "letter": "W", "frequency": .02465},
{ "letter": "X", "frequency": .00150},
{ "letter": "Y", "frequency": .01971},
{ "letter": "Z", "frequency": .00074}];

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x2 = d3.scale.ordinal()
  .rangeBands([0, width], 0);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom"); 

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


  data.forEach(function(d) {
    d.frequency = +d.frequency;
  });

  x.domain(data.map(function(d) { return d.letter; }));
  x2.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Frequency");

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); });

var dataSum = d3.sum(data, function(d) { return d.frequency; }); 

 var line = d3.svg.line()
    .x(function(d, i) { 
      return x2(d.letter) + i; })
    .y(function(d, i) { return y(dataSum/data.length); }); 

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
like image 98
mg1075 Avatar answered Oct 13 '22 19:10

mg1075