sport_data= FileAttachment("sport_world.csv").csv({typed: true})
viewof table = Inputs.table(sport_data)
"Всего записей в таблице районов Алтайского края:"+`${sport_data.length}`
data = table1
{var a = sport_data.filter( (x)=> x["Сроки проведения"] == "июнь" && x["Ориентировочное число участников"] > 300);
return `Количество таких соревнований ${a.length}, всего соревнований ${sport_data.length}`;}
viewof text = Inputs.text({label: "Сроки проведения"})
sport_data_by_search = sport_data.filter( (x)=> String(x["Место проведения"]).indexOf(text.trim())> -1)
goroda = new Set(sport_data.map(d => d["Место проведения"]))
viewof select = Inputs.select(goroda, {label: "Укажите город:"})
`Выбранный город: ${select}`
sport_data_short = sport_data.filter( (x)=> String(x["Место проведения"])==select)
viewof select_mult = Inputs.select(goroda, {label: "Укажите города:", multiple: true, width:300})
m = sport_data.map( (x)=> Number(x["Ориентировочное число участников"])).sort((a,b)=>(a-b))
function max_min() {
var arr = sport_data.map( (x)=> Number(x["Ориентировочное число участников"])).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]}`
min_value = Math.min.apply(null, m)
max_value = Math.max.apply(null, m)
max_count = sport_data.length
width = 700
height = 50
viewof range_A = Inputs.range([min_value, max_value, {label: "Население от:", value:min_value, step: 10, width: 400}])
viewof range_B = Inputs.range([range_A, max_value, {label: "до:", value: max_value, step: 10, width: 400}])
viewof count = Inputs.range([0, max_value], {label: "Количество участников", step: 1, width: 300})
Inputs.table(sport_data.filter( (x)=> Number(x["Ориентировочное число участников"]) >= range_A && Number(x["Ориентировочное число участников"])<= range_B),
{
columns: [
"Наименование соревнования",
"Место проведения",
"Ориентировочное число участников"
],
width: {
"Наименование соревнования": 250,
"Место проведения": 100,
"Ориентировочное число участников": 100
},
sort: "всего 2021", maxHeight: 150, maxWidth: 700, reverse:true})
Plot.plot({
width:1000,
marks: [
Plot.barY(sport_data_mult, {y: "Ориентировочное число участников", x: "Наименование соревнования", fill: "#341678", sort: {x: "y", reverse: true}}),
Plot.ruleX([0]),
Plot.ruleY(1500),
], marginLeft: 50
})
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;
}
sport_data.columns
sport_data_mult = sport_data.filter( (x)=> Number(x["Ориентировочное число участников"]) >= range_A && Number(x["Ориентировочное число участников"])<= range_B)
sport_world.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
