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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.