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

D3 Example: zoom, pan, and axis rescale

This example displays two independent graphs and is an extension of the original example.

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>Two Graphs</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; 
        padding: 0px; }
        ul li {
          display: table-cell;
          vertical-align: middle;
          margin: 0em;
          padding-right: 1em; }
      .axis {
        font-size: 1.3em; }
      .chart {
        background-color: #F7F2C5;
        width: 475px;
        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>
    <ul>
      <li><div id="chart1" class="chart"></div></li>
      <li><div id="chart2" class="chart"></div></li>
    </ul>
    <script type="text/javascript">
​
      var graph1 = simpleGraph("#chart1");
​
      var graph2 = simpleGraph().title("Simple Graph2").xmax(20).ymax(10);
      d3.select("#chart2").call(graph2);
 
   </script>
  </body>
</html>
​
​
​
    