Skip to content

Coding Challenge (Work in Progress) #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KentShepard wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Coding Challenge (Work in Progress) #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d44fa4f
Create HTML, CSS, and JS files for part1 and render a solid color map…
KentShepard Jan 22, 2018
fe000d5
Add us.json and refactor to create map with it instead
KentShepard Jan 22, 2018
0e18865
Render map with different corresponding shades of gray
KentShepard Jan 22, 2018
0623cda
Add mouseover tooltip
KentShepard Jan 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 51 additions & 51 deletions data-states.csv → part1-map/data-states.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
State Abbv,State,Percent of Population,Median Household Income,Percent of Income
AK,alaska,46%,"$75,723",2%
AL,alabama,47%,"$47,221",3%
AR,arkansas,44%,"$45,907",3%
AZ,arizona,44%,"$57,100",2%
CA,california,46%,"$66,637",2%
CO,colorado,52%,"$70,566",2%
CT,connecticut,54%,"$75,923",2%
DC,district of columbia,51%,"$70,982",2%
DE,delaware,47%,"$58,046",2%
FL,florida,42%,"$51,176",3%
GA,georgia,49%,"$53,527",3%
HI,hawaii,55%,"$72,133",1%
IA,iowa,54%,"$59,094",2%
ID,idaho,48%,"$56,564",2%
IL,illinois,51%,"$61,386",2%
IN,indiana,52%,"$56,094",2%
KS,kansas,53%,"$56,810",2%
KY,kentucky,44%,"$45,369",3%
LA,louisiana,42%,"$42,196",3%
MA,massachusetts,54%,"$72,266",2%
MD,maryland,54%,"$73,760",2%
ME,maine,49%,"$50,856",3%
MI,michigan,51%,"$57,091",2%
MN,minnesota,55%,"$70,218",2%
MO,missouri,51%,"$55,016",2%
MS,mississippi,42%,"$41,099",3%
MT,montana,43%,"$57,075",2%
NC,north carolina,45%,"$53,764",2%
ND,north dakota,55%,"$60,184",2%
NE,nebraska,55%,"$59,374",2%
NH,new hampshire,58%,"$76,260",2%
NJ,new jersey,55%,"$68,468",3%
NM,new mexico,36%,"$48,451",3%
NV,nevada,50%,"$55,431",2%
NY,new york,50%,"$61,437",2%
OH,ohio,51%,"$53,985",3%
OK,oklahoma,48%,"$50,943",2%
OR,oregon,46%,"$59,135",2%
PA,pennsylvania,53%,"$60,979",2%
RI,rhode island,51%,"$61,528",3%
SC,south carolina,46%,"$54,336",3%
SD,south dakota,49%,"$57,450",2%
TN,tennessee,46%,"$51,344",2%
TX,texas,49%,"$58,146",2%
UT,utah,60%,"$67,481",2%
VA,virginia,55%,"$66,451",2%
VT,vermont,47%,"$60,837",2%
WA,washington,49%,"$70,310",1%
WI,wisconsin,56%,"$59,817",2%
WV,west virginia,43%,"$44,354",3%
State Abbv,State,Percent of Population,Median Household Income,Percent of Income
AK,alaska,46%,"$75,723",2%
AL,alabama,47%,"$47,221",3%
AR,arkansas,44%,"$45,907",3%
AZ,arizona,44%,"$57,100",2%
CA,california,46%,"$66,637",2%
CO,colorado,52%,"$70,566",2%
CT,connecticut,54%,"$75,923",2%
DC,district of columbia,51%,"$70,982",2%
DE,delaware,47%,"$58,046",2%
FL,florida,42%,"$51,176",3%
GA,georgia,49%,"$53,527",3%
HI,hawaii,55%,"$72,133",1%
IA,iowa,54%,"$59,094",2%
ID,idaho,48%,"$56,564",2%
IL,illinois,51%,"$61,386",2%
IN,indiana,52%,"$56,094",2%
KS,kansas,53%,"$56,810",2%
KY,kentucky,44%,"$45,369",3%
LA,louisiana,42%,"$42,196",3%
MA,massachusetts,54%,"$72,266",2%
MD,maryland,54%,"$73,760",2%
ME,maine,49%,"$50,856",3%
MI,michigan,51%,"$57,091",2%
MN,minnesota,55%,"$70,218",2%
MO,missouri,51%,"$55,016",2%
MS,mississippi,42%,"$41,099",3%
MT,montana,43%,"$57,075",2%
NC,north carolina,45%,"$53,764",2%
ND,north dakota,55%,"$60,184",2%
NE,nebraska,55%,"$59,374",2%
NH,new hampshire,58%,"$76,260",2%
NJ,new jersey,55%,"$68,468",3%
NM,new mexico,36%,"$48,451",3%
NV,nevada,50%,"$55,431",2%
NY,new york,50%,"$61,437",2%
OH,ohio,51%,"$53,985",3%
OK,oklahoma,48%,"$50,943",2%
OR,oregon,46%,"$59,135",2%
PA,pennsylvania,53%,"$60,979",2%
RI,rhode island,51%,"$61,528",3%
SC,south carolina,46%,"$54,336",3%
SD,south dakota,49%,"$57,450",2%
TN,tennessee,46%,"$51,344",2%
TX,texas,49%,"$58,146",2%
UT,utah,60%,"$67,481",2%
VA,virginia,55%,"$66,451",2%
VT,vermont,47%,"$60,837",2%
WA,washington,49%,"$70,310",1%
WI,wisconsin,56%,"$59,817",2%
WV,west virginia,43%,"$44,354",3%
WY,wyoming,55%,"$57,829",2%
10 changes: 10 additions & 0 deletions part1-map/part1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<head>
<title>Fractl Coding Challenge</title>
<link rel="stylesheet" href="styles.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
</head>
<body>
<script src="./us-map.js" type="text/javascript"></script>
</body>
5 changes: 5 additions & 0 deletions part1-map/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.state-borders {
fill: none;
stroke: #fff;
stroke-width: 1px;
}
90 changes: 90 additions & 0 deletions part1-map/us-map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
let width = 960;
let height = 600;

let svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);

let projection = d3.geoAlbersUsa()
.scale(1000)
.translate([width / 2, height / 2]);

let path = d3.geoPath()
.projection(projection);

let div = d3.select('body')
.append('div')
.attr('class', 'tooltip')
.style('opacity', 0);

d3.csv('data-states.csv', (error, data) => {
if (error) throw error;

d3.json('us.json', (error, us) => {
if (error) throw error;

let allGeoStates = topojson.feature(us, us.objects.usStates).features;

data.forEach((state) => {
allGeoStates.forEach((geoState) => {
if (state['State Abbv'] === geoState.properties.STATE_ABBR) {
geoState.properties.info = state;
}
});
});

svg.append('g')
.selectAll('path')
.data(topojson.feature(us, us.objects.usStates).features)
.enter().append('path')
.attr('d', path)
.attr('class', 'states')
.attr('class', (d) => { return d.properties.STATE_ABBR })
.attr('opacity', (d) => { return parseFloat(d.properties.info['Percent of Population']) / 100 })
.on('mouseover', function (d) {
let splitName = d.properties.info['State'].split(' ');
splitName.forEach((string, i) => {
splitName[i] = string.charAt(0).toUpperCase() + string.slice(1);
});

let name = splitName.join(' ');
let medianIncome = d.properties.info['Median Household Income'];
let percentIncome = d.properties.info['Percent of Income'];
let percentPopulation = d.properties.info['Percent of Population'];

div.transition()
.duration(200)
.style("opacity", .9);
div.html(`
<h1>${name}</h1>
<table>
<tr>
<td>Percent of Population: </td>
<td>${percentPopulation}</td>
</tr>
<tr>
<td>Median Household Income: </td>
<td>${medianIncome}</td>
</tr>
<tr>
<td>Percent of Income: </td>
<td>${percentIncome}</td>
</tr>
</table>
`)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on('mouseout', (d) => {
div.transition()
.duration(500)
.style('opacity', 0);
})

svg.append('path')
.attr('class', 'state-borders')
.attr('d', path(topojson.mesh(us, us.objects.usStates, function (a, b) { return a !== b; })));

});
});
Loading