Robot Factory: 2월 2023

>> 웹소켓 json 수신

   const socket = new WebSocket('ws://localhost:8080');

      socket.onmessage = function(event) {

//

//

>>>>>>>>>>>>>>>>

<!DOCTYPE html>
<html>
  <head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>
  <body>
    <svg id="bar-chart"></svg>
    <script>
      const socket = new WebSocket('ws://localhost:8080');

      socket.onmessage = function(event) {
        const data = JSON.parse(event.data);

        const svg = d3.select('#bar-chart');
        const margin = { top: 20, right: 20, bottom: 30, left: 40 };
        const width = +svg.attr('width') - margin.left - margin.right;
        const height = +svg.attr('height') - margin.top - margin.bottom;

        const x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
        const y = d3.scaleLinear().rangeRound([height, 0]);

        const g = svg.append('g')
          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

        x.domain(data.map(function(d) { return d.letter; }));
        y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

        g.append('g')
          .attr('class', 'axis axis--x')
          .attr('transform', 'translate(0,' + height + ')')
          .call(d3.axisBottom(x));

        g.append('g')
          .attr('class', 'axis axis--y')
          .call(d3.axisLeft(y).ticks(10, '%'))
          .append('text')
            .attr('transform', 'rotate(-90)')
            .attr('y', 6)
            .attr('dy', '0.71em')
            .attr('text-anchor', 'end')
            .text('Frequency');

        g.selectAll('.bar')
          .data(data)
          .enter().append('rect')
            .attr('class', 'bar')
            .attr('x', function(d) { return x(d.letter); })
            .attr('y', function(d) { return y(d.frequency); })
            .attr('width', x.bandwidth())
            .attr('height', function(d) { return height - y(d.frequency); });
      };
    </script>
  </body>
</html>

Robot Factory

2023년 2월 1일 수요일

D3.js websocket example1