hw started
This commit is contained in:
=
@@ -7,7 +7,8 @@ block variables
|
|||||||
Photography: './photography-details.html',
|
Photography: './photography-details.html',
|
||||||
Table: './table.html',
|
Table: './table.html',
|
||||||
Institute: './images/institute.png',
|
Institute: './images/institute.png',
|
||||||
"SVG Playground": './svg_playground.html'
|
"SVG Playground": './svg_playground.html',
|
||||||
|
"Graph": './svg_playground.html'
|
||||||
};
|
};
|
||||||
|
|
||||||
var smallCards = [
|
var smallCards = [
|
||||||
|
|||||||
43
current_site/src/pages/graph.pug
Normal file
43
current_site/src/pages/graph.pug
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
include ../components/mixins.pug
|
||||||
|
|
||||||
|
doctype html
|
||||||
|
html(lang="ru")
|
||||||
|
head
|
||||||
|
meta(charset="utf-8")
|
||||||
|
link(rel="stylesheet" href="CSS/style.css")
|
||||||
|
script(src="graph/d3.v7.min.js")
|
||||||
|
script(src="graph/data.js")
|
||||||
|
script(src="graph/main.js")
|
||||||
|
script(src="graph/table.js")
|
||||||
|
script(src="graph/chart.js")
|
||||||
|
body
|
||||||
|
+navbarMixin("Graph")
|
||||||
|
|
||||||
|
h3 Список самых высоких зданий
|
||||||
|
svg
|
||||||
|
p Значение по оси OX
|
||||||
|
|
||||||
|
input(type="radio" value="0" name="OX" checked)
|
||||||
|
span Год
|
||||||
|
br
|
||||||
|
input(type="radio" value="1" name="OX")
|
||||||
|
span Страна
|
||||||
|
|
||||||
|
p Значение по оси OY
|
||||||
|
p#errorDisplay(hidden) Выберете хотя бы одно
|
||||||
|
|
||||||
|
input(type="checkbox" value="0" name="OY" checked)
|
||||||
|
span Min
|
||||||
|
br
|
||||||
|
input(type="checkbox" value="1" name="OY")
|
||||||
|
span Max
|
||||||
|
|
||||||
|
br
|
||||||
|
select#graphType
|
||||||
|
option(value="0" selected) Точечная
|
||||||
|
option(value="1") Гистограма
|
||||||
|
button#drawButton Рисовать
|
||||||
|
|
||||||
|
br
|
||||||
|
button#tableVisibilityButton Скрыть Таблицу
|
||||||
|
table#build
|
||||||
120
current_site/src/pages/graph/chart.js
Normal file
120
current_site/src/pages/graph/chart.js
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
// Входные данные:
|
||||||
|
// data - исходный массив (например, buildings)
|
||||||
|
// key - поле, по которому осуществляется группировка
|
||||||
|
|
||||||
|
function createArrGraph(data, key) {
|
||||||
|
|
||||||
|
const groupObj = d3.group(data, d => d[key]);
|
||||||
|
|
||||||
|
let arrGraph = [];
|
||||||
|
for (let entry of groupObj) {
|
||||||
|
const minMax = d3.extent(entry[1].map(d => d['Высота']));
|
||||||
|
arrGraph.push({ labelX: entry[0], values: minMax });
|
||||||
|
}
|
||||||
|
|
||||||
|
return arrGraph;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
|
||||||
|
// значения по оси ОХ
|
||||||
|
|
||||||
|
// создаем массив для построения графика
|
||||||
|
let arrGraph = createArrGraph(data, keyX);
|
||||||
|
if(keyX=="Год"){
|
||||||
|
arrGraph = d3.sort(arrGraph, (x,y)=>Number(x["labelX"])-Number(y["labelX"]));
|
||||||
|
}
|
||||||
|
const svg = d3.select("svg")
|
||||||
|
svg.selectAll('*').remove();
|
||||||
|
|
||||||
|
// создаем словарь с атрибутами области вывода графика
|
||||||
|
const attr_area = {
|
||||||
|
width: parseFloat(svg.style('width')),
|
||||||
|
height: parseFloat(svg.style('height')),
|
||||||
|
marginX: 50,
|
||||||
|
marginY: 50
|
||||||
|
}
|
||||||
|
|
||||||
|
// создаем шкалы преобразования и выводим оси
|
||||||
|
const [scX, scY] = createAxis(svg, arrGraph, attr_area);
|
||||||
|
|
||||||
|
// рисуем график
|
||||||
|
|
||||||
|
const scaleYDomain = d3.extent(arrGraph.map(d => d.values[1]));
|
||||||
|
if (drawMin && drawMax){
|
||||||
|
createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0,graphtype,0,scaleYDomain)
|
||||||
|
createChart(svg, arrGraph, scX, scY, attr_area, "red", 1,graphtype,0,scaleYDomain)
|
||||||
|
}
|
||||||
|
else if (drawMin) {
|
||||||
|
createChart(svg, arrGraph, scX, scY, attr_area, "blue", 0,graphtype,1,scaleYDomain)
|
||||||
|
}
|
||||||
|
else if (drawMax) {
|
||||||
|
createChart(svg, arrGraph, scX, scY, attr_area, "red", 1,graphtype,1,scaleYDomain)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createAxis(svg, data, attr_area) {
|
||||||
|
// находим интервал значений, которые нужно отложить по оси OY
|
||||||
|
// максимальное и минимальное значение и максимальных высот по каждой стране
|
||||||
|
const [min, max] = d3.extent(data.map(d => d.values[1]));
|
||||||
|
|
||||||
|
// функция интерполяции значений на оси
|
||||||
|
// по оси ОХ текстовые значения
|
||||||
|
const scaleX = d3.scaleBand()
|
||||||
|
.domain(data.map(d => d.labelX))
|
||||||
|
.range([0, attr_area.width - 2 * attr_area.marginX]);
|
||||||
|
|
||||||
|
const scaleY = d3.scaleLinear()
|
||||||
|
.domain([min * 0.85, max * 1.1])
|
||||||
|
.range([attr_area.height - 2 * attr_area.marginY, 0]);
|
||||||
|
|
||||||
|
// создание осей
|
||||||
|
const axisX = d3.axisBottom(scaleX); // горизонтальная
|
||||||
|
const axisY = d3.axisLeft(scaleY); // вертикальная
|
||||||
|
|
||||||
|
// отрисовка осей в SVG-элементе
|
||||||
|
svg.append("g")
|
||||||
|
.attr("transform", `translate(${attr_area.marginX},
|
||||||
|
${attr_area.height - attr_area.marginY})`)
|
||||||
|
.call(axisX)
|
||||||
|
.selectAll("text") // подписи на оси - наклонные
|
||||||
|
.style("text-anchor", "end")
|
||||||
|
.attr("dx", "-.8em")
|
||||||
|
.attr("dy", ".15em")
|
||||||
|
.attr("transform", d => "rotate(-45)");
|
||||||
|
|
||||||
|
svg.append("g")
|
||||||
|
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||||
|
.call(axisY);
|
||||||
|
|
||||||
|
return [scaleX, scaleY]
|
||||||
|
}
|
||||||
|
|
||||||
|
function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx,isHistogram,horisontalScale,scaleYDomain) {
|
||||||
|
if (isHistogram){
|
||||||
|
svg.selectAll(".dot")
|
||||||
|
.data(data)
|
||||||
|
.enter()
|
||||||
|
.append("rect")
|
||||||
|
.attr("x", d => scaleX(d.labelX)+valueIdx*6)
|
||||||
|
.attr("y", d => scaleY(d.values[valueIdx]))
|
||||||
|
.attr("width",6*(horisontalScale+1))
|
||||||
|
.attr("height",d => scaleY(scaleYDomain[0]*0.85)-scaleY(d.values[valueIdx]))
|
||||||
|
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||||
|
.style("fill", color)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
const r = 4;
|
||||||
|
|
||||||
|
svg.selectAll(".dot")
|
||||||
|
.data(data)
|
||||||
|
.enter()
|
||||||
|
.append("circle")
|
||||||
|
.attr("r", r)
|
||||||
|
.attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2+valueIdx*4)
|
||||||
|
.attr("cy", d => scaleY(d.values[valueIdx]))
|
||||||
|
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||||
|
.style("fill", color)
|
||||||
|
}
|
||||||
|
}
|
||||||
2
current_site/src/pages/graph/d3.v7.min.js
vendored
Normal file
2
current_site/src/pages/graph/d3.v7.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
514
current_site/src/pages/graph/data.js
Normal file
514
current_site/src/pages/graph/data.js
Normal file
@@ -0,0 +1,514 @@
|
|||||||
|
const buildings= [
|
||||||
|
{
|
||||||
|
"Название": "Бурдж-Халифа",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "ОАЭ",
|
||||||
|
"Город": "Дубай",
|
||||||
|
"Год": 2010,
|
||||||
|
"Высота": 828
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Варшавская радиомачта",
|
||||||
|
"Тип": "Антенная мачта",
|
||||||
|
"Страна": "Польша",
|
||||||
|
"Город": "Константинов",
|
||||||
|
"Год": 1974,
|
||||||
|
"Высота": 646.38
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Tokyo Skytree",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "Япония",
|
||||||
|
"Город": "Токио",
|
||||||
|
"Год": 2012,
|
||||||
|
"Высота": 634
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Шанхайская башня",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Шанхай",
|
||||||
|
"Год": 2013,
|
||||||
|
"Высота": 632
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Телерадиомачта KVLY-TV",
|
||||||
|
"Тип": "Радиомачта",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Бланчард",
|
||||||
|
"Год": 1963,
|
||||||
|
"Высота": 629
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Телебашня Гуанчжоу",
|
||||||
|
"Тип": "Гиперболоидная башня",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Гуанчжоу",
|
||||||
|
"Год": 2009,
|
||||||
|
"Высота": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Международный финансовый центр Пинань",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Шэньчжэнь",
|
||||||
|
"Год": 2017,
|
||||||
|
"Высота": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Lotte World Tower",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Южная Корея",
|
||||||
|
"Город": "Сеул",
|
||||||
|
"Год": 2017,
|
||||||
|
"Высота": 555
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Си-Эн Тауэр",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "Канада",
|
||||||
|
"Город": "Торонто",
|
||||||
|
"Год": 1976,
|
||||||
|
"Высота": 553
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Останкинская башня",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "Россия",
|
||||||
|
"Город": "Москва",
|
||||||
|
"Год": 1967,
|
||||||
|
"Высота": 540.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Уиллис-тауэр",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Чикаго",
|
||||||
|
"Год": 1974,
|
||||||
|
"Высота": 527.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Тайбэй 101",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Тайвань",
|
||||||
|
"Город": "Тайбэй",
|
||||||
|
"Год": 2004,
|
||||||
|
"Высота": 509.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Шанхайский всемирный финансовый центр",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Шанхай",
|
||||||
|
"Год": 2008,
|
||||||
|
"Высота": 492
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Международный коммерческий центр",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Гонконг",
|
||||||
|
"Город": "Гонконг",
|
||||||
|
"Год": 2009,
|
||||||
|
"Высота": 484
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Восточная жемчужина",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Шанхай",
|
||||||
|
"Год": 1994,
|
||||||
|
"Высота": 467.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Лахта-центр",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Россия",
|
||||||
|
"Город": "Санкт-Петербург",
|
||||||
|
"Год": 2018,
|
||||||
|
"Высота": 462
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Landmark 81",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Вьетнам",
|
||||||
|
"Город": "Хошимин",
|
||||||
|
"Год": 2018,
|
||||||
|
"Высота": 461.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "875 Норт-Мичиган-авеню",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Чикаго",
|
||||||
|
"Год": 1969,
|
||||||
|
"Высота": 457.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Петронас. башня 1 и 2",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Малайзия",
|
||||||
|
"Город": "Куала-Лумпур",
|
||||||
|
"Год": 1998,
|
||||||
|
"Высота": 452
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Финансовый центр Наньцзин-Гринлэнд",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Нанкин",
|
||||||
|
"Год": 2009,
|
||||||
|
"Высота": 450
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Эмпайр-стейт-билдинг",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Нью-Йорк",
|
||||||
|
"Год": 1931,
|
||||||
|
"Высота": 448.7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Международный финансовый центр. башня зап.",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Гуанчжоу",
|
||||||
|
"Год": 2010,
|
||||||
|
"Высота": 437.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Kingkey 100",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Шэньчжэнь",
|
||||||
|
"Год": 2011,
|
||||||
|
"Высота": 439.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Бордже Милад",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "Иран",
|
||||||
|
"Город": "Тегеран",
|
||||||
|
"Год": 2003,
|
||||||
|
"Высота": 435
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Парк-авеню. 432",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Нью-Йорк",
|
||||||
|
"Год": 2015,
|
||||||
|
"Высота": 425.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Международная гостиница и башня Трампа",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Чикаго",
|
||||||
|
"Год": 2009,
|
||||||
|
"Высота": 423.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Менара Куала-Лумпур",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "Малайзия",
|
||||||
|
"Город": "Куала-Лумпур",
|
||||||
|
"Год": 1995,
|
||||||
|
"Высота": 421
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Цзинь Мао",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Шанхай",
|
||||||
|
"Год": 1999,
|
||||||
|
"Высота": 420.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Экибастузская ГРЭС-2",
|
||||||
|
"Тип": "Дымовая труба",
|
||||||
|
"Страна": "Казахстан",
|
||||||
|
"Город": "Экибастуз",
|
||||||
|
"Год": 1987,
|
||||||
|
"Высота": 419.7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Международный финансовый центр",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Гонконг",
|
||||||
|
"Город": "Гонконг",
|
||||||
|
"Год": 2003,
|
||||||
|
"Высота": 415.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Тяньцзиньская телебашня",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Тяньцзинь",
|
||||||
|
"Год": 1991,
|
||||||
|
"Высота": 415.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Башня Аль-Хамра",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Кувейт",
|
||||||
|
"Город": "Кувейт",
|
||||||
|
"Год": 2010,
|
||||||
|
"Высота": 412
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Пекинская телебашня",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Пекин",
|
||||||
|
"Год": 1992,
|
||||||
|
"Высота": 405
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Башня CITIC",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Гуанчжоу",
|
||||||
|
"Год": 1997,
|
||||||
|
"Высота": 391.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Киевская телебашня",
|
||||||
|
"Тип": "Решётчатая мачта",
|
||||||
|
"Страна": "Украина",
|
||||||
|
"Город": "Киев",
|
||||||
|
"Год": 1973,
|
||||||
|
"Высота": 385
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Башня Сёньхин",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Шэньчжэнь",
|
||||||
|
"Год": 1996,
|
||||||
|
"Высота": 384
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Абу-Даби Плаза",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Казахстан",
|
||||||
|
"Город": "Астана",
|
||||||
|
"Год": 2015,
|
||||||
|
"Высота": 382
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Бурдж-Мохаммед-бин-Рашид",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "ОАЭ",
|
||||||
|
"Город": "Абу-Даби",
|
||||||
|
"Год": 2014,
|
||||||
|
"Высота": 381
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Inco Superstack",
|
||||||
|
"Тип": "Дымовая труба",
|
||||||
|
"Страна": "Канада",
|
||||||
|
"Город": "Copper Cliff",
|
||||||
|
"Год": 1971,
|
||||||
|
"Высота": 380
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Тантекс-Скай-Тауэр",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Тайвань",
|
||||||
|
"Город": "Гаосюн",
|
||||||
|
"Год": 1997,
|
||||||
|
"Высота": 378
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "JW Marriott Marquis Dubai. 1 и 2",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "ОАЭ",
|
||||||
|
"Город": "Дубай",
|
||||||
|
"Год": 2010,
|
||||||
|
"Высота": 376
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Ташкентская телебашня",
|
||||||
|
"Тип": "Башня",
|
||||||
|
"Страна": "Узбекистан",
|
||||||
|
"Город": "Ташкент",
|
||||||
|
"Год": 1985,
|
||||||
|
"Высота": 374.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Башня Федерация «Восток»",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Россия",
|
||||||
|
"Город": "Москва",
|
||||||
|
"Год": 2016,
|
||||||
|
"Высота": 374
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Сентрал-плаза",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Гонконг",
|
||||||
|
"Город": "Гонконг",
|
||||||
|
"Год": 1992,
|
||||||
|
"Высота": 374
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Башня Освобождения",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "Кувейт",
|
||||||
|
"Город": "Кувейт",
|
||||||
|
"Год": 1996,
|
||||||
|
"Высота": 372
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Телебашня «Коктобе»",
|
||||||
|
"Тип": "Башня",
|
||||||
|
"Страна": "Казахстан",
|
||||||
|
"Город": "Алматы",
|
||||||
|
"Год": 1983,
|
||||||
|
"Высота": 371.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Дымовая труба электростанции",
|
||||||
|
"Тип": "Дымовая труба",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Homer City",
|
||||||
|
"Год": 1977,
|
||||||
|
"Высота": 371
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Дымовая труба Берёзовской ГРЭС",
|
||||||
|
"Тип": "Дымовая труба",
|
||||||
|
"Страна": "Россия",
|
||||||
|
"Город": "Шарыпово",
|
||||||
|
"Год": 1985,
|
||||||
|
"Высота": 370
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Рижская телебашня",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "Латвия",
|
||||||
|
"Город": "Рига",
|
||||||
|
"Год": 1987,
|
||||||
|
"Высота": 368.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Берлинская телебашня",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "Германия",
|
||||||
|
"Город": "Берлин",
|
||||||
|
"Год": 1969,
|
||||||
|
"Высота": 368
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Дымовая труба электростанции.",
|
||||||
|
"Тип": "Дымовая труба",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Маундсвилл",
|
||||||
|
"Год": 1968,
|
||||||
|
"Высота": 367.6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Башня Банка Китая",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Гонконг",
|
||||||
|
"Город": "Гонконг",
|
||||||
|
"Год": 1990,
|
||||||
|
"Высота": 367.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Башня Банка Америки",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Нью-Йорк",
|
||||||
|
"Год": 2008,
|
||||||
|
"Высота": 366
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Башня Алмас",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "ОАЭ",
|
||||||
|
"Город": "Дубай",
|
||||||
|
"Год": 2008,
|
||||||
|
"Высота": 363
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Дымовая труба электростанции в Трбовле",
|
||||||
|
"Тип": "Дымовая труба",
|
||||||
|
"Страна": "Словения",
|
||||||
|
"Город": "Трбовле",
|
||||||
|
"Год": 1976,
|
||||||
|
"Высота": 360
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Endesa Termic ",
|
||||||
|
"Тип": "Дымовая труба",
|
||||||
|
"Страна": "Испания",
|
||||||
|
"Город": "Ферроль",
|
||||||
|
"Год": 1974,
|
||||||
|
"Высота": 356
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "SEG Plaza",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "КНР",
|
||||||
|
"Город": "Шэньчжэнь",
|
||||||
|
"Год": 2000,
|
||||||
|
"Высота": 355.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "First Canadian Place",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Канада",
|
||||||
|
"Город": "Торонто",
|
||||||
|
"Год": 1976,
|
||||||
|
"Высота": 355
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Эмиратская офисная башня",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "ОАЭ",
|
||||||
|
"Город": "Дубай",
|
||||||
|
"Год": 2000,
|
||||||
|
"Высота": 354.6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "ОКО Южная башня",
|
||||||
|
"Тип": "Небоскрёб",
|
||||||
|
"Страна": "Россия",
|
||||||
|
"Город": "Москва",
|
||||||
|
"Год": 2015,
|
||||||
|
"Высота": 354
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Виннцкая телемачта",
|
||||||
|
"Тип": "Радиомачта",
|
||||||
|
"Страна": "Украина",
|
||||||
|
"Город": "Винница",
|
||||||
|
"Год": 1961,
|
||||||
|
"Высота": 354
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Медеплавильный завод",
|
||||||
|
"Тип": "Дымовая труба",
|
||||||
|
"Страна": "Румыния",
|
||||||
|
"Город": "Бая-Маре",
|
||||||
|
"Год": 1995,
|
||||||
|
"Высота": 351.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Стратосфера Лас-Вегас",
|
||||||
|
"Тип": "Бетонная башня",
|
||||||
|
"Страна": "США",
|
||||||
|
"Город": "Лас-Вегас",
|
||||||
|
"Год": 1996,
|
||||||
|
"Высота": 350.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Название": "Дымовая труба Сырдарьинской электростанции",
|
||||||
|
"Тип": "Дымовая труба",
|
||||||
|
"Страна": "Узбекистан",
|
||||||
|
"Город": "Сырдарья",
|
||||||
|
"Год": 1980,
|
||||||
|
"Высота": 350
|
||||||
|
}
|
||||||
|
]
|
||||||
50
current_site/src/pages/graph/main.js
Normal file
50
current_site/src/pages/graph/main.js
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
showTable('build', buildings);
|
||||||
|
let tableIsDisplayed = true;
|
||||||
|
tableVisibilityButton.addEventListener("click", () => {
|
||||||
|
if (tableIsDisplayed) {
|
||||||
|
clearTable('build')
|
||||||
|
tableVisibilityButton.innerHTML = "Показать таблицу";
|
||||||
|
} else {
|
||||||
|
showTable('build', buildings);
|
||||||
|
tableVisibilityButton.innerHTML = "Скрыть таблицу";
|
||||||
|
}
|
||||||
|
tableIsDisplayed = !tableIsDisplayed;
|
||||||
|
})
|
||||||
|
updateGraph();
|
||||||
|
drawButton.addEventListener("click", () => {
|
||||||
|
clearGraph();
|
||||||
|
updateGraph();
|
||||||
|
});
|
||||||
|
document.querySelectorAll("[name=\"OY\"]").forEach((x) => {
|
||||||
|
x.addEventListener("click", () => { d3.select("#drawButton").attr("class", getOY().length == 0 ? "error" : ""); })
|
||||||
|
})
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function updateGraph() {
|
||||||
|
const keyX = ["Год", "Страна"][getOX()];
|
||||||
|
const yAxis = getOY();
|
||||||
|
d3.select("#drawButton").attr("class", yAxis.length == 0 ? "error" : "");
|
||||||
|
drawGraph(buildings, keyX, yAxis.includes(0), yAxis.includes(1), getGraphType());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function getOX() {
|
||||||
|
return Number(document.querySelector("input[name=\"OX\"]:checked").value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getOY() {
|
||||||
|
return d3.map(document.querySelectorAll("input[name=\"OY\"]:checked"),
|
||||||
|
(x) => Number(x.value));
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearGraph() {
|
||||||
|
d3.select("svg").selectAll('*').remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getGraphType() {
|
||||||
|
return Number(graphType.value);
|
||||||
|
}
|
||||||
36
current_site/src/pages/graph/table.js
Normal file
36
current_site/src/pages/graph/table.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
// создание таблицы
|
||||||
|
const showTable = (idTable, data) => {
|
||||||
|
const table = d3.select("#" + idTable);
|
||||||
|
|
||||||
|
// создание строк таблицы (столько, сколько элементов в массиве)
|
||||||
|
const rows = table
|
||||||
|
.selectAll("tr")
|
||||||
|
.data(data)
|
||||||
|
.enter()
|
||||||
|
.append('tr')
|
||||||
|
.style("display", "");
|
||||||
|
|
||||||
|
// создание ячеек каждой строки на основе каждого элемента массива
|
||||||
|
const cells = rows
|
||||||
|
.selectAll("td")
|
||||||
|
.data(d => Object.values(d))
|
||||||
|
.enter()
|
||||||
|
.append("td")
|
||||||
|
.text(d => d);
|
||||||
|
|
||||||
|
// создание шапки таблицы
|
||||||
|
const head = table
|
||||||
|
.insert("tr", "tr")
|
||||||
|
.selectAll("th")
|
||||||
|
.data(d => Object.keys(data[0]))
|
||||||
|
.enter()
|
||||||
|
.append("th")
|
||||||
|
.text(d => d);
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearTable = (idTable) => {
|
||||||
|
const table = document.getElementById(idTable);
|
||||||
|
while (table.children.length > 0) {
|
||||||
|
table.removeChild(table.children[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
include ../components/mixins.pug
|
|
||||||
|
|
||||||
doctype html
|
doctype html
|
||||||
html(lang="ru")
|
html(lang="ru")
|
||||||
|
|||||||
Reference in New Issue
Block a user