D3 Examples - Scatter Plot Matrix

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <title>Interactive Scatter Plot Matrix</title>
​
        <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>
​
        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
        <script type = 'text/javascript' src = 'scatterPlotMatrix.js'></script>
​
​
        <style>
          /*everything*/
            @import url(https://fonts.googleapis.com/css?family = Open+Sans:400,300);
​
            * {
                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>
​
        <div id="iris" class="tabcontent" style = "display:block"></div>
        <div id="VS" class="tabcontent"></div>
        <div id="hy" class="tabcontent"></div>
    </body>
​
    <script defer type = 'text/javascript' src = 'index.js'></script>
</html>
​
    