https://bl.ocks.org/codetricity/b952c44f308e39b526eb9b9d7ab4f147
Files for the demo are included in this gist.
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.
- Copy each group into notepad
- Press return to move each state onto a new line
- delete comma and extra space
- select list of states and copy into clipboard
- select column on Google Sheets
- paste clipboard into column
Create html, JavaScript files. link to d3.js
Read in the CSV file and print out contents with console.log
- start with d3.csv
- pass file name to the d3.csv function inside of parenthesis
- close parenthesis
- chain .then to the end of the closing parenthesis
- after .then put anonymous function inside of parenthesis
- create empty variables for each array (union, confederate, border)
- use a
for
loop to go through the entire array of data push
the appropriate state to the end of each array.- 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);
xScale = d3.scaleBand()
.domain(union)
.range([0, width])
.padding(0.1);
- create new variable
unionCircles
- assign the variable to circles on the svg viewport
- the sequence of steps is:
- selectAll - select invisible circles
- data - spend the union array to the invisible circles
- enter - output the invisible circles that are not in the HTML (which is all the circles at this point)
- 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.
let unionCircles = svg.selectAll('circle')
.data(union)
.enter()
.append('circle')
.attr('cx', (d, i) => i * xScale.bandwidth())
.attr('cy', '20%')
.attr('r', 15);
const svg = d3.select('body').append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
- change color to Union blue
- use
.style('fill...
- use
- add title for Union circles
- create civilwar.css
- create class title
- adjust font and size
unionCircles.on('mouseover', function(d, i) {
console.log('mouse on')
}
unionCircles.on('mouseover', function(d, i) {
svg.append('text')
.text(d)