javascript d3 visualization doesn't load/appear until clicking HTML input

Question

I have a d3 app with one HTML number input. Everything works as I want it to for the moment, except that the visualization doesn't appear in the browser until I actually click the number input up or down.

I tried setting the input with a value:

<input type="number" min="0" max="100" step="1" value="5" id="nMinutes">

I also tried this workaround:

var hack = document.getElementById("nMinutes");
hack.value = "22";

to no avail.

I am following this example: http://www.d3noob.org/2014/04/using-html-inputs-with-d3js.html

Here's the fiddle: http://jsfiddle.net/btsusu6v/3/ Note: I am using d3.csv in my actual app:

var dataset2
    d3.csv("/assets/csv/mydata.csv", function(d) {
    dataset2=d;
})

This is my first venture into D3 (and javascript for that matter), so all general recommendations about the app (and not 100% specific to the posted question) are welcome and appreciated.

Answer 1

The visualization seems to get initialized on input.

d3.select("#nMinutes").on("input", function () {
    d3.select("svg").remove();
    buildhist(dataset2, +this.value);
});

So only once you click on the arrow does your code draw the graphs. If you were to put:

buildhist(dataset2, 1);

at the end of the JavaScript file, it should work as you intended.

Answer 2

So I over-simplified the fiddle example, but realized from jstkim7's answer where the issue must lie. I found the solution after reviewing this post:csv to array in d3.js

I had to include the buildhist(dataset2, 5) inside the d3.csv function. Like so:

var dataset2 = d3.csv("/assets/csv/cleanTrips.csv", function(d) { dataset2=d; buildhist(dataset2, 5); });