Shape file
https://www.baruch.cuny.edu/confluence/display/geoportal/ESRI+USA+Data
Shape to GeoJSON:
Here is the zip level GeoJSON:
https://github.com/OpenDataDE/State-zip-code-GeoJSON
Here is the state level GeoJSON:
https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json
"I tell my kids...think of yourself like a captain, and you've got this little boat. And sometimes the weather's good, and you're just sailing and sometimes big storms hit and..you're in a stormy sea, but just ride it out, ride it out. Because it is good to be alive." Patti Smith
const tableData = this.state.uploadedFiles.map((file) => {
const url = file.url;
const filename = file.filename;
console.log(url);
file.action = this.deleteButton(file);
file.downloadUrl = (
<a href="#" onClick={(e) => this.handleDownload(e, url, filename)}>
{url}
</a>
);
return file;
});
Have to create a new object
const tableData = this.state.uploadedFiles.map((file) => {
const newFile = Object.assign({}, file);
const url = file.url;
const filename = file.filename;
console.log(url);
newFile.action = this.deleteButton(file);
newFile.downloadUrl = (
<a href="#" onClick={(e) => this.handleDownload(e, url, filename)}>
{url}
</a>
);
return newFile;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww=="
crossorigin="anonymous"
></script>
<style type="text/css">
/* On mouse hover, lighten state color */
/* path:hover {
fill-opacity: 0.7;
} */
div.markets {
fill-opacity: 0.8;
}
/* Style for Custom Tooltip */
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: white;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
/* Legend Font Style */
body {
font: 11px sans-serif;
}
/* Legend Position Style */
.legend {
position: absolute;
left: 800px;
top: 350px;
}
</style>
</head>
<body>
<button id="select-vq">VQ Markets</button>
<button id="select-wtw">WTW Markets</button>
<button id="select-aon">AON Markets</button>
<button id="select-mercer">MERCER Markets</button>
<button id="hide-markets">Hide Markets</button>
<script type="text/javascript">
/* This visualization was made possible by modifying code provided by:
Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html
Malcolm Maclean, tooltips example tutorial
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
Mike Bostock, Pie Chart Legend
http://bl.ocks.org/mbostock/3888852 */
"use strict";
//Width and height of map
var width = 960;
var height = 500; // D3 Projection
var projection = d3
.geoAlbersUsa()
// .albersUsa()
.translate([width / 2, height / 2]) // translate to center of screen
.scale([1000]); // scale things down so see entire US
// Define path generator
var path = d3
.geoPath() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
// Define linear scale for output
var color = d3
.scaleLinear()
.range([
"rgb(213,222,217)",
"rgb(69,173,168)",
"rgb(84,36,55)",
"rgb(217,91,67)",
]);
var legendText = [
"Cities Lived",
"States Lived",
"States Visited",
"Nada",
]; //Create SVG element and append map to the SVG
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height); // Append Div for tooltip to SVG
var div = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var layer1 = svg.append("g");
var layer2 = svg.append("g");
var layer3 = svg.append("g"); // Load GeoJSON data and merge with states data
var offsets = {
VT: [0, 50],
NH: [15, 35],
MA: [20, 25],
RI: [28, 20],
CT: [35, 10],
NJ: [34, 20],
DE: [33, 30],
MD: [47, 35],
DC: [49, 21],
};
d3.json("us-states-abbr.json", function (statejson) {
layer1
.selectAll("path")
.data(statejson.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#cc0000")
.style("stroke-width", "1")
.style("fill", "none");
var smalllStates = statejson.features.filter((item) =>
_.has(offsets, item.properties.abbr)
);
smalllStates.forEach((item) => {
var x = path.centroid(item)[0];
var y = path.centroid(item)[1];
var abbr = item.properties.abbr;
var offset = offsets[abbr];
var annotations = [
{
note: {
label: abbr,
},
x: x,
y: y,
dy: offset[0],
dx: offset[1],
},
];
// Add annotation to the chart
const makeAnnotations = d3.annotation().annotations(annotations);
svg.append("g").call(makeAnnotations);
});
var bigStates = statejson.features.filter(
(item) => !_.has(offsets, item.properties.abbr)
);
svg
.append("g")
.attr("class", "states-names")
.selectAll("text")
.data(bigStates)
.enter()
.append("svg:text")
.text(function (d) {
return d.properties.abbr;
})
.attr("x", function (d) {
console.log(path.centroid(d));
return path.centroid(d)[0];
})
.attr("y", function (d) {
return path.centroid(d)[1];
})
.attr("text-anchor", "middle")
.attr("fill", "black");
});
// const annotations = [
// {
// note: {
// label: "Here is the annotation label",
// title: "Annotation title",
// },
// x: 562,
// y: 143,
// dy: 200,
// dx: 200,
// },
// ];
// // Add annotation to the chart
// const makeAnnotations = d3.annotation().annotations(annotations);
// svg.append("g").call(makeAnnotations);
var items = ["#cc0000", "#00cc00", "#0000cc"];
// d3.json("mercerMarkets.json", function (vqs) {
// vqs.forEach(function (vq) {
// var nlayer = svg.append("g").attr("class", "markets");
// // var color = items[Math.floor(Math.random() * items.length)];
// var color = vq.color;
// var file = vq.file;
// d3.json(file, function (json) {
// var features = [json];
// nlayer
// .selectAll("path")
// .data(features)
// .enter()
// .append("path")
// .attr("class", "markets")
// .attr("d", path)
// .style("stroke", "#ccc")
// .style("stroke-width", "1")
// .style("fill", color)
// .style("opacity", "0.8");
// });
// });
// });
document
.getElementById("select-vq")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
d3.json("vqMarkets.json", function (vqs) {
vqs.forEach(function (vq) {
var nlayer = svg.append("g").attr("class", "markets");
var color = vq.color;
var file = vq.file;
d3.json(file, function (json) {
var features = [json];
nlayer
.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#ccc")
.style("stroke-width", "1")
.style("fill", color);
});
});
});
});
document
.getElementById("hide-markets")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
});
document
.getElementById("select-wtw")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
d3.json("wtwMarkets.json", function (vqs) {
vqs.forEach(function (vq) {
var nlayer = svg.append("g").attr("class", "markets");
var color = vq.color;
var file = vq.file;
d3.json(file, function (json) {
var features = [json];
nlayer
.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#ccc")
.style("stroke-width", "1")
.style("fill", color);
});
});
});
});
document
.getElementById("select-aon")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
d3.json("aonMarkets.json", function (vqs) {
vqs.forEach(function (vq) {
var nlayer = svg.append("g").attr("class", "markets");
var color = vq.color;
var file = vq.file;
d3.json(file, function (json) {
var features = [json];
nlayer
.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#ccc")
.style("stroke-width", "1")
.style("fill", color);
});
});
});
});
document
.getElementById("select-mercer")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
d3.json("mercerMarkets.json", function (vqs) {
vqs.forEach(function (vq) {
var nlayer = svg.append("g").attr("class", "markets");
var color = vq.color;
var file = vq.file;
d3.json(file, function (json) {
var features = [json];
nlayer
.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#ccc")
.style("stroke-width", "1")
.style("fill", color);
});
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww=="
crossorigin="anonymous"
></script>
<style type="text/css">
/* On mouse hover, lighten state color */
/* path:hover {
fill-opacity: 0.7;
} */
div.markets {
fill-opacity: 0.8;
}
/* Style for Custom Tooltip */
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: white;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
/* Legend Font Style */
body {
font: 11px sans-serif;
}
/* Legend Position Style */
.legend {
position: absolute;
left: 800px;
top: 350px;
}
</style>
</head>
<body>
<button id="select-vq">VQ Markets</button>
<button id="select-wtw">WTW Markets</button>
<button id="select-aon">AON Markets</button>
<button id="select-mercer">MERCER Markets</button>
<button id="hide-markets">Hide Markets</button>
<script type="text/javascript">
/* This visualization was made possible by modifying code provided by:
Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html
Malcolm Maclean, tooltips example tutorial
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
Mike Bostock, Pie Chart Legend
http://bl.ocks.org/mbostock/3888852 */
"use strict";
//Width and height of map
var width = 960;
var height = 500; // D3 Projection
var projection = d3
.geoAlbersUsa()
// .albersUsa()
.translate([width / 2, height / 2]) // translate to center of screen
.scale([1000]); // scale things down so see entire US
// Define path generator
var path = d3
.geoPath() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
// Define linear scale for output
var color = d3
.scaleLinear()
.range([
"rgb(213,222,217)",
"rgb(69,173,168)",
"rgb(84,36,55)",
"rgb(217,91,67)",
]);
var legendText = [
"Cities Lived",
"States Lived",
"States Visited",
"Nada",
]; //Create SVG element and append map to the SVG
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height); // Append Div for tooltip to SVG
var div = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var layer1 = svg.append("g");
var layer2 = svg.append("g");
var layer3 = svg.append("g"); // Load GeoJSON data and merge with states data
var offsets = {
VT: [0, 50],
NH: [15, 35],
MA: [20, 25],
RI: [28, 20],
CT: [35, 10],
NJ: [34, 20],
DE: [33, 30],
MD: [47, 35],
DC: [49, 21],
};
d3.json("us-states-abbr.json", function (statejson) {
layer1
.selectAll("path")
.data(statejson.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#cc0000")
.style("stroke-width", "1")
.style("fill", "none");
var smalllStates = statejson.features.filter((item) =>
_.has(offsets, item.properties.abbr)
);
smalllStates.forEach((item) => {
var x = path.centroid(item)[0];
var y = path.centroid(item)[1];
var abbr = item.properties.abbr;
var offset = offsets[abbr];
var annotations = [
{
note: {
label: abbr,
},
x: x,
y: y,
dy: offset[0],
dx: offset[1],
},
];
// Add annotation to the chart
const makeAnnotations = d3.annotation().annotations(annotations);
svg.append("g").call(makeAnnotations);
});
var bigStates = statejson.features.filter(
(item) => !_.has(offsets, item.properties.abbr)
);
svg
.append("g")
.attr("class", "states-names")
.selectAll("text")
.data(bigStates)
.enter()
.append("svg:text")
.text(function (d) {
return d.properties.abbr;
})
.attr("x", function (d) {
console.log(path.centroid(d));
return path.centroid(d)[0];
})
.attr("y", function (d) {
return path.centroid(d)[1];
})
.attr("text-anchor", "middle")
.attr("fill", "black");
});
// const annotations = [
// {
// note: {
// label: "Here is the annotation label",
// title: "Annotation title",
// },
// x: 562,
// y: 143,
// dy: 200,
// dx: 200,
// },
// ];
// // Add annotation to the chart
// const makeAnnotations = d3.annotation().annotations(annotations);
// svg.append("g").call(makeAnnotations);
var items = ["#cc0000", "#00cc00", "#0000cc"];
// d3.json("mercerMarkets.json", function (vqs) {
// vqs.forEach(function (vq) {
// var nlayer = svg.append("g").attr("class", "markets");
// // var color = items[Math.floor(Math.random() * items.length)];
// var color = vq.color;
// var file = vq.file;
// d3.json(file, function (json) {
// var features = [json];
// nlayer
// .selectAll("path")
// .data(features)
// .enter()
// .append("path")
// .attr("class", "markets")
// .attr("d", path)
// .style("stroke", "#ccc")
// .style("stroke-width", "1")
// .style("fill", color)
// .style("opacity", "0.8");
// });
// });
// });
document
.getElementById("select-vq")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
d3.json("vqMarkets.json", function (vqs) {
vqs.forEach(function (vq) {
var nlayer = svg.append("g").attr("class", "markets");
var color = vq.color;
var file = vq.file;
d3.json(file, function (json) {
var features = [json];
nlayer
.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#ccc")
.style("stroke-width", "1")
.style("fill", color);
});
});
});
});
document
.getElementById("hide-markets")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
});
document
.getElementById("select-wtw")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
d3.json("wtwMarkets.json", function (vqs) {
vqs.forEach(function (vq) {
var nlayer = svg.append("g").attr("class", "markets");
var color = vq.color;
var file = vq.file;
d3.json(file, function (json) {
var features = [json];
nlayer
.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#ccc")
.style("stroke-width", "1")
.style("fill", color);
});
});
});
});
document
.getElementById("select-aon")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
d3.json("aonMarkets.json", function (vqs) {
vqs.forEach(function (vq) {
var nlayer = svg.append("g").attr("class", "markets");
var color = vq.color;
var file = vq.file;
d3.json(file, function (json) {
var features = [json];
nlayer
.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#ccc")
.style("stroke-width", "1")
.style("fill", color);
});
});
});
});
document
.getElementById("select-mercer")
.addEventListener("click", function () {
svg.selectAll(".markets").remove();
d3.json("mercerMarkets.json", function (vqs) {
vqs.forEach(function (vq) {
var nlayer = svg.append("g").attr("class", "markets");
var color = vq.color;
var file = vq.file;
d3.json(file, function (json) {
var features = [json];
nlayer
.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#ccc")
.style("stroke-width", "1")
.style("fill", color);
});
});
});
});
</script>
</body>
</html>
componentDidMount() {
this.login();
window.history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.onBack);
//Ping the server every 31 minutes to see if the session is still alive
this.interval = setInterval(
() => this.sessionManager.ping(),
SESSION_TIMEOUT
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
onBack() {
if (this.state.selectedNetwork) {
this.onSelectNetwork(null);
}
window.history.pushState(null, null, document.URL);
}