1

How can I make a data visualization in d3 such that the data loaded changes when selecting an attribute? For example, if I have data that is a function of location, then I could select the location for which to display the data. The closest example I found was update, but then I cannot choose the data set to display.

peterh
  • 11,875
  • 18
  • 85
  • 108
giulio
  • 659
  • 2
  • 8
  • 22
  • 1
    have a look here: http://stackoverflow.com/questions/14958825/dynamically-update-chart-data-in-d3 – aberna Feb 14 '15 at 16:13
  • thank you for the link. This is not exactly what I would like to do though. I am looking for some kind of interactivity: Let's say that I have two locations, I would like the user to be able to select the data for a specific location he selects (in the link, they just click to update the graph and cannot select specific data to load) – giulio Feb 14 '15 at 16:27
  • I understand your request. Check the answer, may be you can slightly move to a d3 based library more suitable to your needs. – aberna Feb 14 '15 at 16:49

1 Answers1

1

To obtain such level of interaction, you can focus on the library C3.js which is based on D3.

C3 provides a variety of APIs and callbacks to access the state of the chart. By using them, you can update the chart even if after it's rendered.

A sample of code could be as this one:

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});

By C3 definition both data1,data2 will be interactive elements you can deal with.

Documentation here: http://c3js.org/

aberna
  • 5,594
  • 2
  • 28
  • 33
  • you delete your new question http://stackoverflow.com/questions/28518454/visualizing-a-chart-using-c3 while I was writing down the solution. Issue was probably related to libraries loading – aberna Feb 14 '15 at 19:16