Public
Edited
Oct 10, 2022
1 fork
1 star
sport_world_data= FileAttachment("sport_world.csv").csv({typed: true})
viewof table = Inputs.table(sport_world_data)
table1
Plot.plot({
marks: [
Plot.barX(table1, {x: "Ориентировочное число участников", y: "Сроки проведения", fill: "#345678", sort: {x: "x", reverse: true}}),
Plot.ruleY([0]),
Plot.ruleX([0, 200000]),
], marginLeft: 250
})
viewof text = Inputs.text({label: "Сроки проведения"})
sport_world_data_by_search = sport_world_data.filter( (x)=> String(x["Сроки проведения"]).indexOf(text.trim()) > -1)
new_creat_table("Наименование соревнования","Сроки проведения","Ориентировочное число участников",sport_world_data_by_search)
city = sport_world_data.map(d => d["Наименование соревнования"])
viewof select = Inputs.select(city, {label: "Место проведения:"})
sport_world_data_short = sport_world_data.filter( (x)=> String(x["Наименование соревнования"])==select)
new_creat_table1("Наименование соревнования","Место проведения","Ориентировочное число участников","sport_world_data_short")
viewof select_mult = Inputs.select(city, {label: "Укажите субъекты:", multiple: true, width:300})
altayregion_data= FileAttachment("AltayRegion_1.csv").csv({typed: true})
m = altayregion_data.map( (x)=> Number(x["всего 2021"])).sort((a,b)=>(a-b))
viewof range_A = Inputs.range([Math.min.apply(null,m), Math.max.apply(null,m)], {label: "Население от:", value:Math.min.apply(null,m), step: 10, width: 300})
viewof range_B = Inputs.range([range_A, Math.max.apply(null,m)], {label: "до:", value: Math.max.apply(null,m), step: 10, width: 300})
canvas = {
var width = 700;
var height = 50;
var max_count = altayregion_data.length;
const context = DOM.context2d(width, height);
context.fillStyle = "hsl(216deg 100% 13%)";
context.fillRect(range_A*(width/Math.max.apply(null,m)), 0, range_B*(width/Math.max.apply(null,m)), height);
context.canvas.style.background = "hsl(216deg 25% 90%)";
return context.canvas;
}
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.
