Public
Edited
Dec 11, 2023
Insert cell
Insert cell
data= FileAttachment("sport_world.csv").csv({typed: true})
Insert cell
sport_world.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof table1 = Inputs.table(data, {
columns: [
"Наименование соревнования",
"Место проведения",
"Ориентировочное число участников"
],
header: {
"Наименование соревнования": "Cоревнования",
"Место проведения": "Место",
"Ориентировочное число участников": "Число участников"},
sort: "Ориентировочное число участников", reverse:true, required: false})
Insert cell
Insert cell
viewof text = Inputs.text({label: "Укажите место проведения"})
Insert cell
viewof select = Inputs.select(new Map([["Включить",true],["Выключить",false]]), {label: "Сетка месяца:"})
Insert cell
viewof countRight = Inputs.range([11, 300], {label: "Сдвиг таблици:", step: 1, width: 300, value:248})
Insert cell
viewof count1 = Inputs.range([800, 1400], {label: "Размер таблицы:", step: 1, width: 300, value: 1072})
Insert cell
data1 = data.filter( (x)=> String(x["Место проведения"]).indexOf(text.trim()) > -1)
Insert cell
Plot.plot({
color: { legend: true },
x: { grid: select },
y: {},
width: count1,
marginRight: countRight,
marginLeft: 30,
marks: [
Plot.frame({ strokeOpacity: 0.5 }),
Plot.dot(data1, {
fy: "Место проведения",
x: "Сроки проведения",
y: "Ориентировочное число участников",
stroke: "Ориентировочное число участников",
r: "Ориентировочное число участников",
tip: true
})
]
})
Insert cell
data1
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
m = data.map( (x)=> Number(x["Ориентировочное число участников"])).sort((a,b)=>(a-b))
Insert cell
Insert cell
function max_min() {
var arr = data.map( (x)=> Number(x["Ориентировочное число участников"])).sort((a,b)=>(a-b));
return [arr[0], arr[arr.length-1]];
}
Insert cell
arr_max_min = max_min()
Insert cell
Insert cell
kvart = [arr_max_min[0],m[Math.round ((m.length + 1)/4)], m[Math.round ((m.length + 1)/2)], m[Math.round (3*(m.length + 1)/4)],arr_max_min[1]]
Insert cell
viewof range_A = Inputs.range([0,100], {label: "Квартили в % от:", value:0, step: 25, width: 400})
Insert cell
viewof range_B = Inputs.range([range_A, 100], {label:"до:" , value: 100, step: 25, width: 400})
Insert cell
Insert cell
counter = m.filter(n => n >= kvart[range_A/25] && n <= kvart[range_B/25]).length;
Insert cell
`Количество соревнований:${counter} в диапозоне от ${kvart[range_A/25]} до ${kvart[range_B/25]} человек`
Insert cell
Insert cell
max_count = data.length
Insert cell
width = 700
Insert cell
height = 50
Insert cell
Insert cell
canvas = {
const context = DOM.context2d(width, height);
context.fillStyle = "hsl(216deg 100% 13%)";
context.fillRect(0, 0, counter*(width/max_count), height);
context.canvas.style.background = "hsl(216deg 25% 90%)";
return context.canvas;
}
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