0

I am working on a dynamic scatter plot using D3. (Current draft)

I would like to include a form at the bottom of the page that hides or grays out some of the circles depending on the form.

The form will have checkboxes and sliders. This question only asks about sliders. At the moment I'm stuck at how to make D3 elements respond to a form

Following this tutorial I made a slider that calls an update function when the user interacts with the slider. This SO answer gives the code for changing the color fill of a data point.

The console.log statement inside the update function suggests that I am not selecting the proper D3 element.

How do I access/link the proper D3 elements?

Community
  • 1
  • 1
mac389
  • 3,004
  • 5
  • 38
  • 62

1 Answers1

1

You should filter your data according to form inputs, and then notify d3.js with changed data. Put something like

d3.select('#chart svg')
      .datum(filterDataset(dataset, nRadius))
      .transition().duration(1000)
      .call(chart);

in your update function (example in pastebin)

Graying out is much the same, except you only change attributes in your data and making d3 colorize items according your attributes.

mbeloshitsky
  • 327
  • 1
  • 6
  • Can you provide an example of what you mean by "only change attributes in your data" in the context of graying out? I thought that `d3.selectAll(#nv-point)` was the appropriate way to select all the points in the scatter plot. – mac389 Apr 05 '15 at 16:19
  • 1
    In my opinion, the main idea of d3 is that the data has full control over it's visualisation, not any javascript code. But here is not only d3, also nvd3, so css-selectors may by appropriate. Graying out is `d3.selectAll('.nv-point').classed('hidden-point', function (d) { return d.size >= nRadius/100; })` Also about your CSS of .hidden-point. Not `visibility: none`, `visibility: hidden`. For graying out look pastebin. http://pastebin.com/uAuHFHSZ – mbeloshitsky Apr 06 '15 at 03:40