D3 Examples - D3 Example: zoom, pan, and axis rescale

D3 Example: zoom, pan, and axis rescale

Drag on the canvas to translate/pan the graph.

double-click on the canvas to zoom in

shift-double-click on the canvas to zoom out

Drag on one of the X or Y axis numeric labels to re-scale that axis

click on a data point to select it

drag a selected data point up or down to change it's Y value

enter the delete or backspace key to delete a selected data point

hold the ALT/Option key down and click an empty area of the graph to add a data point

Most of the UI should also work with the touch events generated by a tablet or SmartPhone.

D3 References:

D3 Tutorials:

External D3 Tutorials

SVG Graphics

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>One Graph</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="simple-graph.js"></script>
    <style type="text/css">
      body { font: 13px sans-serif; }
      rect { fill: #fff; }
      ul {
        list-style-type: none;
        margin: 0.5em 0em 0.5em 0em;
        width: 100%; }
        ul li {
          display: table-cell;
          vertical-align: middle;
          margin: 0em;
          padding: 0em 1em; }
      .axis { font-size: 1.5em; }
      .chart {
        background-color: #F7F2C5;
        width: 960px;
        height: 500px; }
      circle, .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 2px; }
      circle {
        fill: white;
        fill-opacity: 0.2;
        cursor: move; }
        circle.selected {
          fill: #ff7f0e;
          stroke: #ff7f0e; }
        circle:hover {
          fill: #ff7f0e;
          stroke: #707f0e; }
        circle.selected:hover {
          fill: #ff7f0e;
          stroke: #ff7f0e; }
    </style>
  </head>
  <body>
    <div id="chart1" class="chart"></div>
    <script type="text/javascript">
      graph = new SimpleGraph("chart1", {
          "xmax": 60, "xmin": 0,
          "ymax": 40, "ymin": 0, 
          "title": "Simple Graph1",
          "xlabel": "X Axis",
          "ylabel": "Y Axis"  
        });
    </script>
  </body>
</html>
​
​
    