vis1 = Plot.plot({
style: { fontSize: 14, fontWeight: 400 },
width: width > 650 ? 950 : 350,
height: 350,
marginBottom: width > 650 ? 30 : 40,
marginTop: 70,
x: {
domain: ["Київ", "Львів", "Одеса", "Харків", "Дніпро"],
label: null
},
// axis: null,
y: {
label: "Кількість\nзакладів\nв ТОП-5\nмістах",
labelArrow: null,
tickFormat: (d) => d + "",
grid: true
},
marks: [
// Plot.frame({ fill: "#eaeaea" }),
Plot.axisFx({
fontSize: 14,
fontWeight: 600,
label: null
// background: "#eee"
}),
Plot.axisX({
fontSize: width > 650 ? 12 : 11,
label: null,
tickRotate: width > 650 ? 0 : -40
}),
Plot.barY(stats, {
x: "city",
y: "count",
fx: "type",
fill: "type",
sort: { x: "y", reverse: true }
// tip: true
})
// Plot.ruleY([0])
],
caption: html`<small style="color:grey">Дані: OpenStreetMap</small>`
})
stats = (await FileAttachment("main_statistics.csv").csv()).map((d) => {
return {
...d,
type:
d.amenity == "restaurant"
? "Ресторани"
: d.amenity == "cafe"
? "Кафе"
: d.amenity == "bar"
? "Бари"
: "Паби"
};
})
// ua = FileAttachment("ukraine.json").json()
// nation = topojson.feature(ua, ua.objects.regions)
// url = (x, y, z) =>
// `https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/${z}/${x}/${y}${
// devicePixelRatio > 1 ? "@2x" : ""
// }?access_token=pk.eyJ1IjoibWJvc3RvY2siLCJhIjoiY2s5ZWRlbTM4MDE0eDNocWJ2aXR2amNmeiJ9.LEyjnNDr_BrxRmI4UDyJAQ`
url = (x, y, z) =>
`https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/${z}/${y}/${x}`
// tiles = tile()
// tile = d3
// .tile()
// .size([width_, height])
// .scale(projection.scale() * 2 * Math.PI)
// .translate(projection([0, 0]))
// projection = d3
// .geoMercator()
// .center([24.011545560099353, 49.83731009153278])
// .scale(scale)
// .translate([width_ / 2, height / 2])
// path = d3.geoPath(projection)
d3_ = require("d3-geo@3", "d3-tile@1")
scale = 300000
width_ = 650
height = 400
cities = [
{ city: "Київ", region: "", peoples: 3706953, sq: 836 },
{ city: "Львів", region: "Львівська", peoples: 925202, sq: 160 },
{ city: "Дніпро", region: "Дніпропетровська", peoples: 1053951, sq: 380 },
{ city: "Харків", region: "Харківська", peoples: 1449871, sq: 350.02 },
{ city: "Запоріжжя", region: "Запорізька", peoples: 772258, sq: 240 },
{ city: "Тернопіль", region: "Тернопільська", peoples: 226029, sq: 59 },
{
city: "Івано-Франківськ",
region: "Івано-Франківська",
peoples: 215288,
sq: 83.73
},
{ city: "Вінниця", region: "Вінницька", peoples: 354639, sq: 113.16 },
{ city: "Одеса", region: "Одеська", peoples: 1010298, sq: 163 },
{ city: "Полтава", region: "Полтавська", peoples: 310755, sq: 77 },
{ city: "Хмельницький", region: "Хмельницька", peoples: 251077, sq: 93.05 },
{ city: "Миколаїв", region: "Миколаївська", peoples: 509102, sq: 260 },
{ city: "Житомир", region: "Житомирська", peoples: 282823, sq: 61 },
{ city: "Рівне", region: "Рівненська", peoples: 245323, sq: 58.24 },
{ city: "Чернігів", region: "Чернігівська", peoples: 296500, sq: 79 },
{ city: "Черкаси", region: "Черкаська", peoples: 292761, sq: 69 },
{ city: "Кропивницький", region: "Кіровоградська", peoples: 250629, sq: 103 },
{ city: "Суми", region: "Сумська", peoples: 292139, sq: 95.38 },
{ city: "Луцьк", region: "Волинська", peoples: 205585, sq: 42 },
{ city: "Чернівці", region: "Чернівецька", peoples: 236691, sq: 153 },
{ city: "Ужгород", region: "Закарпатська", peoples: 115568, sq: 31.56 },
{ city: "Херсон", region: "Херсонська", peoples: 324424, sq: 68 },
{ city: "Донецьк", region: "Донецька", peoples: 1007440, sq: 571 },
{ city: "Луганськ", region: "Луганська", peoples: 459294, sq: 286.2 },
{
city: "Сімферополь",
region: "Автономна Республіка Крим",
peoples: 338038,
sq: 107.41
}
]
data = FileAttachment("combined_output@1.csv").csv()
// vis1 = Plot.plot({
// // style: { background: "#eee" },
// width: width_,
// height: height,
// // color: { scheme: "YlGnBu" },
// color: {
// // type: "linear",
// // type: "quantize",
// legend: true
// // scheme: "BuYlRd"
// // range: ["#aaa", "#777", "orange", "orangered"]
// },
// projection: d3
// .geoMercator()
// .scale(scale)
// .center([24.011545560099353, 49.83731009153278])
// .translate([width_ / 2, height / 2]),
// // r: { range: [0, 10] },
// marks: [
// () => svg`<svg style="opacity:.7" viewBox="0 0 ${width_} ${height}">
// ${tiles.map(
// ([x, y, z], i, { translate: [tx, ty], scale: k }) => svg`
// <image xlink:href="${url(x, y, z)}" x="${Math.round(
// (x + tx) * k
// )}" y="${Math.round((y + ty) * k)}" width="${k}" height="${k}">
// `
// )}
// </svg>`,
// Plot.dot(data, {
// x: "lon",
// y: "lat",
// r: 1.5,
// stroke: "red",
// fill: "red",
// fillOpacity: 0.2
// })
// ]
// // caption: htl.html`The voyage of Charles Darwin aboard HMS <i>Beagle</i>, 1831–1836.`
// })
viewof select = Inputs.select(
["Всі типи", "restaurant", "bar", "pub", "cafe"],
{
label: "Оберіть тип закладів для детальної інформації по ним"
}
)
city1 = maps(data, select, cities, "Львів", 350, 300, 75000)
city2 = maps(data, select, cities, "Вінниця", 350, 300, 75000)
city3 = maps(data, select, cities, "Дніпро", 350, 300, 75000)
city4 = maps(data, select, cities, "Київ", 350, 300, 75000)
city5 = maps(data, select, cities, "Запоріжжя", 350, 300, 75000)
city6 = maps(data, select, cities, "Івано-Франківськ", 350, 300, 75000)
city7 = maps(data, select, cities, "Одеса", 350, 300, 75000)
city8 = maps(data, select, cities, "Житомир", 350, 300, 75000)
city9 = maps(data, select, cities, "Рівне", 350, 300, 75000)
city10 = maps(data, select, cities, "Луцьк", 350, 300, 75000)
city11 = maps(data, select, cities, "Полтава", 350, 300, 75000)
city12 = maps(data, select, cities, "Ужгород", 350, 300, 75000)
city13 = maps(data, select, cities, "Харків", 350, 300, 75000)
city14 = maps(data, select, cities, "Херсон", 350, 300, 75000)
city15 = maps(data, select, cities, "Кропивницький", 350, 300, 75000)
city16 = maps(data, select, cities, "Хмельницький", 350, 300, 75000)
city17 = maps(data, select, cities, "Чернігів", 350, 300, 75000)
city18 = maps(data, select, cities, "Тернопіль", 350, 300, 75000)
city19 = maps(data, select, cities, "Черкаси", 350, 300, 75000)
city20 = maps(data, select, cities, "Миколаїв", 350, 300, 75000)
city21 = maps(data, select, cities, "Чернівці", 350, 300, 75000)
city22 = maps(data, select, cities, "Суми", 350, 300, 75000)
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.
