d3.js分類時間序列（evolustrip）

Question

在中工作d3.js，我正在尋找一種顯示分類時間序列數據的好方法。數據值不能共現，也不是均勻間隔，所以我的數據完全一樣：

location = [[time1: home], [time4: work], [time5: cafe], [time7: home]] 

等等。我的理想結果圖像類似於可稱爲evolustrip的東西 - 查看此圖表的一種方式是以可變寬度條形式顯示的時間系列圖表，條形顏色對應於類別（例如「主頁」）。

任何人都可以指向正確的方向嗎？非常感謝！

Answer 1

所以我結束了各具特色我自己d3.js解決方案：

我用d3.time.scale規模爲時間維度，然後d3.scale.category20規模爲類別的顏色。然後，我將分類數據繪製爲時間軸上開始時間的高度相關值，並使用d3.time.scale比例來計算每個矩形的相應箱寬。

可重用的組件（以下在http://bost.ocks.org/mike/chart/模式）的例子可以看這裏：

function timeSeriesCategorical() { 
    var w = 860, 
     h = 70, 
     margin = {top: 20, right: 80, bottom: 30, left: 50}, 
     width = w - margin.left - margin.right, 
     height = h - margin.top - margin.bottom; 
    var xValue = function(d) { return d[0]; }, 
     yValue = function(d) { return d[1]; }; 
    var yDomain = null; 
    var xScale = d3.time.scale() 
     .range([0, width]); 
    var yScale = d3.scale.category20(); 
    var xAxis = d3.svg.axis() 
     .scale(xScale) 
     .tickSubdivide(1) 
     .tickSize(-height) 
     .orient('bottom'); 
    var yAxis = d3.svg.axis() 
     .scale(yScale) 
     .ticks(5) 
     .orient('left'); 
    var binwidth = 20; 

    function chart(selection) { 
     selection.each(function(data) { 

      // convert data to standard representation 
      data = data.map(function(d, i) { 
       return [xValue.call(data, d, i), yValue.call(data, d, i)]; 
       //return d; 
      }); 

      // scale the x and y domains based on the actual data 
      xScale.domain(d3.extent(data, function(d) { return d[0]; })); 
      if (!yDomain) { 
       yScale.domain(d3.extent(data, function(d) { return d[1]; })); 
      } else { 
       yScale.domain(yDomain); 
      } 

      // compute binwidths for TODO better comment 
      // d looks like {timestamp, category} 
      data.forEach(function(d, i) { 
       if (data[i+1]) { 
        w_current = xScale(data[i][0]); 
        w_next = xScale(data[i+1][0]); 
        binwidth = w_next - w_current; 
       } 
       d.binwidth = binwidth; 
      }); 

      // create chart space as svg 
      // note: 'this' el should not contain svg already 
      var svg = d3.select(this).append('svg').data(data); 

      // external dimensions 
      svg.attr('width', w) 
       .attr('height', h); 

      // internal dimensions 
      svg = svg.append('g') 
       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); 

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

      // TODO bars legend 

      // bars 
      svg.selectAll('rect') 
       .data(data) 
       .enter().append('rect') 
       .attr('x', function(d, i) { return xScale(d[0]); }) 
       .attr('width', function(d, i) { return d.binwidth; }) 
       .attr('height', height) 
       .attr('fill', function(d, i) { return yScale(d[1]); }) 
       .attr('stroke', function(d, i) { return yScale(d[1]); }); 

     }); 
    } 

    chart.x = function(_) { 
     if (!arguments.length) return xValue; 
     xValue = _; 
     return chart; 
    }; 

    chart.y = function(_) { 
     if (!arguments.length) return yValue; 
     yValue = _; 
     return chart; 
    }; 

    chart.yDomain = function(_) { 
     if (!arguments.length) return yDomain; 
     yDomain = _; 
     return chart; 
    }; 

    return chart; 
} 

而且是可調用的東西，如：

d3.csv('./data.csv', function(data) { 
    var chartActivity = timeSeriesCategorical() 
     .x(function(d) { return d.when; }) 
     .y(function(d) { return d.activity; }) 
     .yDomain([0,1]); 
    d3.select('#chart-activity') 
     .datum(data) 
     .call(chartActivity); 
}); 

但願這是有幫助的人！這個項目是在https://github.com/interaction-design-lab/stress-sense-portal