Info

NVD3 v0.0.1 (D3.js) (https://raw.github.com/novus/nvd3/master/nv.d3.min.js)

Preparation code

<style>
/********************
* TOOLTIP CSS
*/

.nvtooltip {
        position: absolute;
        background-color: rgba(255,255,255,1);
        padding: 10px;
        border: 1px solid #ddd;
        z-index: 10000;

        font-family: Arial;
        font-size: 13px;

        transition: opacity 500ms linear;
        -moz-transition: opacity 500ms linear;
        -webkit-transition: opacity 500ms linear;

        transition-delay: 500ms;
        -moz-transition-delay: 500ms;
        -webkit-transition-delay: 500ms;

        -moz-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
        -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
        box-shadow: 4px 4px 8px rgba(0,0,0,.5);

        -moz-border-radius: 10px;
        border-radius: 10px;

        pointer-events: none;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
}

.nvtooltip h3 {
        margin: 0;
        padding: 0;
        text-align: center;
}

.nvtooltip p {
        margin: 0;
        padding: 0;
        text-align: center;
}

.nvtooltip span {
        display: inline-block;
        margin: 2px 0;
}

/**********
*  Axes
*/

.nvd3 .axis path {
        fill: none;
        stroke: #000;
        stroke-opacity: .75;
        shape-rendering: crispEdges;
}

.nvd3 .axis path.domain {
        stroke-opacity: .75;
}

.nvd3 .axis line {
        fill: none;
        stroke: #000;
        stroke-opacity: .25;
        shape-rendering: crispEdges;
}

.nvd3 .axis line.zero {
        stroke-opacity: .75;
}

.nvd3 .axis .axisMaxMin text {
        font-weight: bold;
}

/**********
* Lines
*/

.nvd3 .groups path.line {
        fill: none;
        stroke-width: 2.5px;
        stroke-linecap: round;
        shape-rendering: geometricPrecision;
}

.nvd3 .line.hover path {
        stroke-width: 6px;
}

.nvd3.line .nvd3.scatter .groups .point {
        fill-opacity: 0;
        stroke-opacity: 0;
}

.nvd3 .groups .point {
        transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
        -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
        -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
}

.nvd3.scatter .groups .point.hover,
.nvd3 .groups .point.hover {
        stroke-width: 20px;
        fill-opacity: .5 !important;
        stroke-opacity: .5 !important;
}

.nvd3 .point-paths path {
        stroke: #aaa;
        stroke-opacity: 0;
        fill: #eee;
        fill-opacity: 0;
}

.nvd3 .indexLine {
        cursor: ew-resize;
}
</style>
<style>
#svgtest {
        width: 500px;
        height: 300px;
        background-color: #EEE;
}
</style>
<svg id="svgtest"></svg>
<script src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/nv.d3.min.js"></script>
<script>
/* NVD3 */

var sin = [], cos = [];

for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
}

var nvd3_data = [{
    values: sin,
    key: 'Sine',
    color: '#FF0000'
}, {
    values: cos,
    key: 'Cosine',
    color: '#0000FF'
}];
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

nv.addGraph(function() {
    d3.select('#svgtest')
        .datum(nvd3_data)
        .call(nv.models.lineChart());
});

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Zero on 3rd July 2012
• Revision 2: published by Zero on 3rd July 2012
• Revision 3: published by Zero on 3rd July 2012
• Revision 4: published on 9th January 2013
• Revision 5: published on 6th February 2013
• Revision 6: published 2 weeks ago

0 comments