232 lines
7.6 KiB
HTML
232 lines
7.6 KiB
HTML
<!DOCTYPE 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>
|