Published
Edited
Nov 17, 2020
md`# Incidence`
14320000 / 107890000
chart = {
// Define height and width
let width = 600;
let height = 300;
//margin convention
const margin = { top: 50, right: 50, bottom: 50, left: 50 };
const conHeight = height + margin.top + margin.bottom;
const conWidth = width + margin.left + margin.right;
const svg = d3
.create("svg")
.attr("width", conWidth)
.attr("height", conHeight);
const chart = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const years = d3
.scaleLinear()
.domain(d3.extent(dem_data, d => d.year))
.range([0, width]);
let all_dementias = [...data.AD, ...data.VaD, ...data.D_war];
const prevalence = d3
.scaleLinear()
.domain(d3.extent(dem_data, d => d.prevalence))
.range([height, 0]);
const xAxis = d3.axisBottom(years);
chart
.append("g")
.attr("transform", `translate(0, ${height})`)
.call(xAxis);
const yAxis = d3.axisLeft(prevalence);
chart.append("g").call(yAxis);
const prevalence_line = d3
.line()
.x(d => years(d.year))
.y(d => prevalence(d.prevalence));
chart
.append("path")
.datum(dem_data)
.attr("d", prevalence_line)
.attr("fill", "none")
.attr("stroke", "#af9358")
.attr("stroke-width", 2);
//svg
//.insert('rect', ':first-child')
//.attr('width', '100%')
//.attr('height', '100%')
//.attr('fill', '#ff96ca');
//chart
//.insert('rect')
//.attr('width', width)
//.attr('height', height)
//.attr('fill', '#42adf4');
console.log(years(2030));
return svg.node();
}
dem_data = {
let data = [
{ year: 2015, prevalence: 6.9 },
{ year: 2030, prevalence: 9.2 },
{ year: 2050, prevalence: 13.3 }
];
return data;
}
data = ({
years_war: [2015, 2030, 2050],
years: [1990, 1995, 1993, 2007, 2005, 2006, 1995, 2010, 2001, 2012, 2002],
AD: [
4.4,
4.5,
6.55,
undefined,
undefined,
4.8,
undefined,
1.9,
6.3,
1.2,
undefined
],
VaD: [
1.6,
1.0,
3.3,
undefined,
undefined,
1.0,
undefined,
0.9,
undefined,
0.26,
undefined
],
D_war: [6.9, 9.2, 13.3]
})
md`### Codes
measure 6 = Incidence
location 73 = Western Europe
age 22 = all ages
sex 3 = both
age = all ages
cause 429 = Breast cancer
cause 543 = Dementia (Alzheimer and others)
cause 493 = Ischemic heart disease `
dementia_data = d3.csvParse(
await FileAttachment("IHME-GBD_2019_DATA-32cac0d3-1.csv").text()
)
d3 = require("d3@v5")
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.
