Civil War Part 2 - Adding Confederate and Border States

civilwar2.rst

Civil War Part 2 - Adding Confederate and Border States

Demo

https://codetricity.github.io/d3-maps/

Append Group to svg

Create Group for confederate circles.

const confederateGroup = svg.append('g');

Draw Confederate Circles

const confederateCircles = confederateGroup.selectAll('circle')
.data(confederate)
.enter()
.append('circle')
.style('fill', '#848484')
.attr('cx', (d, i) => i * xScale.bandwidth())
.attr('cy', 300)
.attr('r', 15);

Add Confederate Title

• place title 50 pixels above the y coordinate of the Confederate circles

Add Tooltip Labels

1. put 20 pixels above the center of each Confederate circle

Remove Text Label on mouseout

Add Border States

Add Titles and Transitions