CODEWITHSUNDEEP
dc.jscrossfilter
Sudeep Gupta
Sudeep Gupta

Reputation: 43

line chart isn't connecting consecutive points

I am trying a to plot a simple line chart from a data in csv format. The line chart is connecting the points incorrectly. For example, in the line chart given below, the plot is starting with 3rd point, going all the way to the end and coming to 1st and 2nd points.

enter image description here

Here's my code:

d3.csv("./sample.csv", function(data){  
  var ndx = crossfilter(data);
  var interval = ndx.dimension(function(d) {return d["Freq(MHz)"];});
  var field = "value1";
  var minF = d3.min(data.map(d => d["Freq(MHz)"]).map(Number));
  var miny = d3.min(data.map(d => d[field]).map(Number)) -10;
  var maxy = d3.max(data.map(d => d[field]).map(Number)) + 10;
  var maxF = d3.max(data.map(d => d["Freq(MHz)"]).map(Number));

  var hitslineChart  = dc.lineChart("#time-chart"); 
  thput = interval.group().reduceSum(function(d) {return d[field];});

  hitslineChart[0]
    .width(1200).height(350)
      .dimension(interval)
      .group(thput,field)
      .x(d3.scale.linear().domain([minF,maxF]))
      .brushOn(false)
      .renderHorizontalGridLines(true)
      .yAxisLabel(field)
      .xAxisLabel("Frequency(MHz)")
      .xAxisPadding(100)   
      .y(d3.scale.linear().domain([miny, maxy]))
      .mouseZoomable(true)


  hitslineChart.render()
})

I am unable to figure out the issue.

Upvotes: 1

Views: 86

Answers (1)

Gordon
Gordon

Reputation: 20130

It's likely that crossfilter is sorting your X coordinates in lexicographical order instead of numerical order.

Unlike JSON, d3.csv() will necessarily return all fields as strings. (I think they are revisiting this in D3v6.)

I'm not sure if they clearly define it anywhere, but crossfilter does "natural ordering" where strings are compared as strings, and numbers as numbers. Some details here.

You can try

var interval = ndx.dimension(function(d) {
  return +d["Freq(MHz)"];
});

Notice the + here - or use your favorite numeric coercion method, JS has a lot of them.

It's faster and safer to do any conversions before passing the data to crossfilter, so you might consider 

data.forEach(function(d) {
  d['Freq(MHz)'] = +d['Freq(MHz)'];
  // any other numbers or dates to convert here?
});
var ndx = crossfilter(data);

Upvotes: 1

Related Questions