Civil War Facts

00-civil-war-facts.rst

Civil War Facts

Demo

https://bl.ocks.org/codetricity/b952c44f308e39b526eb9b9d7ab4f147

Files for the demo are included in this gist.

Additional Info

Data from NPS

Civil War Facts: 1861-1865

The Union included the states of Maine, New York, New Hampshire, Vermont, Massachusetts, Connecticut, Rhode Island, Pennsylvania, New Jersey, Ohio, Indiana, Illinois, Kansas, Michigan, Wisconsin, Minnesota, Iowa, California, Nevada, and Oregon. Abraham Lincoln was their President.

The Confederacy included the states of Texas, Arkansas, Louisiana, Tennessee, Mississippi, Alabama, Georgia, Florida, South Carolina, North Carolina and Virginia. Jefferson Davis was their President.

Maryland, Delaware, West Virginia, Kentucky and Missouri were called Border States.

Organize Data in Google Sheet

1. Copy each group into notepad
2. Press return to move each state onto a new line
3. delete comma and extra space
4. select list of states and copy into clipboard
5. select column on Google Sheets
6. paste clipboard into column

Download as CSV

Create Project

Create html, JavaScript files. link to d3.js

Read in CSV

Read in the CSV file and print out contents with console.log

1. start with d3.csv
2. pass file name to the d3.csv function inside of parenthesis
3. close parenthesis
4. chain .then to the end of the closing parenthesis
5. after .then put anonymous function inside of parenthesis

Divide Data into Separate Arrays

1. create empty variables for each array (union, confederate, border)
2. use a for loop to go through the entire array of data
3. push the appropriate state to the end of each array.
4. modify the push in step 3 to check to see if the array is empty. If the array is not empty, then push the datum

let union = [];
let confederate = [];
let border = [];

for (var i=0; i<data.length; i = i+1) {
  if (data[i].union != "") {
    union.push(data[i].union);
  }
  if (data[i].confederate != "") {
    confederate.push(data[i].confederate);
  }
  if (data[i].border != "") {
    border.push(data[i].border);
  }
}
console.log(union);
console.log(confederate);
console.log(border);

Set Up Circle Spacing

xScale = d3.scaleBand()
  .domain(union)
  .range([0, width])
  .padding(0.1);

Bind Union Data to Circles

1. create new variable unionCircles
2. assign the variable to circles on the svg viewport
3. the sequence of steps is:
   1. selectAll - select invisible circles
   2. data - spend the union array to the invisible circles
   3. enter - output the invisible circles that are not in the HTML (which is all the circles at this point)
   4. append - append the circles to the svg viewport

The circles initially have no attributes and will not appear on the web page. You can see the circles in the inspector.

Draw Union Circles

let unionCircles = svg.selectAll('circle')
   .data(union)
   .enter()
   .append('circle')
   .attr('cx', (d, i) => i * xScale.bandwidth())
   .attr('cy', '20%')
   .attr('r', 15);

Adjust Margin of Chart Area

const svg = d3.select('body').append('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight)
  .append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

Change Color and Title

1. change color to Union blue
   1. use .style('fill...
2. add title for Union circles
   1. create civilwar.css
   2. create class title
   3. adjust font and size

Detect Mouseover Event

unionCircles.on('mouseover', function(d, i) {
  console.log('mouse on')
  }

Append Text Element to Screen

unionCircles.on('mouseover', function(d, i) {
  svg.append('text')
    .text(d)

References

https://www.nps.gov/civilwar/facts.htm

https://www.battlefields.org/learn/articles/civil-war-facts

civilwar.css

.state {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 40px;
}

.state-label {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 14px;
}

civilwar.csv

civilwar.js

const width = 1000;
const height = 600;
const margin = {left: 100, right: 100, top: 100, bottom: 100};
const svgWidth = width + margin.left + margin.right;
const svgHeight = height + margin.top + margin.bottom;

const svg = d3.select('body').append('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight)
  .append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);


d3.csv('civilwar.csv').then((data) => {
  console.log(data);
  let union = [];
  let confederate = [];
  let border = [];

  for (var i=0; i<data.length; i = i+1) {
    if (data[i].union != "") {
      union.push(data[i].union);
    }
    if (data[i].confederate != "") {
      confederate.push(data[i].confederate);
    }
    if (data[i].border != "") {
      border.push(data[i].border);
    }
  }

  xScale = d3.scaleBand()
    .domain(union)
    .range([0, width])
    .padding(0.1);

  let unionCircles = svg.selectAll('circle')
    .data(union)
    .enter()
    .append('circle')
    .style('fill', '#2E9AFE')
    .attr('cx', (d, i) => i * xScale.bandwidth())
    .attr('cy', 100)
    .attr('r', 15);

  svg.append('text')
    .text('Union')
    .attr('class', 'state')
    .attr('x', 0)
    .attr('y', 50)
    .attr('text-anchor', 'start');

  unionCircles.on('mouseover', function(d, i) {
    svg.append('text')
      .text(d)
      .attr('x', i * xScale.bandwidth())
      .attr('y', 80)
      .attr('text-anchor', 'middle')
      .attr('class', 'state-label')
      .attr('id', 'stateName');
  });

  unionCircles.on('mouseout', function(d) {
    d3.select('#stateName').remove();
  })
});

index.html

<head>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="civilwar.css">
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
  <script src='civilwar.js'></script>
</body>