bee_using = FileAttachment("bee_using.xlsx").xlsx()
connecting = bee_using.sheet(0, {headers: true})
`названия столбцов:[${connecting.columns}]\n количество объектов: ${connecting.length}`
viewof table_connect = Inputs.table(connecting,
{ columns: ["#", "субъект", "2019", "2020", "2021"],
header: {
"#": "N",
"субъект": "Region",
"2019": "2019г.",
"2020": "2020г.",
"2021": "2021г."
},
width: {
"#": 50,
"субъект": 300,
"2019": 100,
"2020": 100,
"2021": 100
},
maxWidth: 800, sort: "2021", maxHeight: 150, reverse:true, required: false
})
connecting.shift() //удаляем первую строку
connecting.pop() //удаляем последнюю строку - выполнить два раза
connecting
`названия столбцов:[${connecting.columns}]\n количество объектов: ${connecting.length}`
Plot.plot({
marks: [
Plot.barX(connecting.slice(10,17), {x: "2020", y: "субъект", fill:"#23af99", sort: {x: "x", reverse: true}}),
Plot.ruleX([0])
]
})
Plot.barX(connecting.slice(10,17), {x: "2020", y: "субъект", fill:"#23af99"}).plot()
Plot.barX(connecting.slice(10,17), {x1: "2021", x2: "2019", y: "субъект", fill:"#23af99"}).plot()
Plot.plot({
marks: [
Plot.barX(connecting.slice(10,18), {x: "2020", y: "субъект", fill:"субъект", sort: {x: "x", reverse: true}}),
Plot.ruleX([0, 1800, 2000])
],
color: { legend: true },
marginLeft: 200
})
function select_colors(object) {
if (object["2020"] < 1800) return "#aa8834"
if (object["2020"] < 2000) return "#889945"
return "#445611"
}
Plot.plot({
marks: [
Plot.barX(connecting.slice(10,18), {x: "2020", y: "субъект", fill:(d=>select_colors(d)), sort: {x: "x", reverse: true}}),
Plot.ruleX([0, 1800, 2000])
],
color: { legend: true },
marginLeft: 200
})
function select_colors_r(object) {
if (object["2021"] > object["2019"]) return "#4488bb" //прирост
else return "#88aabb"
}
Plot.plot({
marks: [
Plot.barX(connecting.slice(18,30), {x: "2020", y: "субъект", fill:(d=>select_colors_r(d)), sort: {x: "x", reverse: true}}),
Plot.ruleX([0, 1800, 2000])
],
color: { legend: true },
marginLeft: 230
})
data_p = [{"name":"Иванов","courses":10, "course_passed":8, "min_balls": 45, "max_balls": 84},{"name":"Петров","courses":6, "course_passed":5, "min_balls": 49, "max_balls": 87}, {"name":"Мыров","courses":3, "course_passed":1, "min_balls": 20, "max_balls": 63}, {"name":"Иванова","courses":4, "course_passed":1, "min_balls": 85, "max_balls": 98}, ]
Plot.rectY(data_p, {x1:"courses", x2:"course_passed", y1:"min_balls", y2:"max_balls", fill:"#23af99"}).plot()
Plot.rectY(data_p, {x1:"courses", x2:"course_passed", y1:"min_balls", y2:"max_balls", fill:"name"}).plot
(
{color: { legend: true },
margin: 30,
width: 400,
height: 250,
marks: [Plot.ruleY([0, 50, 90]), Plot.ruleX([0, 3, 6])]
}
)
Plot.rectX(data_p, {x1:0, x2:"course_passed",y1:"min_balls", y2:"max_balls", fill:"name"}).plot
(
{color: { legend: true },
margin: 30,
width: 400,
height: 250,
marks: [Plot.ruleY([0, 90]), Plot.ruleX([0, 3, 6])]
}
)
Plot.plot({
caption: `Успеваемость студентов (количество: ${data_p.length})`,
marks: [
Plot.rectX(data_p, {x1:0, x2:"course_passed",y1:"min_balls", y2:"max_balls", fill:"name"}),
Plot.ruleY([0, 50]),
Plot.ruleX([0, 3, 6])
],
color: { legend: true },
margin: 30,
width: 400,
height: 250
})
data_temper = FileAttachment("Tomsk_temper.csv").csv({typed: true})
data_temper_r = data_temper.map(function (d) {
return {date_b: new Date(d["Дата"].substring(6,10)+"-"+d["Дата"].substring(3,5)+"-"+d["Дата"].substring(0,2)+"T"+d["Дата"].substring(11,16)),
temper: Number(d["T"]),
press: Number(d["P"])
}
} ).sort((a, b) => a["date_b"] > b["date_b"] ? 1 : -1)
viewof table_temper = Inputs.table(data_temper_r, { sort: "date_b", maxHeight: 100})
Plot.plot({
width: 1200,
height: 300,
marks: [
Plot.areaY(data_temper_r, {x: "date_b", y: "temper", fill:"#88bbbb"}),
Plot.ruleY([0])
]
})
Plot.plot({
width: 1200,
height: 300,
marks: [
Plot.areaY(data_temper_r, {x: "date_b", y: "temper", fill:"#88bbbb"}),
Plot.lineY(data_temper_r, {x: "date_b", y: "temper", strokeWidth: 0.4}),
Plot.ruleY([0])
]
})
viewof select_manth = Inputs.select(Array.from(new Array(12),(val,index)=>index + 1), {label: "Месяц:", width:300, value:5})
Plot.plot({
width: 1200,
height: 300,
x: {
domain: [new Date(2022,select_manth, 1), new Date(2022, select_manth+1, 1)]
},
marks: [
Plot.areaY(data_temper_r, {x: "date_b", y: "temper", fill:"#88bbbb"}),
Plot.lineY(data_temper_r, {x: "date_b", y: "temper", strokeWidth: 0.4}),
Plot.ruleY([0])
]
})
Plot.plot({
width: 1200,
height: 300,
x: {
domain: [new Date(2022,select_manth, 1), new Date(2022, select_manth+1, 1)]
},
marks: [
Plot.areaY(data_temper_r, {x: "date_b", y: "temper", curve:"step", fill:"#88bbbb"}),
Plot.lineY(data_temper_r, {x: "date_b", y: "temper", strokeWidth: 0.6}),
Plot.ruleY([0])
]
})
Plot.plot({
width: 1200,
height: 300,
x: {
domain: [new Date(2022,select_manth, 1), new Date(2022, select_manth+1, 1)]
},
marks: [
Plot.areaY(data_temper_r, {x: "date_b", y: "temper", z:(d=>time_area(d)), fillOpacity: 0.4, fill:"temper"}),
// Plot.lineY(data_temper_r, {x: "date_b", y: "temper", strokeWidth: 0.6}),
Plot.ruleY([0])
]
})
function time_area(object) {
if (object["date_b"].getHours() > 10 && object["date_b"].getHours()<=20) return 1 //день
else return 2
}
function colors_area(object) {
if (object["date_b"].getHours() > 10 && object["date_b"].getHours()<=20) return "#aaccbb" //день
else return "#11bbbb"
}
Plot.plot({
width: 1200,
height: 300,
x: {
domain: [new Date(2022,select_manth, 1), new Date(2022, select_manth+1, 1)]
},
marks: [
Plot.areaY(data_temper_r, {x: "date_b", y: "temper", z:(d=>time_area(d)), fillOpacity: 0.4, fill:(d=>colors_area(d))}),
// Plot.lineY(data_temper_r, {x: "date_b", y: "temper", strokeWidth: 0.6}),
Plot.ruleY([0])
]
})
function time_zone(object) {
if (5<=object["date_b"].getHours() && object["date_b"].getHours() < 10) return "утро"
if (10<=object["date_b"].getHours() && object["date_b"].getHours() < 18) return "день"
if (18<=object["date_b"].getHours()&& object["date_b"].getHours() < 22) return "вечер"
return "ночь"
}
Plot.plot({
width: 1200,
height: 600,
grid : true,
facet: {
data: data_temper_r,
y: (d=>time_zone(d)),
margin: 50
},
marks: [
Plot.areaY(data_temper_r, { x: "date_b", y: "temper", curve:"natural", fill:"#93aa92"}),
// Plot.lineY(data_temper_r, {x: "date_b", y: "temper", strokeWidth: 0.6}),
Plot.ruleY([0]),
Plot.ruleX([new Date(2022, select_manth, 1)]),
Plot.frame()
]
})
viewof select_manth_d = Inputs.select(Array.from(new Array(12),(val,index)=>index + 1), {label: "Месяц:", width:300, value:5})
Plot.plot({
width: 1200,
height: 900,
grid : true,
x: {
type: "time", ticks: 30, tickFormat: "%b %d",
domain: [new Date(2022, select_manth_d, 1), new Date(2022, select_manth_d+1, 0)]
},
y: {
domain: [-1, 30], ticks: 20
},
facet: {
data: data_temper_r,
y: (d=>time_zone(d)),
margin: 50
},
marks: [
Plot.areaY(data_temper_r, { x: "date_b", y: "temper", curve:"natural", fill:"#93aa92", fillOpacity: 0.5}),
// Plot.lineY(data_temper_r, {x: "date_b", y: "temper", strokeWidth: 0.6}),
Plot.ruleY([0]),
Plot.ruleX([new Date(2022, select_manth_d, 1)]),
Plot.frame()
]
})
Plot.plot({
caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,
marks: [
Plot.cell(data_temper_r, { x: d => d["date_b"].getDate(), y: d => d["date_b"].getHours(), fill: "temper"})
],
color: { legend: true },
})
Plot.plot({
caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,
marks: [
Plot.cell(data_temper_r, { x: d => d["date_b"].getDate(), y: d => d["date_b"].getHours(), fill: "temper"})
],
color: { legend: true, scheme: "cividis" }
})
Plot.plot({
caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,
marks: [
Plot.cell(data_temper_r, { x: d => d["date_b"].getDate(), y: d => d["date_b"].getHours(), fill: "temper"})
],
color: { legend: true, range:["yellow", "brown"] }
})
Plot.plot({
caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,
grid : true,
facet: {
data: data_temper_r,
y: (d=>d["date_b"].getMonth()),
margin: 50
},
marks: [
Plot.cell(data_temper_r, { x: d => d["date_b"].getDate(), y: d => d["date_b"].getHours(), fill: "temper"}),
Plot.ruleY([0,23]),
Plot.ruleX([0]),
],
color: { legend: true, range:["lightblue", "#D2B48C"] }
})
Plot.plot({
height: 100,
marks: [
Plot.frame(),
Plot.text(["Температурная карта г. Томск"], {frameAnchor: "middle", fontSize: 16})
]
});
Plot.plot({
width: 1200,
caption:`Температурная карта для г.Томска месяц:${select_manth_d}`,
marks: [
Plot.cell(data_temper_r, { x: d => d["date_b"].getDate(), y: d => d["date_b"].getHours(), fill: "temper",fillOpacity: 0.5}),
//новая метка
Plot.text(data_temper_r,{ x: d => d["date_b"].getDate(), y: d => d["date_b"].getHours(), text:"temper",
rotate:0, fontSize:8})
],
padding: 0.05,
grid: true
})
Plot.plot({
height: 300,
width: 1200,
marks: [
Plot.cell(data_temper_r, { x: d => d["date_b"].getDate(), y: d => d["date_b"].getHours(), fill: "temper", fillOpacity: 0.5}),
Plot.text(data_temper_r, { x: d => d["date_b"].getDate(), y: d => d["date_b"].getHours(), text:d=>(Math.round(d["press"])), rotate:0, fontSize:9.3} )
],
padding: 0.07,
color: { legend: true, range:["yellow", "brown"]}
})
Plot.plot({
marks: [
Plot.barX(connecting.slice(18,30), {x: "2020", y: "субъект", fill:(d=>select_colors_r(d)), rx:5, sort: {x: "x", reverse: true}}),
Plot.text(connecting.slice(18,30), {x: "2020", y: "субъект", dx: 20, text: d=>d["2020"]}),
Plot.text(connecting.slice(18,30), {x: "2020", y: "субъект", dx: 60, text: d=>d["2021"]}),
Plot.ruleX([0, 1800, 2000])
],
color: { legend: true },
marginLeft: 230,
marginRight: 80
})
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.
