Old school D3 from simpler times

All examples By author By category About

jrbalsano

Full window Github gist

Graphing Spike

<!doctype html>
<html>
    <head>
        <title>Graphing Spike</title>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined.js"></script>
        <script src="./d3-scatter.js"></script>
        <style>
            body {
                font: 11px sans-serif;
            }

.axis path,
            .axis line {
                fill: none;
                stroke: #ccc;
                shape-rendering: crispEdges;
            }

.label {
                color: #ccc;
            }

.dot {
            }

.tooltip {
                position: absolute;
                width: 200px;
                height: 28px;
                pointer-events: none;
                background: white;
            }
            svg {
                background: #333;
            }
        </style>
    </head>
    <body>
        <div>
            <label>
                <input type="text" class="points" value="10000"></input>
                Number of points to generate
            </label>
            <button class="points">Generate Data</button>
        </div>

<svg class="d3-svg"></svg>
        <button class="d3-start" disabled>D3 Start</button>
        <pre class="d3-timing"></pre>

<div class="dy-div"></div>
        <button class="dy-start" disabled>Dygraph Start</button>
        <pre class="dy-timing"></pre>

<canvas class="d3-canvas" height="500" width="960"></canvas>
        <button class="d3-canvas-start" disabled>D3 Canvas Start</button>
        <pre class="d3-canvas-timing"></pre>
    </body>
</html>

xxxxxxxxxx
 
<!doctype html>
<html>
    <head>
        <title>Graphing Spike</title>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined.js"></script>
        <script src="./d3-scatter.js"></script>
        <style>
            body {
                font: 11px sans-serif;
            }
​
            .axis path,
            .axis line {
                fill: none;
                stroke: #ccc;
                shape-rendering: crispEdges;
            }
​
            .label {
                color: #ccc;
            }
​
            .dot {
            }
​
            .tooltip {
                position: absolute;
                width: 200px;
                height: 28px;
                pointer-events: none;
                background: white;
            }
            svg {
                background: #333;
            }
        </style>
    </head>
    <body>
        <div>
            <label>
                <input type="text" class="points" value="10000"></input>
                Number of points to generate
            </label>
            <button class="points">Generate Data</button>
        </div>
​
​
        <svg class="d3-svg"></svg>
        <button class="d3-start" disabled>D3 Start</button>
        <pre class="d3-timing"></pre>
​
        <div class="dy-div"></div>
        <button class="dy-start" disabled>Dygraph Start</button>
        <pre class="dy-timing"></pre>
​
        <canvas class="d3-canvas" height="500" width="960"></canvas>
        <button class="d3-canvas-start" disabled>D3 Canvas Start</button>
        <pre class="d3-canvas-timing"></pre>
    </body>
</html>
​
    

Modified http://code.jquery.com/jquery-1.11.3.min.js to a secure url

Modified http://code.jquery.com/jquery-migrate-1.2.1.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined.js to a secure url

https://code.jquery.com/jquery-1.11.3.min.js

https://code.jquery.com/jquery-migrate-1.2.1.min.js

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined.js