more minimaler cubism.js horizon chart from json example

问题

Following up on a previous question... I've got my minimal horizon chart example much more minimaler than before ( minimal cubism.js horizon chart example (TypeError: callback is not a function) )

        <body> 
                <div class="mag"></div>
                <script type="text/javascript">

var myContext = cubism.context();

var myMetr = myContext.metric(function(start, stop, step, callback) {
        d3.json("../json/600s.json.php?t0=" + start/1000 + "&t1=" + stop/1000 + "&ss=" + step/1000, function(er, dt) {
                if (!dt) return callback(new Error("unable to load data, or has NaNs"));
                callback(null, dt.val);
        });
});

var myHoriz = myContext.horizon()
        .metric(myMetr);

d3.select(".mag")
        .call(myHoriz);

                </script>
        </body>

The d3.json() bit calls a server side .php that I've written that returns a .json version of my measurements. The .php takes the start, stop, step (which cubism's context.metric() uses) as the t0, t1, and ss items in its http query string and sends back a .json file. The divides by 1000 are because I made my .php expect parameters in s, not ms. And the dt.val is because the actual array of my measurements is in the "val" member of the json output, e.g.

{
    "other":"unused members...",
    "n":5,
    "val":[
        22292.078125,
        22292.03515625,
        22292.005859375,
        22292.02734375,
        22292.021484375
    ]
}

The problem is, now that I've got it pared down to (I think) the bare minimum, AND I actually understand all of it instead of just pasting from other examples and hoping for the best (in which scenario, most things I try to change just break things instead of improving them), I need to start adding parameters and functions back to make it visually more useful.

Two problems first of all are, this measurement hovers all day around 22,300, and only varies +/- 10 maybe all day, so the graph is just a solid green rectangle, AND the label just says constantly "22k".

I've fixed the label with .format(d3.format(".3f")) (versus the default .2s which uses SI metric prefixes, thus the "22k" above).

What I can't figure out is how to use either axis, scale, extent, or what, so that this only shows a range of numbers that are relevant to the viewer. I don't actually care about the positive-green and negative-blue and darkening colours aspects of the horizon chart. I just used it as proof-of-concept to get the constantly-shifting window of measurements from my .json data source, but the part I really need to keep is the serverDelay, step, size, and such features of cubism.js that intelligently grab the initial window of data, and incrementally grab more via the .json requests.

So how do I keep the cubism bits I need, but usefully change my all-22300s graph to show the important +/- 10 units?

update re Scott Cameron's suggestion of horizon.extent([22315, 22320])... yes I had tried that and it had zero effect. Other things I've changed so far from "minimal" above...

var myHoriz = myContext.horizon()
        .metric(myMetr)
        .format(d3.format(".2f"))
        .height(100)
        .title("base1 (m): ")
        .colors(["#08519c", "#006d2c"])
//      .extent([22315, 22320])           // no effect with or without this line
;

I was able to improve the graph by using metric.subtract inserting it above the myHoriz line like so: (but it made the numerical label useless now):

var myMetr2 = myMetr.subtract(22315);

var myHoriz = myContext.horizon()
        .metric(myMetr2)
        .format...(continue as above)

All the examples seem so concise and expressive and work fine verbatim but so many of the tweaks I try to make to them seem to backfire, I'm not sure why that is. And similarly when I refer to the API wiki... maybe 4 out of 5 things I use from the API work immediately, but then I always seem to hit one that seems to have no effect, or breaks the chart completely. I'm not sure I've wrapped my head around how so many of the parameters being passed around are actually functions, for one thing.

Next hurdles after this scale/extent question, will be getting the horizontal time axis back (after having chopped it out to make things more minimal and easier to understand), and switching this from an area-looking graph to more of a line graph.

Anyway, all direction and suggestion appreciated.

Here's the one with the better vertical scale, but now the numerical label isn't what I want:

回答1:

Have you tried horizon.extent? It lets you specify the [min, max] value for the horizon chart. By default, a linear scale will be created to map values within the extent to the pixels within the chart's height (specified with `horizon.height or default to 30 pixels).

来源：https://stackoverflow.com/questions/18522085/more-minimaler-cubism-js-horizon-chart-from-json-example

标签

json

d3.js

cubism.js