0

I am trying to create a chart based on context-focus brushing with x-axis in minutes displayed. So when i brush on the context the corresponding chart gets displayed on the focus area for the selection. However i find some issues in the chart.

1.Line is not getting displayed in the linear format. 2.Color does not change for the lines according to the application id.

My code :

var margin = {top: 10, right: 10, bottom: 100, left: 40},
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    height2 = 500 - margin2.top - margin2.bottom;

var color = d3.scale.category10();

var x = d3.time.scale().range([0, width]),
    x2 = d3.time.scale().range([0, width]),
    y = d3.scale.linear().range([height, 0]),
    y2 = d3.scale.linear().range([height2, 0]);

var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");

var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brushed);


var line=d3.svg.line()
         .x(function(d) {return x(d.date);})
         .y(function(d) { return y(d.price)})
         .interpolate('linear');

var line2=d3.svg.line()
         .x(function(d) {return x2(d.date);})
         .y(function(d) { return y2(d.price)})
         .interpolate('linear');


var svg = d3.select("#graphid").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("backcolor","lightblue");



var focus = svg.append("g")
    .attr("class", "focus")
    //.call(zoom)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

var data = d3.csv.parse( d3.select("pre#data").text() );

     data.forEach(function(d,i) {
        d.date = new Date(+d.date/100);
        d.price = +d.price;
    });
  x.domain(d3.extent(data.map(function(d) { return d.date; })));
  y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
  x2.domain(x.domain());
  y2.domain(y.domain());


  // Nest the entries by application
var dataNest = d3.nest()

              .key(function(d) {return d.applicationid;})

        .entries(data);


      focus.selectAll("g").data(dataNest)
            .enter()
            .append("g")
            .attr("id", function(d) { return "f" +d.key.replace(/\s+/g, '') })
      .append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return d.color= color(d.key)})
      .attr("stroke-width",2)
      .attr("fill","none");

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

  focus.append("g")
      .attr("class", "y axis")
      .call(yAxis);


   context.selectAll("g").data(dataNest)
          .enter()
          .append("g")
          .attr("id", function(d) { return "c" +d.key.replace(/\s+/g, '') })
          .append("path")
          .attr("class", "line")
          .attr("d", function(d) { return line2(d.values); })
        .style("stroke", function(d) { return d.color= color(d.key)})
          .attr("stroke-width",2)
          .attr("fill","none");


  context.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

  context.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", height2 + 7);


function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  //focus.select(".line").attr("d", line);
  focus.selectAll("path.line").attr("d", function(d) { return line(d.values); }); 
  focus.select(".x.axis").call(xAxis);
}

My data is :

<pre id="data">

    applicationid,application,date,price
    202270,application1,1377244506.794737,1200
    202270,application1,1377244506.898609,1266.42
    202270,application1,1377244506.994899,1298.58
    202270,application1,1377244507.095995,1252.43
    202270,application1,1377244507.194835,1220.6
    202270,application1,1377244507.295265,1254.6
    202270,application1,1377244507.395149,1230.83
    202270,application1,1377244507.495221,1217.68
    202270,application1,1377244507.59541,1236.51
    202270,application1,1377244507.710992,1429.4
    202270,application1,1377244507.795081,1314.95
    202270,application1,1377244507.895482,1320.28
    202944,application2,1377244507.995466,1100
    202944,application2,1377244508.095888,1234
    202944,application2,1377244508.195787,1567
    202944,application2,1377244508.294706,1657.8
    202944,application2,1377244508.39531,1800
    202944,application2,1377244508.49563,1818
    202944,application2,1377244508.59497,900
    202944,application2,1377244508.69526,1000
    202944,application2,1377244508.795564,1200
    202944,application2,1377244507.395149,1101
    202944,application2,1377244506.994899,896.24
    202944,application2,1377244507.395149,903.25
    202944,application2,1477244506.794737,1001
    202944,application2,1477244506.898609,1034
    202944,application2,1477244506.994899,1067
    202944,application2,1477244507.095995,1057.8
    202944,application2,1377244508.195787,1001
    202944,application2,1377244508.69526,1018
    202944,application2,1377244508.69526,1211
    202944,application2,1477244506.794899,110
    202944,application2,1477244506.794819,101
    202944,application2,1477244506.394899,101
    202944,application2,1477244506.794899,806.24
    202944,application2,1477244506.594899,93.25
    203715,application3,1477344506.794737,1200
    203715,application3,1477344506.898609,1266.42
    203715,application3,1477344506.994899,1198.58
    203715,application3,1477344507.095995,1152.43
    203715,application3,1477344507.194835,820.6
    203715,application3,1477344507.295265,754.6
    203715,application3,1477344507.395149,1630.83
    203715,application3,1477344507.777149,1117.68
    203715,application3,1477344507.175149,1536.51
    203715,application3,1477344507.395149,1429.4
    203715,application3,1477344507.395149,1114.95
    203715,application3,1477344507.395149,1301.28
    </pre>

What am i missing here?

complete working code demo can be found in http://fiddle.jshell.net/zua7L31d/1/

krishna_v
  • 1,501
  • 5
  • 30
  • 60

1 Answers1

1

Issue #1 : Line is not getting displayed in the linear format.

Solution:

The date information you used is not valid. That is why the lines are not rendered properly. I don't know why the date information in your code have decimal points. If you correct it and parse using a proper format, the code will work.

var parseDate = d3.time.format("%Y%m%d").parse;
data = data.map( function (d) { 
    return {         
      applicationid: d.applicationid,
      date: parseDate(d.date),
      price: +d.price 
    }; 
});

Issue #2: Color does not change for the lines according to the application id.

Solution:

To get the unique color code for each application id, use code below.

var appIds = data.map(function(d){return d.applicationid});
var uniqAppIds = appIds.filter(function(d,i){return appIds.indexOf(d)==i });
var color = d3.scale.category10().domain(appIds);

//color(d.key) in your code will now return distinct colors for each application id.

Here is the working JSFiddle

Gilsha
  • 14,431
  • 3
  • 32
  • 47