JSFiddle - React, Tailwind, and code Playground

by A B Jones

JavaScript

console.log('line test')

var dataPointsPath1 = [
{x:100,y:100},
{x:600,y:100},
{x:600,y:300},
{x:100,y:300},
{x:100,y:100}
];

var dataPointsCircle1 = [
{x:150,y:200,radius:10},
{x:350,y:200,radius:15},
{x:550,y:200,radius:20}
]


var dataPointsPath2 = [
{x:60,y:60},
{x:600,y:60},
{x:600,y:300},
{x:60,y:300},
{x:60,y:60}
];

var dataPointsCircle2 = [
{x:110,y:200,radius:10},
{x:310,y:200,radius:15},
{x:510,y:200,radius:20}
]

var thisContainer = d3.select('body').append('svg')
    .attr('width', 1600)
    .attr('height', 1600)

function createRects(data, colour) {
  var straight = d3.svg.line()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })
  

  thisContainer
    .append("path")
    .attr("d", straight(data))
    .style("fill", colour)
    .style("opacity", 1)
    .style("stroke", "black")
    .style("stroke-width", "2")
    .on('click', function(d) {
      console.log(d);
    })
}

function createHoles(data) {
  thisContainer.selectAll('.circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', function(d) {
      console.log(d)
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    })
    .attr('r', function(d) {
      return d.radius
    })
    .style("stroke", "black")
    .style("stroke-width", "2")
    .style("fill", "white")
}
createRects(dataPointsPath2, 'blue');
createHoles(dataPointsCircle2);
createRects(dataPointsPath1, 'red');
createHoles(dataPointsCircle1);