altayregion_data= FileAttachment("AltayRegion_1.csv").csv({typed: true})
viewof table = Inputs.table(altayregion_data)
"Всего записей в таблице районов Алтайского края:"+`${altayregion_data.length}`
viewof table1 = Inputs.table(altayregion_data, {
columns: [
"Район или город",
"всего 2021",
"всего 2020"
],
header: {
"Район или город": "Rayon",
"всего 2021": "2021",
"всего 2020": "2020"},
sort: "всего 2021", reverse:true, required: false})
//запрос на вывод выбранного подмножества данных
table1
Plot.plot({
marks: [
Plot.barX(table1, {x: "всего 2021", y: "Район или город", fill: "#345678", sort: {x: "x", reverse: true}}),
Plot.ruleY([0]),
Plot.ruleX([0, 200000]),
], marginLeft: 250
})
{var a = altayregion_data.filter( (x)=> x["всего 2021"] < x["всего 2020"]);
return `Количество таких субъектов ${a.length}, всего субъектов ${altayregion_data.length}`;}
<font color = "#56A978">Инструменты формы для ввода/вывода данных</font>
<b>Инструмент Text: Inputs.text(options)</b>
image@1.png(${await FileAttachment("image@1.png").url()})
viewof text = Inputs.text({label: "Район"})
altayregion_data_by_search = altayregion_data.filter( (x)=> String(x["Район или город"]).indexOf(text.trim()) > -1)
regions = altayregion_data.map(d => d["Район или город"])
viewof select = Inputs.select(regions, {label: "Укажите субъект:"})
`Выбранный район: ${select}`
viewof select_mult = Inputs.select(regions, {label: "Укажите субъектЫ:", multiple: true, width:300})
m = altayregion_data.map( (x)=> Number(x["всего 2021"])).sort((a,b)=>(a-b))
function max_min() {
var arr = altayregion_data.map( (x)=> Number(x["всего 2021"])).sort((a,b)=>(a-b));
return [arr[0], arr[arr.length-1]];
}
arr_max_min = max_min()
`результат: минимальное - ${arr_max_min[0]}, максимальное - ${arr_max_min[1]}`
viewof range_A = Inputs.range([arr_max_min[0], arr_max_min[1]], {label: "Население от:", value:arr_max_min[0], step: 10, width: 400})
viewof range_B = Inputs.range([range_A, arr_max_min[1]], {label: "до:", value: arr_max_min[1], step: 10, width: 400})
max_count = altayregion_data.length
width = 700
height = 50
viewof count = Inputs.range([0, max_count], {label: "для примера работы", step: 1, width: 300})
canvas = {
const context = DOM.context2d(width, height);
context.fillStyle = "hsl(216deg 100% 13%)";
context.fillRect(0, 0, count*(width/max_count), height);
context.canvas.style.background = "hsl(216deg 25% 90%)";
return context.canvas;
}
altayregion_data.columns
altayregion_data_mult = altayregion_data.filter( (x)=> Number(x["всего 2021"]) >= range_A && Number(x["всего 2021"])<= range_B)
Inputs.table(altayregion_data.filter( (x)=> Number(x["всего 2021"]) >= range_A && Number(x["всего 2021"])<= range_B),
{
columns: [
"Район или город",
"всего 2021",
"городское население 2021",
"сельское население 2021"
],
width: {
"Район или город": 250,
"всего 2021": 100,
"городское население 2021": 120,
"сельское население 2021": 120
},
sort: "всего 2021", maxHeight: 150, maxWidth: 700, reverse:true})
Plot.plot({
width:1000,
marks: [
Plot.barY(altayregion_data_mult, {y: "всего 2021", x: "Район или город", fill: "#345678", sort: {x: "y", reverse: true}}),
Plot.ruleX([0]),
Plot.ruleY([0, 200000]),
], marginLeft: 50
})
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.
