JSFiddle - React, Tailwind, and code Playground

by Pablo Navarro

JavaScript

// Size of the figure
var width = 300,
    height = 300;

// Create the svg element
var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

var data = [
    {p: [{x: 100, y: 100}, {x: 200, y: 100}], w: 2, c: 'red'},
    {p: [{x: 100, y: 100}, {x: 150, y: 200}], w: 3, c: 'blue'},
    {p: [{x: 150, y: 200}, {x: 200, y: 100}], w: 1, c: 'green' }
];

var line = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; });

svg.selectAll('path')
   .data(data)
   .enter()
   .append('path')
   .attr('d', function(d) { return line(d.p); })
   .attr('stroke-width', function(d) { return d.w; })
   .attr('stroke', function(d) { return d.c; })
   .on('mouseover', mOver)
  .on('mouseout', function(d) {
     d3.select(this)
         .transition()
         .duration(300)
         .style('stroke-width', d.w);
  });

function mOver(d) {
    d3.select(this)
        .transition()
        .duration(300)
        .style('stroke-width', 6);
}