Coder Social home page Coder Social logo

datavis.homework's Introduction

Datavis homework

Данные

В данных содержатся массив стран с базовой информацией о каждой стране и изменение во времени пяти параметров:

  • population - население;
  • gdp - ВВП;
  • child-mortality - детская смертность;
  • life-expectancy - продолжительность жизни;
  • fertility-rate - коэффициент фертильности.

Data

Data contains an array of countries with information about country and some parameters changing over time:

  • population;
  • gdp;
  • child-mortality;
  • life-expectancy;
  • fertility-rate.

Первый шаг

Построить пузырьковую диаграмму, на которой:

  • Позиция элементов по осям x и y определяется заданными пользователем при помощи селекторов параметрами;
  • Площадь элементов определяется заданным пользователем при помощи селектора параметром;
  • Оси динамичиски меняются при изменении параметров;
  • Цвет элементов задается на основе параметра region;

First step

Create a bubble chart on which:

  • X and Y positions of elements is defined by selected parameters;
  • An area of bubbles is defined by selected parameter;
  • Axises changing dynamically with parameters changes;
  • Bubbles is colored by region field;

Второй шаг

Реализовать динамическое обновление пузырьковой диаграммы при изменении позиции временного ползунка.

Second step

Update bubble chart with time slider position changing.

Третий шаг

Построить столбчатую диаграмму, на которой:

  • Отображается среднее значение по выбранному параметру для всех стран каждого из регионов:
  • Позиция элементов по оси х соответствует порядку их следования в легенде;
  • Цвета элементов определяются регионом и соответствуют цветовой кодировки в легенде и на пузырчатой диаграмме; Столбчатая диаграмма должна динамически меняться при изменении параметра и позиции временного ползунка.

Third step

Create a bar chart on which:

  • Mean value of chosen parameter for each country in region is shown;
  • An order of bars matches the legend;
  • Bars is colored by region field; Bar chart should update on parameter or time slider change.

Четвертый шаг

При клике на элемент столбчатой диаграммы данный элемент выделяется среди других элементов при помощи прозрачности. На пузырьковой диаграмме отображаются только страны, находящиеся в выбранном на столбчатой диаграмме регионе.

Fourth step

On click to the bar this bar should be highlighted using opacity. Bouble chart must display only disply only elements of the chosen region.

Пятый шаг

При клике на элемент пузырчатой диаграммы:

  • Выбранный элемент выделяется среди прочих элементов пузырьковой диаграммы при помощи контура и отрисовывается поверх прочих элементов.
  • На основе данных о выбранной стране строится линейная диаграмма, на которой:
    • По оси x оторажена временная шкала;
    • По оси y отложены значения выбранного параметра; Линейная диаграмма должна динамически меняться при выборе другой страны и изменении выбранного параметра.

Fifth step

On the bubble:

  • Chosen bubble must be drown over other elements in bubble chart and highlighted using stroke;
  • Based on selected country data must be created a line chart on which:
    • X axes represents a time scale;
    • Y axes represents choosen parameter. Line chart must update on parameter or time slider change.

Сдача

Для сдачи необходимо:

  • Сделать fork данного репозитория;
  • Внести нобходимые изменения;
  • Настроить Github Pages в настройках своего репозитория;
  • Прислать ссылку на страницу решения на Github Pages в тг(@PapaKKKarlo).

Submission

To submit the homework:

  • Make a fork of current repository;
  • Make changes;
  • Configure Github Pages in repository settings;
  • Submit a link to the solution page in tg(@PapaKKKarlo).

Для отладки вы можете запустить локальный сервер на python.

For debugging, you can run a local server in python.

datavis.homework's People

Contributors

papakkkarlo avatar brizzl98 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.