Published
Edited
Sep 28, 2022
Insert cell
Insert cell
sad_rf = FileAttachment("demografia.xlsx").xlsx()
Insert cell
data_sad = sad_rf.sheet(0, {headers: true})
Insert cell
data_sad.columns
Insert cell
viewof table1 = Inputs.table(data_sad)
Insert cell
Insert cell
a = data_sad.filter( (d)=> d["2015"] > 100000000 && d["2015"]<7346633000)
Insert cell
viewof table = Inputs.table(a)
Insert cell
Insert cell
data_sad1= a.map((d) => d['CountryNameRu'] = d['CountryNameRu'].toUpperCase())
Insert cell
Insert cell
Plot.plot({
width:1000,
marks: [
Plot.barX(a, {y: "CountryNameRu", x: "2015", fill:"#aabfab", sort: {y: "x", reverse: false}}),
Plot.ruleX([0, 10, 20, 30, 40, 50, 60], {fill:"#aaaaaa"})],
color: { legend: true },
marginLeft: 200,
})

Insert cell
Insert cell
a1 = data_sad.filter( (d)=> d["1960"] > 100000000 && d["1960"]<1000000000)
Insert cell
Plot.plot({
width:1000,
marks: [
Plot.barX(a1, {y: "CountryNameRu", x: "1960", fill:"#aabfab", sort: {y: "x", reverse: false}}),
Plot.ruleX([0, 10, 20, 30, 40, 50, 60], {fill:"#aaaaaa"})],
color: { legend: true },
marginLeft: 100,
})

Insert cell
Insert cell
function new_l() {

var RF = data_sad.filter( (d)=> d["CountryNameRu"] == "РОССИЙСКАЯ ФЕДЕРАЦИЯ" && d["1960"]< 100000000000)
var x= [];
var y= [];
var n = 2015-1960;
var q = 1960;
for (var i = 0; i < n+1; i++) {
x[i]= RF[0][q];
y[i]=q;
q=q+1
}
var n ={"Year": 0,"RF": 0}
var l = [];
for (var i = 0; i < 56; i++) {
n ={"Year": y[i],"RF": x[i]}
l[i]= n;
}
return l;
}
Insert cell
viewof table_l = Inputs.table(new_l())
Insert cell
l = new_l()
Insert cell

Plot.plot({
width:1000,
marks: [
Plot.barY(l, {x: "Year", y: "RF"}),
Plot.ruleY([0, 10, 20, 30, 40, 50, 60], {fill:"#aaaaaa"})
],
color: { legend: true },

marginLeft: 60,
})
Insert cell
Plot.plot({
height: 100,
marks: [
Plot.dot(l, Plot.dodgeY({x: "Year",fill: "RF" }))
],
color: {
legend: true
},
})
Insert cell
chart = LineChart(l, {
x: d => d.Year,
y: d => d.RF,
width,
height: 300,
color: "steelblue"
})
Insert cell

function LineChart(data, {
x = ([x]) => x, // given d in data, returns the (temporal) x-value
y = ([, y]) => y, // given d in data, returns the (quantitative) y-value
defined, // for gaps in data
curve = d3.curveLinear, // method of interpolation between points
marginTop = 20, // top margin, in pixels
marginRight = 30, // right margin, in pixels
marginBottom = 30, // bottom margin, in pixels
marginLeft = 40, // left margin, in pixels
width = 640, // outer width, in pixels
height = 400, // outer height, in pixels
xType = d3.scaleUtc, // the x-scale type
xDomain, // [xmin, xmax]
xRange = [marginLeft, width - marginRight], // [left, right]
yType = d3.scaleLinear, // the y-scale type
yDomain, // [ymin, ymax]
yRange = [height - marginBottom, marginTop], // [bottom, top]
color = "currentColor", // stroke color of line
strokeLinecap = "round", // stroke line cap of the line
strokeLinejoin = "round", // stroke line join of the line
strokeWidth = 1.5, // stroke width of line, in pixels
strokeOpacity = 1, // stroke opacity of line
yFormat, // a format specifier string for the y-axis
yLabel // a label for the y-axis
} = {}) {
// Compute values.
const X = d3.map(data, x);
const Y = d3.map(data, y);
const I = d3.map(data, (_, i) => i);
if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]);
const D = d3.map(data, defined);

// Compute default domains.
if (xDomain === undefined) xDomain = d3.extent(X);
if (yDomain === undefined) yDomain = [0, d3.max(Y)];

// Construct scales and axes.
const xScale = xType(xDomain, xRange);
const yScale = yType(yDomain, yRange);
const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0);
const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat);

// Construct a line generator.
const line = d3.line()
.defined(i => D[i])
.curve(curve)
.x(i => xScale(X[i]))
.y(i => yScale(Y[i]));

const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");

svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(xAxis);

svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(yAxis)
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1))
.call(g => g.append("text")
.attr("x", -marginLeft)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(yLabel));

svg.append("path")
.attr("fill", "none")
.attr("stroke", "currentColor")
.attr("d", line(I.filter(i => D[i])));

svg.append("path")
.attr("fill", "none")
.attr("stroke", color)
.attr("stroke-width", strokeWidth)
.attr("stroke-linecap", strokeLinecap)
.attr("stroke-linejoin", strokeLinejoin)
.attr("stroke-opacity", strokeOpacity)
.attr("d", line(I));

return svg.node();
}
Insert cell
Insert cell
Insert cell
l_kit = {
var Kita = data_sad.filter( (d)=> d["CountryNameRu"] == "КИТАЙ" )
var x= [];
var y= [];
var n = 2015-1960;
var q = 1960;
for (var i = 0; i < n+1; i++) {
x[i]= Kita[0][q];
y[i]=q;
q=q+1
}
var n ={"Year": 0,"Kit": 0}
var l = [];
for (var i = 0; i < 56; i++) {
n ={"Year": y[i],"Kit": x[i]}
l[i]= n;
}
return l;
}
Insert cell
chart1 = LineChart(l_kit, {
x: d => d.Year,
y: d => d.Kit,
width,
height: 300,
color: "steelblue"
})
Insert cell
Insert cell
Insert cell
l_indonez = {
var indonez = data_sad.filter( (d)=> d["CountryNameRu"] == "ИНДОНЕЗИЯ" )
var x= [];
var y= [];
var n = 2015-1960;
var q = 1960;
for (var i = 0; i < n+1; i++) {
x[i]= indonez[0][q];
y[i]=q;
q=q+1
}
var n ={"Year": 0,"indonez": 0}
var l = [];
for (var i = 0; i < 56; i++) {
n ={"Year": y[i],"indonez": x[i]}
l[i]= n;
}
return l;
}
Insert cell
chart2 = LineChart(l_indonez, {
x: d => d.Year,
y: d => d.indonez,
width,
height: 300,
color: "steelblue"
})
Insert cell
Insert cell
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