score:0

Accepted answer

Boom, finally figured it out.

function show_fastest_and_slowest_pizza_maker(ndx) {

    var timeDim = ndx.dimension(dc.pluck("PizzaTime"));

    var minPizzaTimeName = timeDim.bottom(1)[0].Name;
    var maxPizzaTimeName = timeDim.top(1)[0].Name;

    d3.select('#minPizzaTimeName')
        .text(minPizzaTimeName);
    d3.select('#maxPizzaTimeName')
        .text(maxPizzaTimeName);

}

Thanks very much Gordon, you sent me down the right path!

score:0

You are surely on the right track, but in javascript you often have to consider the timing of when things will happen.

document.write() (or rather, anything at the top level of a script) will get executed while the page is getting loaded.

But I bet your data is loaded asynchronously (probably with d3.csv), so you won't have a crossfilter object until a bit later. You haven't shown these parts but that's the usual way to use crossfilter and dc.js.

So you will need to modify the page after it's loaded. D3 is great for this! (The straight javascript way to do this particular thing isn't much harder.)

You should be able to leave the <p> tag where it is, remove the extra <script> tag, and then, in the function which creates timeDim:

d3.select('#minStaffPizzaTimeName').text(minStaffPizzaTimeName);

This looks for the element with that ID and replaces its content with the value you have computed.

General problem solving tools

You can use the dev tools dom inspector to make sure that the p tag exists with id minStaffPizzaTimeName.

You can also use

console.log(minStaffPizzaTimeName)

to see if you are fetching the data correctly.

It's hard to tell without a running example but I think you will want to define your dimension using the PizzaTime only, and convert it from a string to a number:

var timeDim = ndx.dimension(function(d) {
    return +d.PizzaTime;
});

Then timeDim.bottom(1)[0] should give you the row of your original data with the lowest value of PizzaTime. Adding .Name to that expression should retrieve the name field from the row object.

But you might have to poke around using console.log or the interactive debugger to find the exact expression that works. It's pretty much impossible to use dc.js or D3 without these tools, so a little investment in learning them will pay off big time.


Related Query

More Query from same tag