JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<div id='wrapper'>
</div>

JavaScript

var svg = d3.select('#wrapper').append('svg');

var rowHeight = 50,
    width = 400,
    xSpacing = 110,
    labelOffset = 18,
    handleWidth = xSpacing / 3;

var xCursor;

function resetCursor() {
    xCursor = xSpacing / 2;   
}

resetCursor();

function drawLabelNode(base, x, y, label, filled) {
    var g = base.append('g'),
        fillColor = filled ? '#000' : '#fff',
        circle = g.append('circle').attr({
            r: 5,
            cx: x,
            cy: y,
            fill: fillColor,
            stroke: '#000',
            'stroke-width': 2
        }),
        text = g.append('text').text(label)
                .attr({
                    'text-anchor': 'middle',
                    x: x,
                    y: y - labelOffset
                });
    return g;
}

var paths = svg.append('g');
paths.append('path')
    .attr({
        fill: 'none',
        stroke: '#000',
        'stroke-width': 2,
        d: 'M' + xCursor + ',' + rowHeight + 'l' + 3 * xSpacing + ',0' +
           'M' + xCursor + ',' + rowHeight + 'c' + handleWidth + ',0,' + (xSpacing - handleWidth) + ',' + rowHeight + ',' + xSpacing + ',' + rowHeight +
            'c' + handleWidth + ',0,' + (xSpacing - handleWidth) + ',' + (-rowHeight) + ',' + xSpacing + ',' + (-rowHeight)
    });

drawLabelNode(svg, xCursor, rowHeight, 'Comittee', true);
xCursor += xSpacing;

drawLabelNode(svg, xCursor, rowHeight, 'House', true);
drawLabelNode(svg, xCursor, rowHeight * 2, 'Citizen', true);
xCursor += xSpacing;

drawLabelNode(svg, xCursor, rowHeight, 'Senate', true);
xCursor += xSpacing;

drawLabelNode(svg, xCursor, rowHeight, 'Law');
xCursor += xSpacing;