JSFiddle - React, Tailwind, and code Playground

by theneuralbit

HTML

<div id="panel"></div>

JavaScript

var svg = d3.select('#panel').append('svg')
  .attr('width', '100%')
  .attr('height', '500');

var p = [
    {x: 0,   y: 0},
    {x: 0,   y: 200},
    {x: 200, y: 200},
    {x: 200, y: 0}
    ];

svg.selectAll('.vertex')
  .data(p)
  .enter()
  .append('svg:circle')
  .attr('cx', function(d) {return d.x})
  .attr('cy', function(d) {return d.y})
  .attr('r', 3)
  .attr('fill', 'gray')
  .attr('stroke-fill', 'black')
  .attr('stroke', 1)
  .attr('class', 'vertex');

svg.append('svg:circle')
  .attr('cx', p[0].x)
  .attr('cy', p[0].y)
  .attr('r', 3)
  .attr('fill', 'red')
  .attr('stroke-fill', 'black')
  .attr('stroke', 1)
  .attr('id', 'point');

svg.select('#point');
  .transition()
  .duration(2000)
  .attr('cx', p[3].x)
  .attr('cy', p[3].y);