nvd3
Version:
A reusable charting library written in d3.js
232 lines (214 loc) • 7.79 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#resetBrushButton {
color: white;
visibility: hidden;
background: gray;
border: 0;
}
#resetSortingButton {
left: 84px;
visibility: hidden;
color: white;
background: gray;
border: 0;
}
</style>
</head>
<body>
<div style="position:absolute; top: 0; left: 0;">
<button id="resetBrushButton" onclick="resetBrush();">Reset Brush</button>
<button id="resetSortingButton" onclick="resetSorting();">Reset Sorting</button>
</div>
<svg id="test" class="myparallelCoordinatechart"></svg>
<script>
function resetBrush() {
chart.filters([]);
chart.active([]);
chart.displayBrush(true);
d3.select("#resetBrushButton").style("visibility", "hidden");
chart.update();
}
function resetSorting() {
var dim = chart.dimensionData();
dim.map(function (d) { return d.currentPosition = d.originalPosition; });
dim.sort(function (a, b) { return a.originalPosition - b.originalPosition; });
chart.dimensionData(dim);
d3.select("#resetSortingButton").style("visibility", "hidden");
chart.update();
}
nv.addGraph(function () {
var dim = dimensions();
chart = nv.models.parallelCoordinatesChart()
.dimensionData(dim)
.displayBrush(false)
.lineTension(0.85);
var data = mydata();
d3.select('#test')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('brushEnd', function (e) {
d3.select("#resetBrushButton").style("visibility", "visible");
});
chart.dispatch.on('dimensionsOrder', function (e, b) {
if (b) {
d3.select("#resetSortingButton").style("visibility", "visible");
}
});
// update chart data values randomly
setInterval(function () {
data[0].values.P1 = Math.floor(Math.random() * 100);
chart.update();
}, 4000);
// update chart data dimension randomly
setInterval(function () {
var element = {
key: "P7",
format: d3.format("p"),
tooltip: "year",
}
if (dim.length === 7) {
dim.splice(dim.indexOf(element), 1);
} else {
dim.push(element);
}
chart.dimensionData(dim);
chart.update();
}, 10000);
return chart;
});
function dimensions() {
return [
{
key: "P1",
format: d3.format("0.5f"),
tooltip: "economy (mpg)",
},
{
key: "P2",
format: d3.format("e"),
tooltip: "cylinders",
},
{
key: "P3",
format: d3.format("g"),
tooltip: "displacement (cc)",
},
{
key: "P4",
format: d3.format("d"),
tooltip: "power (hp)",
},
{
key: "P5",
format: d3.format(""),
tooltip: "weight (lb)",
},
{
key: "P6",
format: d3.format("%"),
tooltip: "0-60 mph (s)",
},
{
key: "P7",
format: d3.format("p"),
tooltip: "year",
}
];
}
function mydata() {
return [
{
name: "Current design point",
values: {
"P1": "13",
"P2": "8",
"P3": "360",
"P4": "175",
"P5": "3821",
"P6": "11",
"P7": "73"
},
color: "red",
strokeWidth: 2
},
{
name: "DP1",
values: {
"P1": "15",
"P2": "8",
"P3": "390",
"P4": "190",
"P5": "3850",
"P6": "8.5",
"P7": "70"
},
color: "blue",
strokeWidth: 1
},
{
name: "DP2",
values: {
"P1": "17",
"P2": "8",
"P3": "304",
"P4": "150",
"P5": "3672",
"P6": "11.5",
"P7": "72"
},
color: "blue",
strokeWidth: 2
},
{
name: "DP3",
values: {
"P1": "20.2",
"P2": "6",
"P3": "232",
"P4": "",
"P5": "3265",
"P6": "18.2",
"P7": "79"
},
color: "blue",
strokeWidth: 1
},
{
name: "DP4",
values: {
"P1": "18.1",
"P2": "6",
"P3": "258",
"P4": "120",
"P5": "3410",
"P6": "15.1",
"P7": "78"
},
color: "blue",
strokeWidth: 1
}
];
}
</script>
</body>
</html>