D3 Examples - Selectable Scatterplot

Selectable Scatterplot

I'm playing with this code adapted largely from the very nice example from http://2011.12devsofxmas.co.uk/2012/01/data-visualisation/

The code remains a bit messy, as I am clearing out parts that I don't need and organizing the remaining code, so please bear with any slight disorganization.

This is best viewed by clicking the link to open this example in a new window so you can see the whole visualization.

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
    
        <title>Data visualisation demo</title>
        <style>
            body
            {
                background-color: #ffffff;
                font-family: sans-serif;
                color: #7c7273;
                font-size: 10px;
            }
            ul
            {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            div
            {
                float: left;
                width: 200px;
 
            }
            .axis text
            {
                fill: #7c7273;
            }
            .axis .domain
            {
                opacity: 0;
            }
            .tick
            {
                stroke: #7c7273;
            }
        </style>
 
        
    </head>
    <body>
        <h1>Visualising Data</h1>
        <svg id="visualisation" width="800" height="600"></svg>
 
        <form id="controls">
            <div>
                <h2>X axis</h2>
                <ul id="x-axis">
                    <li><label><input checked="checked" type="radio" name="x-axis" value="site">Site</label></li>
                    <li><label><input type="radio" name="x-axis" value="pH">pH Values</label></li>
                    <li><label><input type="radio" name="x-axis" value="temp">Temperature</label></li>
                    <li><label><input type="radio" name="x-axis" value="x">X-Value</label></li>
                    <li><label><input type="radio" name="x-axis" value="y">Y-Value</label></li>
                    <li><label><input type="radio" name="x-axis" value="treatment">Treatment</label></li>
                </ul>
            </div>
            <div>
                <h2>Y axis</h2>
                <ul id="y-axis">
                    <li><label><input checked="checked" type="radio" name="y-axis" value="site">Site</label></li>
                    <li><label><input type="radio" name="y-axis" value="pH">pH Values</label></li>
                    <li><label><input checked="checked" type="radio" name="y-axis" value="temp">Temperature</label></li>
                    <li><label><input type="radio" name="y-axis" value="x">X-Value</label></li>
                    <li><label><input type="radio" name="y-axis" value="y">Y-Value</label></li>
                    <li><label><input type="radio" name="y-axis" value="treatment">Treatment</label></li>
                </ul>
            </div>
            <div>
                <h2>Radius</h2>
                <ul id="r-axis">
                    <li><label><input checked="checked" type="radio" name="r-axis" value="site">Site</label></li>
                    <li><label><input  checked="checked" type="radio" name="r-axis" value="pH">pH Values</label></li>
                    <li><label><input type="radio" name="r-axis" value="temp">Temperature</label></li>
                    <li><label><input type="radio" name="r-axis" value="x">X-Value</label></li>
                    <li><label><input type="radio" name="r-axis" value="y">Y-Value</label></li>
                    <li><label><input type="radio" name="r-axis" value="treatment">Treatment</label></li>
                </ul>
            </div>
            <div>
                <h2>Dataset</h2>
                <ul>
                    <li>
                        <select id="dataset">
                            <option value="errordata">Test Data</option>
                        </select>
                    </li>
                    
                </ul>
 
            </div>
        </form>
    </body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="test.js"></script>
</html>
    