chart = { const width = 960; const height = 600; const path = d3.geoPath(); const formatNumber = d3.format(",.0f") // Set minimum and maximum values. var idDict = {}; function helper() { for(var i = 1; i < state.length; ++i) { var id = parseInt(state[i]["id"]); if(id < 60) { idDict[id] = 0; } } } helper(); function parseState(stateName) { for(var i = 0; i < state.length; i++) { if(state[i]["name"] === stateName) { return state[i]["id"]; } } return 0; } function getStateName(id) { for (var i = 0; i < state.length; i++) { if (parseInt(state[i].id) === id) { return state[i].name; } } } function calculateData() { for(var i = 0; i < dataAll.length; ++i) { if(dataAll[i]["Cause Name"] !== "All causes" && dataAll[i]["Year"] === "2016" && dataAll[i]["State"] !== "United States") { var id = parseState(dataAll[i]["State"]); idDict[id] += parseInt(dataAll[i]["Age-adjusted Death Rate"]); } } } calculateData(); var sortedArray = Object.keys(idDict).map(function(key) { return [key, idDict[key]]; }); sortedArray.sort(function(first, second) { return second[1] - first[1]; }); var color1 = d3.scaleLinear() .domain([0, 61]) .range(['#e6ecf2', '#023d6d']); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const g = svg.append("g") .attr("transform", "translate(0,40)"); const h =svg.append("h") .attr("transform", "translate(0,40)"); // new stuff const x = d3.scaleLinear() .domain(d3.extent(color.domain())) .rangeRound([600, 860]); g.selectAll("rect") .data(color.range().map(d => color.invertExtent(d))) .enter().append("rect") .attr("height", 8) .attr("x", d => x(d[0])) .attr("width", d => x(d[1]) - x(d[0])) .attr("fill", d => color(d[0])); g.append("text") .attr("class", "caption") .attr("x", x.range()[0]) .attr("y", -6) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.title); /////////////////// function bindColor(d) { for(var i = 0; i < sortedArray.length; ++i) { var id = parseInt(sortedArray[i][0]); if(id == d.id) return color1(state.length-i); } } // function getHoverData(stateId, year, cause, type){//single state,year,cause,type // var name = getStateName(stateId); // var outDict = {}; // for(var i = 0; i < dataAll.length; ++i) // { // if(dataAll[i]["Year"] === year && dataAll[i]["State"] === name // && dataAll[i]["Cause Name"] === cause) // { // outDict[dataAll[i]["Cause Name"]] = dataAll[i][type]; // } // } // return outDict; // } function getHoverDataByState(stateId){ var name = getStateName(stateId); var year = "2016"; var type = "Age-adjusted Death Rate"; var cause = "Top 10"; var resDict = {"name":name, "year":year, "cause":cause, "type":type,"number":0.0}; for(var i = 0; i < dataAll.length; ++i) { if(dataAll[i]["Year"] === year && dataAll[i]["State"] === name && dataAll[i]["Cause Name"] !== "All causes") { resDict["number"] += parseFloat(dataAll[i]["Age-adjusted Death Rate"]); } } return resDict; } const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("color", "white") .style("padding", "8px") .style("background-color", "rgba(0, 0, 0, 0.75)") .style("border-radius", "6px") .style("font", "12px sans-serif") .text("tooltip"); //var colors = { hover: 'yellow'}; function handleMouseOver(d, i) { // Add interactivity // Use D3 to select element, change color and size var stateId = parseInt(d.id); //var statename = state[stateid]["name"]; //var statename = getStateName(stateId); //console.log(stateId+ statename); var data = getHoverDataByState(parseInt(d.id)); //console.log(data); //var c = d3.select(this); //c.attr("fill", colors.hover); //console.log(this); d3.select(this) .style('fill-opacity', 0.3) .style("stroke-width", "3"); // .style('fill-opacity', 0.2) // .style("stroke-width", "2"); // var mouse_position = [0,0]; // mouse_position = d3.mouse(this); //var data = {"name": statename, "num": mouse_position} tooltip.html(`

${data.name}
${data.cause}
${data.type}
${data.number}`); tooltip.style("visibility", "visible"); //var bbox = this.getBBox(); //console.log(bbox) // svg.append('text') // .attr("id", "t"+d.id+i) // .attr("class", "hover") // .attr("x", mouse_position[0]) // .attr("y", mouse_position[1]) // .attr("fill", "black") // .attr("text-anchor", "start") // .attr("font-weight", "bold") // .text(data.name) // .append('tspan') // .text(data.type) // .attr("x",mouse_position[0]) // .attr("y", mouse_position[1] + 30) // .append('tspan') // .text(data.number) // .attr("x", mouse_position[0]) // .attr("y", mouse_position[1] + 50); // var paddingLeftRight = 18; // adjust the padding values depending on font and font size // var paddingTopBottom = 5; // svg.append("rect") // .attr("id","t"+d.id+i) // .attr("x", mouse_position[0]-10) // .attr("y", mouse_position[1]-20) // .attr("width", 200) // .attr("height", 80) // .attr("fill", "white") // .style('fill-opacity', 0.3); // svg.append("rect") // .attr("id","t"+d.id+i) // .attr("x", mouse_position[0]) // .attr("y", mouse_position[1]-20) // .attr("width", 200) // .attr("height", 80) // .attr("fill", "white") // .style('fill-opacity', 0.3); } function handleMouseOut(d, i) { //var c = d3.select(this); //d3.select(this).attr("fill", bindColor(d)); //console.log("in" + d.id); //d3.select(this).attr("fill", bindColor(d)); tooltip.style("visibility", "hidden"); d3.selectAll('path') .style('fill-opacity', 1) .style("stroke-width", "1"); // .style('fill-opacity', 1) //d3.selectAll("#t"+d.id+i).remove(); } // g: the graph made above // svg.append("g") // .attr("class", "states") // .selectAll("path") // .data(topojson.feature(us, us.objects.states).features) // .enter().append("path") // // // border part for the map // svg.append("path") // .attr("class", "state-borders") // .attr("stroke", "white") // .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))); svg.selectAll(".state") .data(topojson.feature(us, us.objects.states).features) .enter().append("path") .attr('class', 'state') .attr('d', path) .attr("stroke", "white") .attr("fill", function(d) { return bindColor(d); }) //.on("mouseover", function(d){return handleMouseOver(d);}) .on("mouseover", handleMouseOver) .on("mousemove", () => tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px")) .on("mouseout", handleMouseOut); //.on("click", function(d) { handleMouseClick(d); }) // .on("mouseover", d => { // tooltip.html(`

${d.name}`); // tooltip.style("visibility", "visible"); // }) //.on("mouseout", () => tooltip.style("visibility", "hidden")); //.on("mouseover", handleMouseOver) //.on("mouseout", handleMouseOut); return svg.node(); }