var poverty = d3.map();

var path = d3.geoPath();

var detail = {};

var povertyDict = {};

var padding = 100;

var svg = d3.create("svg").attr("width", 1200).attr("height", 600);

var h = +svg.attr("height");

var w = +svg.attr("width");

var colors = [

"#ffffd9",

"#edf8b1",

"#c7e9b4",

"#7fcdbb",

"#41b6c4",

"#1d91c0",

"#225ea8",

"#253494",

"#081d58"

];

// const colorBreaks = ss

// .ckmeans(

// data.map((datum) => datum[queryVariable.queryVariable]),

// 9

// )

// .map((cluster) => cluster[0]);

// const dataExtent = d3.extent(

// data,

// (datum) => datum[queryVariable.queryVariable]

// );

svg

.append("g")

.attr("class", "title")

.attr("transform", "translate(0,40)")

.append("text")

.text("County Data")

.attr("font-weight", "bold")

.attr("x", w / 3);

var color = d3.scaleQuantize().domain([1, 10]).range(colors);

// const color = d3

// .scaleThreshold()

// .domain(colorBreaks)

// .range(d3[colorScheme.colorScheme][9]);

var x = d3.scaleLinear().domain([1, 10]).rangeRound([600, 860]);

var g = svg

.append("g")

.attr("class", "key")

.attr("transform", "translate(0,40)");

g.append("text")

.attr("class", "caption")

.attr("x", x.range()[1] - 150)

.attr("y", -10)

.attr("fill", "#000")

.attr("text-anchor", "start")

.attr("font-weight", "bold")

.text("death rate / county")

.style("font-size", "10px");

// add a legend

g.selectAll("rect")

.data(

color.range().map(function (d) {

d = color.invertExtent(d);

if (d[0] == null) d[0] = x.domain()[0];

if (d[1] == null) d[1] = x.domain()[1];

return d;

})

)

.enter()

.append("rect")

.attr("height", 10)

.attr("width", 10)

.attr("y", function (d, i) {

return 7 * i;

})

.attr("x", x.range()[1] - 150)

.attr("fill", function (d) {

return color(d[0]);

});

var promises = [

d3.json("https://d3js.org/us-10m.v1.json"),

d3.csv(

"https://gist.githubusercontent.com/ClaireBookworm/23e23fe024bf4e7e332ab53ad2499861/raw/496b88197dd73d0e4d15d267c0cea79d3c1c8d99/county-veteran-sh-data",

function (d) {

poverty.set(d["CensusId"], +d["Deaths"]);

povertyDict[d["CensusId"]] = {

Deaths: +d["Deaths"],

State: d["State"],

County: d["County"]

};

}

),

d3.csv(

"https://gist.githubusercontent.com/gstvolvr/03362e65926986034bf9be4462c040b6/raw/14d19df342be5ebaa94b161e700d9657435b358d/county_detail.csv",

function (d) {

detail[d["CensusId"]] = {

TotalPop: +d["TotalPop"],

IncomePerCap: +d["IncomePerCap"]

};

}

)

];

Promise.all(promises).then(ready);

function ready([us]) {

svg

.append("g")

.attr("class", "counties")

.selectAll("path")

.data(topojson.feature(us, us.objects.counties).features)

.enter()

.append("path")

.attr("fill", function (d) {

return color((d.rate = poverty.get(d.id)));

})

.attr("d", path)

.append("title")

.text(function (d) {

return (

"State: " +

povertyDict[d.id]["State"] +

"\nCounty: " +

povertyDict[d.id]["County"] +

"\nPoverty Rate: " +

povertyDict[d.id]["Deaths"] +

"%\nTotal Population: " +

detail[d.id]["TotalPop"] +

"\nIncome per Capita: " +

detail[d.id]["IncomePerCap"]

);

});

svg

.append("path")

.datum(

topojson.mesh(us, us.objects.states, function (a, b) {

return a !== b;

})

)

.attr("class", "states")

.attr("d", path)

.style("fill", "none")

.style("stroke", "#fff")

.style("stroke-line-join", "round")

// Mouse events and tooltips

// have the mouse's position be updated

// assign the name of the states to our variable

.on("touchmove mousemove", function (d) {

const name = d.properties.name;

const [x, y] = d3.mouse(this);

// call the tooltip

// the .call is used to display what to see when the mouse goes over a state, in this case the name

tooltip

.attr("transform", `translate(${x},${y})`)

.call(callout, `${name}`);

})

.on("touchend mouseleave", () => tooltip.call(callout, null));

const tooltip = svg.append("g");

// yield svg.node();

var div = d3

.select("body")

.append("div")

.attr("class", "tooltip")

.style("opacity", 0);

}

return svg.node();

}