Public
Edited
Apr 12, 2023
final_data.get("R")
function listOfStates(arr) {
let set = new Set();
arr.forEach((s) => {
set.add(s.state);
});
return Array.from(set);
}
margin = ({ left: 240, top: 20, right: 20, bottom: 20 })
states_final_data = final_data
.get(states_option === "Democratic US states" ? "D" : "R")
.filter((s) => s.Method === suicide_method)
us_data = FileAttachment("Cause_of_death_2016_2020.csv").csv() //FileAttachment("Underlying Cause of Death, 1999-2020 (1).csv").csv()
us_data
Type Table, then Shift-Enter. Ctrl-space for more options.
us_data_filtered = us_data
.filter((d) => d.Notes === "")
.map((m) => {
return {
...m,
politics: colorStates.get(m.State) === "red" ? "D" : "R"
};
})
required_data = d3.rollup(
us_data_filtered,
(v) => d3.mean(v, (d) => parseInt(d["Deaths"])),
(d) => d["politics"],
(d) => d["Injury Mechanism & All Other Leading Causes"],
(d) => d.State,
(d) => d["Ten-Year Age Groups"]
)
mapStatesRedBlue()
function mapToArray(map) {
let modifiedMap = new Map();
for (let [k2, v2] of map.entries()) {
let arr = [];
for (let [key, val] of v2.entries()) {
for (let [k, v] of val.entries()) {
for (let [k1, v1] of v.entries()) {
let obj = {};
obj = {
...obj,
state: k,
age: k1.slice(0, -6),
count: parseInt(v1),
method: key
};
arr.push(obj);
}
}
}
modifiedMap.set(k2, arr);
}
return modifiedMap;
}
function generateDataFormat(map) {
let arr = [];
for (let [k, v] of map.entries()) {
arr.push({
state: k,
count: parseInt(v)
});
}
return arr;
}
final_data = mapToArray(required_data)
function allMethods(arr) {
let set = new Set();
arr.forEach((s) => {
set.add(s.method);
});
return Array.from(set);
}
all_Methods = allMethods(
states_option === "Democratic US states"
? final_data.get("D")
: final_data.get("R")
)
colorStates = new Map()
function mapStatesRedBlue() {
let red = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"Georgia",
"Idaho",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"North Carolina",
"North Dakota",
"Oklahoma",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"West Virginia",
"Wyoming",
"Pennsylvania",
"Wisconsin",
"Florida",
"Ohio"
];
let blue = [
"California",
"Colorado",
"Connecticut",
"Delaware",
"District of Columbia",
"Hawaii",
"Illinois",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"Oregon",
"Rhode Island",
"Vermont",
"Virginia",
"Washington"
];
red.forEach((r) => {
colorStates.set(r, "red");
});
blue.forEach((r) => {
colorStates.set(r, "blue");
});
}
abc = {
const height = 750;
const marginLeft = 175;
const marginTop = 40;
const rotation = 300;
const width = 600;
const data = [...final_data.get("R"), final_data.get("D")];
const svg = d3
.select(DOM.svg(width, height))
.attr("viewBox", `-${marginLeft} -${marginTop} ${width} ${height}`);
const tooltip = html`<div class="svg-tooltip">I'm the tooltip</div>`;
const container = html`<div>
<style>
.svg-tooltip {
position: absolute;
padding: 12px 6px;
background: #fff;
border: 1px solid #333;
pointer-events: none;
}
</style>
${tooltip}
${svg.node()}
</div>`;
const x = d3
.scaleBand()
.domain(age_groups) // Array.from(new Set(data.map((d) => d.age))).sort()
.range([0, width - margin.left - margin.right]);
// const xAxis = d3.axisTop(x);
svg
.append("g")
.call(d3.axisTop(x))
.call((axis) =>
axis
.append("text")
.text("jgg")
.style("fill", "black")
.style("font-weight", "800")
.style("font-size", "10pt")
.style("text-anchor", "middle")
.style("position", "absolute")
.attr(
"transform",
`translate( ${(width - margin.left - margin.right) / 2}, ${-30})`
)
);
const y = d3
.scaleBand()
.domain(listOfStates(data))
.range([0, height - 70]);
const yAxis = d3.axisLeft(y);
svg
.append("g")
.call(d3.axisLeft(y))
.call(
(axis) =>
axis
.append("text")
.text("jkk")
.style("fill", "black")
.style("font-weight", "800")
.style("font-size", "10pt")
.attr(
"transform",
`translate( ${-120}, ${height / 3}) rotate(${-90})`
)
// .style("text-anchor", "end")
); //yaxis
const color = d3
.scaleSequential(d3.interpolatePuRd) //interpolateRdYlBu
.domain([0, d3.max(data, (d) => d["count"])]); //d3.max(data, (d) => d["count"])
const div = d3.select(container).append("div").classed("tooltip", true);
const mouseover = (d) => {
console.log("does this work?", tooltip);
tooltip.style("opacity", 1);
};
const mousemove = function (d) {
tooltip.html("The exact value of<br>this cell is: ");
// .style("left", d3.mouse(this)[0] + 70 + "px")
// .style("top", d3.mouse(this)[1] + "px");
};
function tooltipContents(datum) {
const { x, y } = datum;
return `x: ${x}, y: ${y}`;
}
const tip = svg
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d) => x(d.age))
.attr("y", (d) => y(d.state))
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.attr("fill", (d) => color(d.count))
.call((rect) => rect.append("title").text((d) => `count : ${d?.count}`));
// .on("click", (evt, d) => {
// mutable obj = d;
// console.log(d);
// });
// .on("mouseover", async function (evt, d) {
// const [x, y] = d3.pointer(evt);
// d3.select(tooltip)
// .style("display", "block")
// .style("top", `${y}px`)
// .style("left", `${x}px`);
// tooltip.innerHTML ="";
// tooltip.appendChild(htl.html`<h3>${
// d.age
// }</h3><div>I'm fancy like this ${d.count}
// ${await vl
// .markBar()
// .encode(vl.y().fieldN("age"), vl.x().fieldQ("count"))
// .data(data.filter(e => e.state === d.state ))
// .render()}
// </div>`);
// return tooltip.style("visibility", "visible");
// })
// .on("mouseout", () => {
// // hide the tooltip
// })
// .on("mousemove", (event) => {
// // move the tooltip,
// // passing the native browser event
// });
return svg.node(); //container
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
