Published unlisted
Edited
Feb 3, 2021
Insert cell
md`# The History of the World Population from 1950s till now`
Insert cell
//data = d3.csvParse(await FileAttachment("Book1.csv").text(), d3.autoType)
data = Object.assign(d3.csvParse(await FileAttachment("Book1.csv").text(), d3.autoType), {y: "the number of publication"})
Insert cell
d3 = require("d3@5")
Insert cell
viewof v = rangeSlider(data, d=>d.Year)
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// .style('background', "#bcdeec");
// create a tooltip
var Tooltip = svg
.append("text")
.attr("x", 0)
.attr("y", 0)
.style("opacity", 0)
.style("font-size", 17)
// Three function that change the tooltip when user hover / move / leave a cell
var mouseover = function(d) {
Tooltip.style("opacity", 1)
d3.selectAll(".myArea").style("opacity", .2)
d3.select(this)
.style("stroke", "black")
.style("opacity", 1)
}
var mousemove = function(d,i) {
var grp = keys[i]
Tooltip.text(grp)
}
var mouseleave = function(d) {
Tooltip.style("opacity", 0)
d3.selectAll(".myArea").style("opacity", 1).style("stroke", "none")
}

svg.append("g")
.selectAll("path")
.data(series)
.enter()
.append("path")
.attr("class","myArea")
.attr("fill", ({key}) => color(key))
.attr("d", area)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
.append("title")
.text(({key}) => key);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
Insert cell
/*series = d3.stack()
.keys(data.columns.slice(1))
.offset(d3.stackOffsetWiggle)
// .order(d3.stackOrderNone)
// .order(d3.stackOrderInsideOut)
//.offset(d3.stackOffsetSilhouette)

(data)
*/
series = d3.stack()
.keys(data.columns.slice(1))
.offset(d3.stackOffsetWiggle)
//.offset(d3.stackOffsetSilhouette)
// .order(d3.stackOrderInsideOut)
(data)


Insert cell
/*area = d3.area()
.x(d => x(d.data.Year))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
*/

area = d3
.area()
.curve(d3.curveNatural)
// .defined(d => !isNaN(d[1]))
.x(d => x(d.data.Year))
.y0(d => y(d[0]))
.y1(d => y(d[1]))

Insert cell
x = d3.scaleLinear()
// .domain(d3.extent(data, d => d.Year))
.domain(v.range)
.range([margin.left, width - margin.right])

Insert cell
/*y = d3.scaleLinear()
.domain([d3.min(series, d => d3.min(d, d => d[0])),
d3.max(series, d => d3.max(d, d => d[1]))])
.range([height - margin.bottom, margin.top])

*/

y = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height - margin.bottom, margin.top])

/*
y = d3.scaleLinear()
.domain([d3.min(series, d => d3.min(d, d=> d[0])), d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height - margin.bottom, margin.top])
*/
/*y = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
.range([height - margin.bottom, margin.top])

*/

/*y = d3.scaleLinear()
.domain([10000, 100000000])
// .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height - margin.bottom, margin.top])*/
Insert cell
color = d3.scaleOrdinal()
.domain(data.columns.slice(1))
// .range(d3.schemeDark2)
.range([
"#3d5a80",
"#6b8ead",
"#98c1d9",
"#bcdeeb",
"#e0fbfc",
"#e7b4a5",
"#ee6c4d",
"#8c4f47",
"#293241",
"#3c4552",
"#b4E0a7",
"#398949",
"#24693D",
"#BBB1AC",
"#EFC9E6",
"#D5A5C4",
"#BE89AC",
"#9B6A97",
"#7C4D79",
"#F1CF63",
"#9D7760",
"#FFC686",
"#E1575A",
"#BADDF1",
"#9BC7E4",
"#7AAAD0",
"#5B8DB8"
])


Insert cell
/*xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call(g => g.select(".domain").remove())
*/

xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove())



Insert cell
/*yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
*/
/*yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())

*/


yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
Insert cell
height = 600
Insert cell
margin = ({top: 20, right: 30, bottom: 30, left: 80})
Insert cell
import {swatches} from "@d3/color-legend"
Insert cell
//keys = swatches({color, marginLeft: margin.left, columns: "180px"})
swatches({color,marginLeft: margin.left, columns: "180px"})

Insert cell
keys = data.columns.slice(1)
Insert cell
import {rangeSlider} from "@bumbeishvili/utils"
Insert cell
small_multiple = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var xScale = d3.scaleLinear()
.domain(d3.extent(data, d=>d.Year))
.range([0, width]);


var yScale = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height, 0]);
var xScale = d3.scaleLinear()
.range([0, width]);

var yScale = d3.scaleLinear()
.range([height, 0]);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(3);
var area = d3.area()
.x(function(d) { return xScale(d.Year); })
.y0(height)
.y1(function(d) { return yScale(d.value); });
var line = d3.line()
.x(function(d) { return xScale(d.Year); })
.y(function(d) { return yScale(d.value); });
return svg.node();
xScale.domain(d3.extent(data, function(d) { return d.Year; }));
yScale.domain([0,d3.max(data, function(d) { return d.value; })]);
// Nest data by subject.
var cities = d3.nest()
.key(function(d) { return d.city; })
.entries(data);
var nz = cities.filter(function(d){ return d.key === "NZ" });
cities = cities.filter(function(d){ return d.key !== "NZ" });

// Add an SVG element for each city
svg = d3.select("#charts").selectAll("svg")
.data(cities)
.enter().append("svg")
.style("margin-bottom", "10px")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
;
svg.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(nz[0].values); })
.style("stroke", "lightgrey");

// Add the area path elements
/*svg.append("path")
.attr("class", "area")
.attr("d", function(d) { return area(d.values); });*/

// Add the line path elements
svg.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(d.values); });

// Add a labels
svg.append("text")
.attr("x", (width + 10)/2)
.attr("y", height - 85)
.style("text-anchor", "middle")
.style("font-size", "12px")
.attr("fill", "#B35959")
.text(function(d) { return d.key; });
svg.append("text")
.text(xScale.domain()[0])
.attr("x", 0)
.attr("y", height + 15)
.style("text-anchor", "start")
.style("font-size", "12px")
.attr("fill", "#B35959");
svg.append("text")
.text(xScale.domain()[1])
.attr("x", width)
.attr("y", height + 15)
.style("text-anchor", "end")
.style("font-size", "12px")
.attr("fill", "#B35959");
//add axes
svg.append("g").attr("id", "yAxisG").call(yAxis);
d3.selectAll("path.domain").remove();
d3.selectAll("line").style("stroke", "silver");
}

function convertTextToNumbers(d) {
d.year = +d.year;
d.value = +d.value;
return d;
}
Insert cell

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