Old school D3 from simpler times

All examples By author By category About

bollwyvl

Full window Github gist

Cards

Cards

Shows use of:

contenteditable
various events

Limitations, ways forward

only works in chrome right now
- cross-browser dblclick event?
no pan
- need to use d3.behavior.zoom?

<html>
  <head>
    <title>Card Moving/Editing Proof of Concept</title>
    <style>
      html, body{
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: lightblue;
        font-family: 'Gill Sans MT', 'Gill Sans';
      }
      #root{
        width: 100%;
        height: 100%;
        
      }
      .card{
        height: 150px;
        width: 150px;
        position: absolute;
        background-color: lightyellow;
        overflow-y: auto;
        text-align: center;
        border-radius: 2px;
        padding: 5px;
        box-shadow: -1px 2px 5px 2px rgba(0, 0, 0, .25);
      }
      .card .text{
        height: 100%;
        width: 100%;
      }
      #doc{
        position: fixed;
        right: 10px;
        bottom: 10px;
        text-align: right;
        opacity: .25;
      }
    </style>
  </head>
  <body>
    <div id="doc">
      <p>Double-click the background to make a card</p>
      <p>Double-click a card to edit it</p>
      <p>Zoom with mouse wheel</p>
    </div>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="cards.js" charset="utf-8"></script>
  </body>
</html>

xxxxxxxxxx
 
<html>
  <head>
    <title>Card Moving/Editing Proof of Concept</title>
    <style>
      html, body{
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: lightblue;
        font-family: 'Gill Sans MT', 'Gill Sans';
      }
      #root{
        width: 100%;
        height: 100%;
        
      }
      .card{
        height: 150px;
        width: 150px;
        position: absolute;
        background-color: lightyellow;
        overflow-y: auto;
        text-align: center;
        border-radius: 2px;
        padding: 5px;
        box-shadow: -1px 2px 5px 2px rgba(0, 0, 0, .25);
      }
      .card .text{
        height: 100%;
        width: 100%;
      }
      #doc{
        position: fixed;
        right: 10px;
        bottom: 10px;
        text-align: right;
        opacity: .25;
      }
    </style>
  </head>
  <body>
    <div id="doc">
      <p>Double-click the background to make a card</p>
      <p>Double-click a card to edit it</p>
      <p>Zoom with mouse wheel</p>
    </div>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="cards.js" charset="utf-8"></script>
  </body>
</html>
    

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

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