sport_world(1).csv
Type Table, then Shift-Enter. Ctrl-space for more options.
sport_world= FileAttachment("sport_world(1).csv").csv({typed: true})
viewof table = Inputs.table(sport_world)
viewof table_kop = Inputs.table(sport_world, {
columns: [
"Наименование соревнования",
"Место проведения",
"Ориентировочное число участников"
],
header: {
"Наименование соревнования": "Name of the competition",
"Место проведения": "Location of the event",
"Ориентировочное число участников": "Estimated number of participants"},
sort: "Ориентировочное число участников", reverse:false, required: false})
table_kop
Plot.plot({
marks: [
Plot.barX(sport_world, {x: "Ориентировочное число участников", y: "Место проведения", fill: "#FF8C00", sort: {x: "x", reverse: true}}),
Plot.ruleY([0]),
Plot.ruleX([0, 100]),
], marginLeft: 280
})
{var a = sport_world.filter( (x)=> x["Ориентировочное число участников"] > 100);
return `Количество соревнований с участниками более 100: ${a.length}, всего соревнований ${sport_world.length}`;}
viewof text = Inputs.text({label: "Место проведения", value: "г. Сочи"})
sport_world_city = sport_world.filter( (x)=> String(x["Место проведения"]).indexOf(text.trim()) > -1)
Inputs.table(sport_world_city,
{
columns: [
"Наименование соревнования",
"Место проведения",
"Ориентировочное число участников"
],
width: {
"Наименование соревнования" : 300,
"Место проведения": 120,
"Ориентировочное число участников" : 250
},
sort: "Ориентировочное число участников", maxHeight: 150, maxWidth: 800, reverse:false})
city = new Set(sport_world.map(d => d["Место проведения"]))
viewof select_city = Inputs.select(city, {label: "Укажите место проведения:", multiple: true, width:200})
Inputs.table(sport_world.filter((x)=>select_city.includes(String(x["Место проведения"]) ) ),
{
columns: [
"Наименование соревнования",
"Сроки проведения",
"Место проведения",
"Ориентировочное число участников"
],
width: {
"Наименование соревнования" : 350,
"Сроки проведения": 100,
"Место проведения": 100,
"Ориентировочное число участников" : 50
},
sort: "Место проведения", maxHeight: 1500, maxWidth: 800, reverse:false})
name = sport_world.map(d => d["Наименование соревнования"])
viewof select = Inputs.select(name, {label: "Укажите наименование соревнования:"})
sportik = sport_world.filter( (x)=> String(x["Наименование соревнования"])==select)
Inputs.table(sportik,
{
columns: [
"Наименование соревнования",
"Место проведения",
"Ориентировочное число участников"
],
width: {
"Наименование соревнования" : 350,
"Место проведения": 100,
"Ориентировочное число участников" : 50
},
sort: "Ориентировочное число участников", maxHeight: 150, maxWidth: 800, reverse:false})
viewof sport = Inputs.text({label: "Наименование соревнования"})
SportName = sportik.filter(item => item['Наименование соревнования'].includes(sport.trim()));
Inputs.table(SportName,
{
columns: [
"Наименование соревнования",
"Место проведения",
"Ориентировочное число участников"
],
header: {
"Наименование соревнования": "Соревнование",
"Место проведения": "Место",
"Ориентировочное число участников" : "Число участников"},
width: {
"Наименование соревнования": 250,
"Место проведения":100,
"Ориентировочное число участников": 100 },
sort: "Ориентировочное число участников", maxHeight: 150, maxWidth: 550, reverse:true})
kol = sport_world.map( (x)=> Number(x["Ориентировочное число участников"])).sort((a,b)=>(a-b))
viewof range_1 = Inputs.range([Math.min(...kol), Math.max(...kol)], {label: "Число участников от:", value:Math.min(...kol), step: 10, width: 500})
viewof range_2 = Inputs.range([range_1, Math.max(...kol)], {label: "Число участников от:", value:Math.max(...kol), step: 10, width: 400})
A = sport_world.filter( (x)=> x["Ориентировочное число участников"] > range_1 && x["Ориентировочное число участников"] < range_2)
{return `Количество соревнований с указанием участников: ${A.length}, всего соревнований ${sport_world.length}`;}
canvas = {
const context = DOM.context2d(200, 50);
context.fillStyle = "hsl(216deg 100% 13%)";
context.fillRect(0, 0, A.length*(200/sport_world.length), 50);
context.canvas.style.background = "hsl(216deg 25% 90%)";
return context.canvas;
}
Inputs.table(A,
{
columns: [
"Наименование соревнования",
"Сроки проведения",
"Место проведения",
"Сроки проведения",
"Ориентировочное число участников"
],
width: {
"Наименование соревнования" : 350,
"Сроки проведения":100,
"Место проведения": 100,
"Ориентировочное число участников" : 50
},
sort: "Ориентировочное число участников", maxHeight: 1500, maxWidth: 800, reverse:false})
Plot.plot({
marks: [
Plot.barX(A, {x: "Ориентировочное число участников", y: "Сроки проведения", fill: "#FF8C00", sort: {x: "x", reverse: true}}),
Plot.ruleY([0]),
Plot.ruleX([0, 100]),
], marginLeft: 250
})
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.
