Scatter Plot Matrix

Title: Interactive Scatter Plot Lattice with Vital Signs Data

Languages: javascript

Libraries: scatterPlotMatrix

Description: A paneled series of scatter plots plotting every measure against every other measure

Tags: interactive, scatter plot, lattice, matrix, bivariate

Data: ../../data/iris.csv, ../../data/safetyData/VS.csv, ../0016-safety-outlier-explorer-hys-law/hy.csv

Code: index.js

Results: example.html

<!DOCTYPE html>
<html>
    <head>
        <title>Interactive Scatter Plot Matrix</title>

* {
                padding: 0;
                margin: 0;
                font-family: 'Open Sans', Helvetica, Arial, sans-serif;
            }

#title {
                width: 96%;
                margin: 2%;
                border-bottom: 1px solid lightgray;
                font-weight: lighter;
                font-size: 250%;
            }

/*tabs*/
            div.tab {
                width: 96%;
                margin: 2%;
                font-weight: lighter;
                font-size: 150%;
                overflow: hidden;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            div.tab button {
                background-color: inherit;
                float: left;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 14px 16px;
                transition: 0.3s;
            }
            div.tab button:hover {
                background-color: #ddd;
            }
            div.tab button.active {
                background-color: #ccc;
            }
            .tabcontent {
                display: none;
                padding: 6px 12px;
                border: 1px solid #ccc;
                border-top: none;
            }

/*scatter plots*/
            svg {
                font: 10px sans-serif;
                padding: 10px;
            }

.axis,
            .frame {
                shape-rendering: crispEdges;
            }

.axis line {
                stroke: #ddd;
            }

.axis path {
                display: none;
            }

.cell text {
                font-weight: bold;
                text-transform: capitalize;
            }

.frame {
                fill: none;
                stroke: #aaa;
            }

circle {
                fill-opacity: .7;
            }

circle.hidden {
                fill: #ccc !important;
            }

.extent {
                fill: #000;
                fill-opacity: .125;
                stroke: #fff;
            }
        </style>
    </head>

<body>
        <div class="tab">
            <button class="tablinks active" onclick="openTab(event, 'iris')">Iris Measurements</button>
            <button class="tablinks" onclick="openTab(event, 'VS')">Vital Signs</button>
            <button class="tablinks" onclick="openTab(event, 'hy')">Liver Function Tests</button>
        </div>