title: d3.js realtime updating svg line with python websocket data
body: <p>I'm new to d3.js/javascript and web oriented  programming. </p>
  
  <p><strong>My goal is update the existing chart with new values through a websocket.</strong> </p>
  
  <p>Note: In this example I alredy have a javascript array "var" and I need to add new values obtained with a websocket, but is not mandatory the array "var" could be also empty. My goal is draw data received through websocket <strong>ws</strong>.</p>
  
  <p>I received correctly the values from a python websocket server (code1) but I still don't understand how to draw new elements on d3.js graph. 
  I read several doc about update pattern example  like <a href="https://bl.ocks.org/mbostock/3808218" rel="noreferrer">https://bl.ocks.org/mbostock/3808218</a> 
  but still doesn't get a working solution using d3.js enter()/update(). Code2 is a working example plus the javascript code for the websocket. I correctly get new data and store in var "close" "when". Could anyone help to modified the html code to plot new data? Thanks for help, regards.</p>
  
  <p><strong><em>Code1: working python server websocket</em></strong> </p>
  
  <pre><code>#!/usr/bin/env python
  import asyncio
  import datetime
  import random
  import websockets
  import numpy as np
  import json
  
  IP = '192.168.10.224'
  PORT = 5678
  
  
  def format_time():
      t = datetime.datetime.now().time()
      s = t.strftime('%H:%M:%S.%f')
      return s[:-3]
  
  async def time(websocket, path):
      while True:
          #now = datetime.datetime.utcnow().isoformat() + 'Z'
          data = {'datetime': str(format_time()),
                  'ticker': 'ticker',
                  'value': str(random.randint(100,1000)),
                  'volume': str(random.randint(1,10))}
          await websocket.send(json.dumps(data))
          await asyncio.sleep(random.random() * 3)
  
  start_server = websockets.serve(time, IP, PORT)
  
  asyncio.get_event_loop().run_until_complete(start_server)
  asyncio.get_event_loop().run_forever()
  </code></pre>
  
  <p><strong><em>Code2: html page d3.js</em></strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;style&gt; /* set the CSS */
  
   .line {
     fill: none;
     stroke: steelblue;
     stroke-width: 2px;
   }
  
   &lt;/style&gt;
   &lt;body&gt;
  
  
  
      &lt;!-- load the d3.js library --&gt;
       &lt;script src="d3/d3.min.js"&gt;&lt;/script&gt;
       &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
       &lt;script&gt;
  
       //working websocket get new data and print for debug purpose on javascript console
       var ws = new WebSocket("ws://192.168.10.224:5678/")
       ws.onmessage = function (event) {
       var messages = document.getElementsByTagName('ul')[0],
           message = document.createElement('li'),
           content = document.createTextNode(event.data);
       //console.log(typeof(event.data));
       var obj = jQuery.parseJSON(event.data);
       var close = obj.volume
       var when = obj.datetime;
       console.log(close,when);
       };
  
       // set the dimensions and margins of the graph
       var margin = {top: 20, right: 20, bottom: 30, left: 50},
           width = 960 - margin.left - margin.right,
           height = 500 - margin.top - margin.bottom;
  
       // parse the date / time
       var parseTime = d3.timeParse("%H:%M:%S.%L");
  
       // set the ranges
       var x = d3.scaleTime().range([0, width]);
       var y = d3.scaleLinear().range([height, 0]);
  
       // define the line
       var valueline = d3.line()
           .x(function(d) { return x(d.date); })
           .y(function(d) { return y(d.close); });
  
       // append the svg obgect to the body of the page
       // appends a 'group' element to 'svg'
       // moves the 'group' element to the top left margin
       var svg = d3.select("body").append("svg")
           .attr("width", width + margin.left + margin.right)
           .attr("height", height + margin.top + margin.bottom)
         .append("g")
           .attr("transform",
                 "translate(" + margin.left + "," + margin.top + ")");
  
  
       var data = [
         {"date":"9:22:43.111","close":1.98},
         {"date":"10:22:43.222","close":5.98},
         {"date":"11:32:43.333","close":7.00},
         {"date":"11:52:43.444","close":8.70},
         {"date":"14:52:43.444","close":10.28},
         {"date":"15:52:43.444","close":16.70},
         {"date":"16:12:43.222","close":10.98},
         {"date":"16:12:43.222","close":3.44},
         {"date":"17:32:43.111","close":4.34},
       ];
  
       //per ogni elemento converto la data
       data.forEach(function(d) {
         d.date = parseTime(d.date);
         d.close = +d.close;
       }
       );
  
  
         // Scale the range of the data
         x.domain(d3.extent(data, function(d) { return d.date; }));
         y.domain([0, d3.max(data, function(d) { return d.close; })]);
  
         // Add the valueline path.
         svg.append("path")
             .data([data])
             .attr("class", "line")
             .attr("d", valueline);
  
         // Add the X Axis
         svg.append("g")
             .attr("transform", "translate(0," + height + ")")
             .call(d3.axisBottom(x)
               .ticks(d3.timeMinute.every(30))
       );
  
         // Add the Y Axis
         svg.append("g")
             .call(d3.axisLeft(y));
  
  
       &lt;/script&gt;
       &lt;/body&gt;
  </code></pre>