Javascript D3 graphs, sorting an array

Question

I seem to be having a problem of sorting an array of values when I'm trying to display it in a graph in d3; when i am passing my array of values through local storage to another page that will generate the graph, the output on the new page with the graph shows an unsorted graph with a very weird pattern. I.E: passing an array with values where the value 1st value in each index say, 500 forms the Y axis while the other the X axis:

[500, 1.62], [600, 2.42], [700, 3.2], [800, 2], [1100, 3.2] , [1100, 3.2]

ends up as:

[1100, 3.2],  [1100, 3.2],  [800, 2], [700, 3.2], [600, 2.42], [500, 1.62]

when i try to generate a graph in the new page where the line just gets really messy and out of place. I am using the array.sort(), but that does not seem to work. Below is the code; am i missing something here?

<html>


<svg class="chart"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });
</script>
<div class="chart"></div>*/ -->

<meta charset="utf-8">
<div class="chart"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

//Get data from previous page
 var arrData = JSON.parse(window.localStorage.getItem("graphArray"));
 arrData.

  arrData.sort(); 
   console.log(arrData);

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

var parseDate = d3.time.format("%Y-%m-%d").parse;


var x = d3.time.scale()
    .range([0, width])

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");

var line = d3.svg.line()
    .x(function(d) { return x(d.idd); })
    .y(function(d) { return y(d.timing); });

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 + ")");

  var data = arrData.map(function(d) {
      return {
          idd: d[1],
         timing: d[0]

      };

  });

  console.log(data);


  x.domain(d3.extent(data, function(d) { return d.idd; }));
  y.domain(d3.extent(data, function(d) { return d.timing; }));

  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("Time (ms)");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);




</script>

<body>
  <span></span>
<div class="dot">.</div>

</body>
</html>

Your source code is screwed up. Right after the starting <html> begins a mixture of elements and source code which belong to either the <head> or the <body>. The <body> ifself starts at the bottom when the show is almost over. Furthermore there is an error in your JavaScript with a lonely arrData. dangling around. Try to clean up your code first to eradicate sources of error. Putting this in a working demo to fiddle around with might also be very helpful to get further assistance. — altocumulus
– altocumulus, Commented Oct 30, 2015 at 13:20
I removed part of the css at the top to avoid confusion. I excluded the code of the page that i passed the data from. — user1610834
– user1610834, Commented Oct 30, 2015 at 13:26
Even allowing for the parts you left out, there is no way this becomes a valid page. There is a <div> and a <svg> in positions where they are not allowed, let alone the JS error. If your code doesn't work, this site's consensus is to provide at least a minimal reproducible example. — altocumulus
– altocumulus, Commented Oct 30, 2015 at 13:51

svdwoude · Accepted Answer · 2015-10-30 14:10:39Z

1

Your array consist out of arrays of length 2. Just applying sort on that array won't be enough. You need to detail how you want the array to be sorted by providing a compare method like so:

arrData.sort(function(a,b) {
    return a[0] - b[0];
});

Here you compare the numbers at index 0 from the sub-arrays.

answered Oct 30, 2015 at 14:10

svdwoude

5533 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1610834 Over a year ago

Thank you, I understand how it's supposed to work now.

Collectives™ on Stack Overflow

Javascript D3 graphs, sorting an array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related