22357

D3 sort() with CSV data

Question:

I am trying all kinds of ways to make .sort() work on my csv dataset. No luck.

I'd just like to sort my data by a "value" column.

This is the function I'm running inside my d3.csv api call and before I select the dom and append my divs:

dataset = dataset.sort(function (a,b) {return d3.ascending(a.value, b.value); });

Before I get to the .sort, I clean the data:

dataset.forEach(function(d) { d.funded_month = parseDate(d.funded_month); d.value = +d.value; }); };

Everything seems in order. When I console.log(d3.ascending(a.value, b.value)), I get the right outputs:

-1 d32.html:138 1 d32.html:138 -1 d32.html:138 1 d32.html:138 etc..

Yet the bars data doesn't sort.

Answer1:

It is not clear from the provided code but I will hazard a guess you are not handling async nature of d3.csv.

<a href="http://plnkr.co/edit/z8WdSry2349xassr2mtj" rel="nofollow">This plunkr shows your sort code working fine</a>. Note where the data object is declared, populated, and used.

here is a partial listing. I have added buttons that re-order data. To achieve this we need to put the ordering logic inside render rather than inside the d3.csv callback.

<script type="text/javascript"> var data = []; d3.csv("data.csv", function(error, rows) { rows.forEach(function(r) { data.push({ expense: +r.expense, category: r.category }) }); render(); }); function render(d3Comparator) { if(d3Comparator) data = data.sort(function(a, b) { return d3[d3Comparator](a.expense, b.expense); }); d3.select("body").selectAll("div.h-bar") // <-B .data(data) .enter().append("div") .attr("class", "h-bar") .append("span"); d3.select("body").selectAll("div.h-bar") // <-C .data(data) .exit().remove(); d3.select("body").selectAll("div.h-bar") // <-D .style("width", function(d) { return (d.expense * 5) + "px"; }) .select("span") .text(function(d) { return d.category; }); } </script> <button onclick="render('ascending')">Sort ascending!</button> <button onclick="render('descending')">Sort descending!</button>

Recommend

  • Eclipse - Cannot load 32-bit SWT libraries on 64-bit JVM
  • My Places API returns 'ZERO_RESULTS'
  • AngularJS DateRange - how to include the end date
  • dc.js x-axis will not display ticks as months, shows decimals instead
  • Batch file to delete files and folder
  • Why can't my VM Argument's path not be found when I try to run my project in Eclipse?
  • Parsing date string (MM-dd) to java date in default year
  • wso2 samples not working
  • How to produce a Code 39 that can be reliably read after faxing
  • Calling java project from Mathematica
  • PHP file_exists() anomaly
  • Highcharts - Column chart with empty columns for date in x-axis
  • Insertion large number of Entities into SQL Server 2012 [duplicate]
  • Dynamically load css stylesheet and wait for it to load
  • Add reference to ASP.NET 5 Class Library from Framework 4.5 Class Library Project
  • Access object instance inside an event handler
  • Cannot save model when using ember render helper
  • get iframe content as string
  • Retrieve IP address of device
  • Linq Merge lists
  • Conversion from string “a” to type 'Boolean' is not valid
  • D3 get axis values on zoom event
  • Assign variable to the value in HTML
  • Detect when Facebook like button is clicked
  • Needing to do .toArray() to get output of mongodb .find() on key name not value
  • How to use carriage return with multiple line?
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Perl system calls when running as another user using sudo
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Upload files with Ajax and Jquery
  • How to pass list parameters for each object using Spring MVC?
  • How to get icons for entities from eclipse?
  • AngularJs get employee from factory
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • need help with bizarre java.net.HttpURLConnection behavior
  • JaxB to read class hierarchy