25:null 26:["$","title",null,{"children":"Assignment3 | christinaaaa | Observable"}] 2b:T2173,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(); }2c:[] 29:{"id":"eded8f12587c2b39","slug":"assignment3/3","title":"Assignment3","thumbnail":"6c08994f018cdd5f97bd9ab8710c5228af1090cce923986ae4001d096cd1d49b","access_level":"public","create_time":"$D2018-10-25T19:32:11.662Z","update_time":"$D2018-10-26T03:12:36.846Z","view_time":null,"first_public_time":"$D2018-10-26T01:48:43.332Z","has_unpublished_edits":null,"fork":{"id":"0568dbaafa4dd3cb","slug":"assignment3","title":"XPloration","owner":{"id":"810c4a18118d49e3","login":"janewukk","name":"Junyue Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c1a481971a15d5ec","login":"christinaaaa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b6e33c12304166aeddcb53ad45806d702024a4a94913508ff371e85fd13b4250","tier":"starter_2024"},"version":236,"publish_version":236,"role":null,"authored":false,"authors":[{"type":"individual","id":"dd7208e68c7afe10","login":"christinaaaa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b6e33c12304166aeddcb53ad45806d702024a4a94913508ff371e85fd13b4250","tier":null}],"members":[{"type":"individual","id":"dd7208e68c7afe10","login":"christinaaaa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b6e33c12304166aeddcb53ad45806d702024a4a94913508ff371e85fd13b4250","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Assignment3","cells":[{"id":0,"value":"md`# Assignment3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## 2016 United States Age-Adjusted Death Rate of Top 10 Death Causes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"data = {\n let data = new Map((await require(\"@observablehq/unemployment\")).map(d => [d.id, d.rate]));\n data.title = \"Death rate (%)\";\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"color = d3.scaleQuantize()\n .domain([1, 60])\n .range(d3.schemePuBu[9])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"state = d3.tsv(\"https://gist.githubusercontent.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/us-state-names.tsv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"dataAll = d3.csv(\"https://raw.githubusercontent.com/janewukk/data/master/NCHS_-_Leading_Causes_of_Death__United_States.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 2a:"$29:body"