Old school D3 from simpler times

All examples By author By category About

BastiTee

Full window Github gist

Bonner Vornamen 2017 (Embedded)

<!doctype html>

<head>
    <meta charset="utf-8">
    <base target="_blank">
    <title>A testbed for div-based integration</title>
    <script src="https://bastitee.github.io/d3-workbench-ghp/0.9.1/d3-wb-distall.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300');
        #figure {
            position: relative;
            font-family: 'Roboto Condensed', monospace;
        }
        button {
            font-family: 'Roboto Condensed', monospace;
        }

.figures {
            height: 800px;
            width: 50%;
        }

.text {
            width: 50%;
        }
    </style>
</head>

<body>
    <h2>A testbed for div-based integration</h2>
    <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div id="figure" class="figures">
        <svg id="svg-figure"></svg>
        <script src="https://cdn.jsdelivr.net/gh/bastitee/19c84cfa1dc21a5167d1de25734e6294/raw/c4ce58cab8b71235b29157a97a79a655610f36cb/svg.js" embedded="true" datapath="." svgid="svg-figure" divid="figure"></script>
    </div>
    <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

</body>

xxxxxxxxxx
 
<!doctype html>
​
<head>
    <meta charset="utf-8">
    <base target="_blank">
    <title>A testbed for div-based integration</title>
    <script src="https://bastitee.github.io/d3-workbench-ghp/0.9.1/d3-wb-distall.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300');
        #figure {
            position: relative;
            font-family: 'Roboto Condensed', monospace;
        }
        button {
            font-family: 'Roboto Condensed', monospace;
        }
​
        .figures {
            height: 800px;
            width: 50%;
        }
​
        .text {
            width: 50%;
        }
    </style>
</head>
​
<body>
    <h2>A testbed for div-based integration</h2>
    <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div id="figure" class="figures">
        <svg id="svg-figure"></svg>
        <script src="https://cdn.jsdelivr.net/gh/bastitee/19c84cfa1dc21a5167d1de25734e6294/raw/c4ce58cab8b71235b29157a97a79a655610f36cb/svg.js" embedded="true" datapath="." svgid="svg-figure" divid="figure"></script>
    </div>
    <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
​
</body>
​
    

Updated missing url https://cdn.rawgit.com/BastiTee/19c84cfa1dc21a5167d1de25734e6294/raw/c4ce58cab8b71235b29157a97a79a655610f36cb/svg.js to https://cdn.jsdelivr.net/gh/bastitee/19c84cfa1dc21a5167d1de25734e6294/raw/c4ce58cab8b71235b29157a97a79a655610f36cb/svg.js

https://bastitee.github.io/d3-workbench-ghp/0.9.1/d3-wb-distall.min.js

https://cdn.rawgit.com/BastiTee/19c84cfa1dc21a5167d1de25734e6294/raw/c4ce58cab8b71235b29157a97a79a655610f36cb/svg.js