D3 Chart With Search Box

I have created a chart in D3 where nodes show the time at which particular individuals created a document. The chart also presents a search box, which turns nodes red depending on

Solution 1:

Right now you're drawing the chart after the button is clicked. That's not a good idea for changing the colours of the circles when the user clicks the button.

So, remove that inline function call and the sayHi function altogether. Then, inside the d3.tsv callback (that's a TSV, not a CSV), get the value of the text area:

d3.select("button").on("click", function() {
  var txtName = d3.select("#txtName").node().value;
  circles.style("fill", function(d) {
    return d.doc === txtName ? "red" : "black";
  })
})

Here, circles is your circles' selection. Remember to name your selections.

Here is a demo using your code: https://jsfiddle.net/dhy4yt2z/1/

PS: your code have several other minor issues that should be corrected, like the use of margins.

Solution 2:

You can store the circles to a variable and just change the fill based on the textarea value.

I've used a bit of jQuery so that the user doesn't even have to press the Try it button as a bonus. You may remove it if you like.

Here's a plunker