This is called an anonymous function, which is a function that does not have a named label. Anonymous functions in Javascript are objects, like everything else, and that is why you can pass them as parameters to other javascript functions.
In the case of d3, it allows you to pass a function as a second parameter. As you have discovered, this function will be called with the current data item, as well as with the index of the current data item. If the second parameter is not a function, it can use the value.
In your example:
d3.selectAll("circle") .attr("cy",function (d) { return percent_scale(d.late_percent);}) .attr("cx",function (d) { return time_scale(d.time);}) .attr("r",1);
Both cy and cx assigned values based on the return value of the anonymous function call, and r assigned a static value. We could rewrite this as:
function setY(d) { return percent_scale(d.late_percent);} function setX(d) { return time_scale(d.time); } d3.selectAll("circle") .attr("cy", setY) .attr("cx", setX) .attr("r",1);
Here, I replaced the anonymous function calls with more standard function definitions and specified the name of the function called in the d3 call. This works exactly the same as before. Also note that in this case there is nothing magic in d .
function setY(foo) { return percent_scale(foo.late_percent);} function setX(foo) { return time_scale(foo.time); } d3.selectAll("circle") .attr("cy", setY) .attr("cx", setX) .attr("r",1);
This code will also do the same. Note that I renamed the parameter from d to foo , but that just changes the way the parameter is accessed inside the function. It does not act outside a function call. Typically in d3 documentation and tutorials you will see d used for the current data item and i used for the index of the current data item. The index is passed as the second element to the function, for example:
function setY(d, i) { return percent_scale(d.late_percent);} function setX(d, i) { return time_scale(d.time); } d3.selectAll("circle") .attr("cy", setY) .attr("cx", setX) .attr("r",1);
Now specifically in the case of d3 :
// Select all of the 'circle' elements (that is <circle>) elements // in the HTML document and put the associated data into an array d3.selectAll("circle") // For each circle element, set the Y position to be the result // of calling percent_scale on the data element late_percent .attr("cy",function (d) { return percent_scale(d.late_percent);}) // For each circle element, set the X position to be the result // of calling time_scale on the data element time .attr("cx",function (d) { return time_scale(d.time);}) // For each circle element, set the radius to be 1 .attr("r",1);
This is a very common design in d3 . The first step is to always make a choice to determine which set of elements you want to change (in this case .selectAll). After that, you can combine additional calls (in this case .attr calls) that actually do the required changes to the elements.
This creates a very powerful method for working with data-driven documents (such as graphs, charts, etc.) without having to manually track data items or create multiple cycles. In fact, you can usually say that you are using d3 incorrectly if you have any loops in the code that deals with modifying elements.
If you have little experience with javascript, the tutorials https://www.dashingd3js.com/ can be useful for getting started with d3 .