d3.js realtime updating svg line with python websocket data

Question

I'm new to d3.js/javascript and web oriented programming.

My goal is update the existing chart with new values through a websocket.

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 ws.

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 https://bl.ocks.org/mbostock/3808218 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.

Code1: working python server websocket

#!/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()

Code2: html page d3.js

<!DOCTYPE html>
 <meta charset="utf-8">
 <style> /* set the CSS */

 .line {
   fill: none;
   stroke: steelblue;
   stroke-width: 2px;
 }

 </style>
 <body>



    <!-- load the d3.js library -->
     <script src="d3/d3.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

     <script>

     //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));


     </script>
     </body>

egariM · Accepted Answer

a friend of mine solved the problem! A chunk of data already inside array data drawline() other data coming across the websocket and function updateLine() is called! Remember to change the local ip address in html code. Enjoy :)

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

</style>
<body>

<!-- load the d3.js library -->     
<script src="d3/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

//websocket get new data on close and when
var ws = new WebSocket("ws://192.168.1.118: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);
    var a = {"date":parseTime(when),"close":close};
    data.push(a);
    console.log(data);
    updateLine(data);
};

// Preparo la prima sequenza di dati

var data = [
  {"date":"9:22:43.111","close":1.98},
  {"date":"9:23:43.111","close":2},
/*
  {"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},
*/
];

// parse the date / time
var parseTime = d3.timeParse("%H:%M:%S.%L");

//per ogni elemento converto la data
data.forEach(function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
});

// Esempio di riferimento per il funzionamento
//http://bl.ocks.org/d3noob/6bd13f974d6516f3e491

// d3js 
// 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;

// Set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// Define the axes
var xAxis = d3.axisBottom(x)
    .ticks(d3.timeMinute.every(30));

var yAxis = d3.axisLeft(y);

// Define the line
var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

// append the svg object 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 + ")");

// funzione per prmo draw
function drawLine(line_data)
{
    // Scale the range of the data
    x.domain(d3.extent(line_data, function(d) { return d.date; }));
    y.domain([0, d3.max(line_data, function(d) { return d.close; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(line_data));

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
}

// funzione per aggiornamento
function updateLine(line_data)
{
    // Scale the range of the data
    x.domain(d3.extent(line_data, function(d) { return d.date; }));
    y.domain([0, d3.max(line_data, function(d) { return d.close; })]);

    // Select the section we want to apply our changes to
    var svg = d3.select("body").transition();

    // Make the changes
    svg.select(".line")   // change the line
            .duration(250)
            .attr("d", valueline(line_data));
    svg.select(".x.axis") // change the x axis
            .duration(250)
            .call(xAxis);
    svg.select(".y.axis") // change the y axis
            .duration(250)
            .call(yAxis);
}


// Disegno i primi dati
drawLine(data);

// Preparo la prima sequenza di dati
/*
var data = [
  {"date":"9:22:43.111","close":2.98},
  {"date":"10:22:43.222","close":3.98},
  {"date":"11:32:43.333","close":4.00},
  {"date":"11:52:43.444","close":7.70},
  {"date":"14:52:43.444","close":11.28},
  {"date":"15:52:43.444","close":15.70},
  {"date":"16:12:43.222","close":12.98},
  {"date":"16:12:43.222","close":2.44},
  {"date":"17:32:43.111","close":1.34},
];

// parse the date / time
var parseTime = d3.timeParse("%H:%M:%S.%L");

//per ogni elemento converto la data
data.forEach(function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
});

// Aggiorno i dati
updateLine(data);
*/
</script>
</body>

d3.js realtime updating svg line with python websocket data

Tags:

python

javascript

websocket

svg

d3.js

egariM

1 Answers

egariM

Recent Activity

Donate For Us

d3.js realtime updating svg line with python websocket data

Tags:

python

javascript

websocket

svg

d3.js

egariM

1 Answers

egariM

Related questions

Recent Activity

Donate For Us