md`## 1 Maternal Mortality Rate (1/100,000) in China from 2010 to 2018
### 1.1 An Overview: Urban-Rural Gap`
{
const urban_rural1 = vl.markArea({opacity: 0.5})
.data(mortality_data_china)
.encode(
vl.x().fieldT("Year").timeUnit("year").title("2010-2018"),
vl.y().mean("Maternal").stack(null).title("Maternal Mortality Rate"),
vl.color().fieldN("Urban-Rural").scale({scheme: "goldorange"}),
)
const urban_rural2 = vl.markLine({strokeWidth: 3, interpolate: 'monotone'})
.data(mortality_data_china)
.encode(
vl.x().fieldT("Year").timeUnit("year"),
vl.y().fieldQ('Maternal'),
vl.color().fieldN('Urban-Rural').legend(null),
vl.tooltip().fieldN('Urban-Rural')
)
.width(700)
.height(500)
return vl.layer(urban_rural1, urban_rural2).render();
}
vl.markCircle()
.data(mortality_data_provincial)
.transform(vl.filter("datum.Year == '" + selectYear + "'"))
.encode(vl.x().fieldQ("City").title("Urban Maternal Mortality Rate"),
vl.y().fieldQ("County").title("Rural Maternal Mortality Rate"),
vl.color().fieldN("Total").scale({scheme: "lightgreyred"}).title("Total Maternal Mortality Rate"),
vl.size().fieldN("Total"),
vl.tooltip().fieldN("Provincial"))
.width(700)
.height(500)
.render()
md`### 1.3 Urban-Rural Gap at Provincial Level`
vl.markBar()
.data(mortality_data_province)
.transform(vl.filter("datum.Location == '" + selectLocation + "'"))
.encode(vl.y().fieldN("Urban_Rural"),
vl.x().fieldO("Year"),
vl.color().mean(vl.repeat("column")).scale({scheme: "lightgreyred"}).title("Maternal Mortality Rate"),
vl.tooltip().mean(vl.repeat("column")))
.width(400)
.height(120)
.repeat({column: ["Mortality"]})
.resolve({scale: {color: 'independent'}})
.render()
{
const totalrate = vl.markBar()
.data(maternal_data_china)
.encode(vl.y().fieldQ("Value").title("Mortality Rate"),
vl.x().fieldN("Year"),
vl.color().fieldN("Causes").scale({scheme: "inferno"}).title("Major Causes"),
vl.tooltip().fieldQ("Value"))
.width(360)
.height(360)
return vl.layer(totalrate)
.facet({column: vl.field("Location")})
.data(maternal_data_china)
.render()
}
vl.markBar()
.data(mortality_data_2019)
.width(580)
.height(400)
.encode(
vl.y().fieldN("Causes").title("Major Causes in urban/rural area"),
vl.x().fieldQ("Value").title("% of Total Maternal Mortality"),
vl.color().fieldQ("Value").scale({scheme: "lightorange"}).title("% of Total Maternal Mortality"),
vl.tooltip().fieldQ("Value"))
.render()
viewof illness = DOM.select(["Obstetrical Bleeding", "Gestational Hypertension", "Medical Complications", "Amniotic Fluid_Embolism"])
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(360,20)")
.append(() =>
legend({
color: color3,
title: data.title,
width: 260,
tickFormat: ".1f"
})
);
svg.append("g")
.selectAll("path")
.data(China_p.features)
.join("path")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", "1")
.attr("fill", d => color3(data.get(d.properties.ID_number.toString())))
.attr("d", path)
.append("title")
.text(d => d.properties.ID + ": " + data.get(d.properties.ID_number.toString())) ;
return svg.node();
}
d3 = require("d3@5")
topojson = require("topojson-client@3")
json = FileAttachment("China_adm-1@1.json").json()
China_p = topojson.feature(json, json.objects.China_adm)
test = China_p.features[3].properties.ID_number
csv_data = {
switch (illness){
case 'Obstetrical Bleeding':
default:
return d3.csvParse(await FileAttachment("China_province.csv").text(),({id, Obstetrical_Bleeding}) => [id, Obstetrical_Bleeding])
case 'Gestational Hypertension':
return d3.csvParse(await FileAttachment("China_province.csv").text(),({id, Gestational_Hypertension}) => [id, Gestational_Hypertension])
case 'Medical Complications':
return d3.csvParse(await FileAttachment("China_province.csv").text(),({id, Medical_Complications}) => [id, Medical_Complications])
case 'Amniotic Fluid_Embolism':
return d3.csvParse(await FileAttachment("China_province.csv").text(),({id, Amniotic_Fluid_Embolism}) => [id, Amniotic_Fluid_Embolism])
}
}
data = {
switch (illness){
case 'Obstetrical Bleeding':
default:
return Object.assign(new Map(csv_data), {title: "Obstetrical_Bleeding in China, 2010"})
case 'Gestational Hypertension':
return Object.assign(new Map(csv_data), {title: "Gestational Hypertension in China, 2010"})
case 'Medical Complications':
return Object.assign(new Map(csv_data), {title: "Medical Complications in China, 2010"})
case 'Amniotic Fluid_Embolism':
return Object.assign(new Map(csv_data), {title: "Amniotic Fluid_Embolism in China, 2010"})
}
}
population_d = Array.from(csv_data.values(),d => d[1])
//Create a classification method (I use natural breaks since there are so many extreme values in data and it isn't influenced by extreme values and group up the extreme values together)
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
//import Kmeans threshold
naturalbreaks = simple.ckmeans(population_d, 6).map(v => v.pop())
YlGnBu = [d3.color("#fef0d9"), d3.color("#fdd49e"), d3.color("#fdbb84 "),d3.color("#fc8d59"),d3.color("#e34a33"),d3.color("#b30000")]
color = d3.scaleThreshold()
.domain(naturalbreaks)
.range(YlGnBu)
color2 = d3.scaleQuantize()
.domain(d3.extent(population_d)) // pass only the extreme values to a scaleQuantize’s domain
.range(YlGnBu)
color3 =d3.scaleQuantile()
.domain(population_d) // pass the whole dataset to a scaleQuantile’s domain
.range(YlGnBu);
width = 975
height = 710
margin = 100;
//Rotate the map sets the longitude of origin for our Albers projection.
projection = d3.geoTransverseMercator().rotate([-110,0]).fitExtent([[65, 80], [width, height]], China_p);
//Using a path generator to project geometry onto the map
path = d3.geoPath().projection(projection);
color4 = d3.scaleQuantile()
.domain(population_d)
.range(d3.quantize(d3.interpolateHcl("#60c96e", "#4d4193"), 6))
import {legend} from "@d3/color-legend"
md`## mortality_file_china`
import {vl} from '@vega/vega-lite-api'
mortality_file_china = FileAttachment("mortality_china2@2.csv")
mortality_text_china = mortality_file_china.text()
mortality_data_china = d3.csvParse(mortality_text_china, d3.autoType)
import {printTable} from '@uwdata/data-utilities'
printTable(mortality_data_china.slice(0, 10))
md`## mortality_file_provincial`
mortality_file_provincial = FileAttachment("mortality_pro.csv")
mortality_text_provincial = mortality_file_provincial.text()
mortality_data_provincial = d3.csvParse(mortality_text_provincial, d3.autoType)
printTable(mortality_data_provincial.slice(0, 10))
md`## mortality_file_province`
mortality_file_province = FileAttachment("mortality_province2.csv")
mortality_text_province = mortality_file_province.text()
mortality_data_province = d3.csvParse(mortality_text_province, d3.autoType)
printTable(mortality_data_province.slice(0, 10))
md`## maternal_file_china`
maternal_file_china = FileAttachment("maternal_total2@2.csv")
maternal_text_china = maternal_file_china.text()
maternal_data_china = d3.csvParse(maternal_text_china, d3.autoType)
printTable(maternal_data_china.slice(0, 10))
mortality_file_2019 = FileAttachment("mortality_2019a@1.csv")
mortality_text_2019 = mortality_file_2019.text()
mortality_data_2019 = d3.csvParse(mortality_text_2019, d3.autoType)
printTable(mortality_data_2019.slice(0, 10))
maternal_file_2019 = FileAttachment("maternal_2019c.csv")
maternal_text_2019 = maternal_file_2019.text()
maternal_data_2019 = d3.csvParse(maternal_text_2019, d3.autoType)
printTable(maternal_data_2019.slice(0, 10))
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.