Public
Edited
Jun 15, 2022
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
attractions_graph_2 = {

const attr_reg = vl.markBar()
.title({ text: 'Регионы', anchor: 'start', fontSize: 16, fontFamily: 'Ubuntu' })
.width(500)
.encode(
vl.y().fieldN('Регион').sort('-x').title(false).axis({labelSize: 16}),
vl.x().sum(select).title('Число достопримечательностей').axis({format: 'f'}).scale({domain: [0, 1050]}),
vl.color().fieldN('Федеральный округ').scale({
range: usedColors
}).legend(false),
vl.tooltip().fieldN("Федеральный округ")
);

const attr_regLabel = vl.markText({dx: 4, align: 'left'})
.width(600)
.encode(
vl.y().fieldN('Регион').sort('-x'),
vl.x().sum(select),
vl.color().value('grey'),
vl.size().value(12),
vl.text().sum(select)
);

const attr_fo = vl.markBar()
.title({ text: 'Федеральные округа', anchor: 'start', fontSize: 16, fontFamily: 'Ubuntu' })
.width(400)
.encode(
vl.y().sum(select).title(false).axis({format: 'f', fontFamily: 'Ubuntu'}).scale({domain: [0, 6000]}),
vl.x().fieldN('Федеральный округ').sort('-x').title(false),
vl.color().fieldN('Федеральный округ').scale({
range: usedColors
}).legend(false),
vl.tooltip().sum(select)
);

return vl.hconcat(vl.layer(attr_reg, attr_regLabel), vl.layer(attr_fo))
.data(attractions)
.render();
}
Insert cell
Insert cell
Insert cell
Insert cell
select_attr_for_Circle = {
const objectLength = Object.keys(attractions[0]).length;
return Object.keys(attractions[0]).slice(4, objectLength-2);
}
Insert cell
Insert cell
Insert cell
attractions = FileAttachment("Statistics of regions by location of attractions - Лист1 (3).csv").csv()
Insert cell
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
Insert cell
// беру эти цвета
//['#ff5050', '#e63e74', '#ff763c', '#8a4996', '#534c90', '#1d487b', '#003f5d', '#00323f']
Insert cell
usedColors = ['#64626f', '#737180', '#828091', '#9290a2', '#a2a0b4', '#b2b0c6','#c2c1d9', '#d2d2ec', '#e3e3ff']
Insert cell

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.
Learn more