Published unlisted
Edited
Jul 8, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data1 = filteredData.map(key => ({"Country": key.Entity,"Rate": key.Fertility_Rate, "GDP": key.GDP, "SexRatio":Math.round(key.Sex_Ratio,2), "Religion": key.Religion, "Continent": key.Continent}))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Facet = g2plot.Facet
Insert cell
g2plot = require('@antv/g2plot')
Insert cell
Insert cell
mapData = Object.assign(entriesOfYear, {title: "Healthy life expectancy (years)"})
Insert cell
entriesOfYear = new Map(filteredData.map(key => [key.Entity, key.Fertility_Rate]))
Insert cell
filteredData = raw_data.filter(itm=>itm.Year == selectedYear)
Insert cell
palette = {
const schemes = {
pr: d3.interpolatePuRd,
or: d3.interpolateOrRd,
p: d3.interpolatePurples,
pbg: d3.interpolatePuBuGn,
bp: d3.interpolateBuPu
}
return schemes[scheme];
}
Insert cell
color = d3.scaleSequential()
.domain(d3.extent(Array.from(entriesOfYear.values())))
.interpolator(palette)
.unknown("#ccc")
Insert cell
world = FileAttachment("countries-50m@3.json").json()
Insert cell
mapHeight = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
Insert cell
outline = ({type: "Sphere"})
Insert cell
projection = d3.geoEqualEarth()
Insert cell
path = d3.geoPath(projection)
Insert cell
countriesFeatures = topojson.feature(world, world.objects.countries)
Insert cell
topojson = require("topojson-client")
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
Insert cell
Insert cell
Insert cell
raw_data = d3.csv(
"https://raw.githubusercontent.com/MUG594/VIS-Project/main/cpw_original.csv",
d3.autoType,
)
Insert cell
Insert cell
countries = [...d3.group(raw_data.filter(itm=> selContinent == 'All' || itm.Continent == selContinent), d => d.Entity).keys()]
Insert cell
continents = ["All", ...d3.group(raw_data, d => d.Continent).keys()].filter(itm=>itm != null)
Insert cell
continent_country_Map = [...d3.group(raw_data, d=>d.Continent)]
Insert cell
childs_per_woman_per_year = d3.sort(
countries.map(country => {
const country_data = raw_data.filter(d => d.Entity == country);
const data = country_data.map((dd, i) => {
return {
date: new Date(Date.UTC(dd.Year, 0, 1)),
value: dd.Fertility_Rate
};
});
return {
country,
data
};
}),
// Sort by the date where the moving average is ssdfsdf highest
s=> s.Entity// -d3.greatestIndex(movingAverage(s.data.map(d => d.value), 7))
)
Insert cell
interval = d3.utcYear
Insert cell
start = new Date(Date.UTC(minYear, 0, 1))//d3.min(raw_data, (d) => new Date(Date.UTC(d.Year, 0, 1)))
Insert cell
stop = new Date(Date.UTC(maxYear, 0, 2))//d3.max(raw_data, (d) => new Date(Date.UTC(d.Year, 0, 1)))
Insert cell
// Setting defaults
timeChart = TimeChart.defaults({
interval,
start,
stop,
dateFormat: "%Y",
width: width,
marginTop: 2,
scheme: "Purples",
})
Insert cell
marginParallel = { return { top: 30, right: 10, bottom: 10, left: 0 }; }
Insert cell
widthParallel = 1200 - marginParallel.left - marginParallel.right;
Insert cell
heightParallel = 600 - marginParallel.top - marginParallel.bottom;
Insert cell
import {
Radio,
Toggle,
Checkbox,
Range,
Select,
Text,
Table,
Search
} from "@observablehq/inputs"

Insert cell

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.
Learn more