Визуализируем данные в JavaScript с помощью D3.js

•

0 likes•757 views

FDConf

Александр Кузнецов «Визуализируем данные в JavaScript с помощью D3.js» Frontend Dev Conf'14 www.fdconf.by

Technology Education

Web Standards
Open Source
Plenty of
examples
Need a Developer
Learning Curve

Sample data
00
01
01
02
02
03
03
04
04
05
05
06
06
07
07
08
08
09
09
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
20
20
21
21
22
22
23
23
00
Sun
Mon
Tue
Wed
Thu
Fri
Sat

00
01
01
02
02
03
03
04
04
05
05
06
06
07
07
08
08
09
09
10
10
11
11
12
12
13
Sun
Mon
2
Tue
Wed
Thu
Hour
range
Day of
week
Commits
number

Sample data
00
01
01
02
02
03
03
04
04
05
05
06
06
07
07
08
08
09
09
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
20
20
21
21
22
22
23
23
00
Sun 1 0 0 0 0 0 0 0 0 0 1 5 9 9 6 9 2 1 2 0 2 11 2 0
Mon 0 2 1 1 0 0 0 0 0 0 3 2 7 15 2 11 13 7 6 1 1 3 4 7
Tue 5 2 1 0 0 0 1 0 4 1 0 9 6 8 5 4 10 6 5 4 1 2 5 3
Wed 1 2 2 0 1 0 0 0 0 1 1 4 12 6 2 7 6 5 4 3 0 3 13 10
Thu 3 0 2 1 2 0 0 1 0 0 2 2 7 10 3 5 5 7 6 2 3 6 4 7
Fri 3 3 3 0 0 1 0 0 1 0 4 5 8 8 3 2 9 4 7 2 2 3 4 2
Sat 1 0 0 0 1 0 0 0 0 0 0 0 5 3 3 0 2 1 0 2 7 3 4 3

Data-driven transformations
Data
selection

Data-driven transformations
Data
binding
Data
selection

Data-driven transformations
Data
binding
Data
selection
Entering
data

Scales
Input
domain
Output
rangeScaling
algorithm

Thank you!
Alexander Kuznetsov
alexkuznetsov@stiltsoft.com
https://www.facebook.com/kuznetsov.sasha

More from FDConf

Современные интерактивные приложения в вебе требуют особого внимания к работе с непрерывно изменяющимися, динамическими данными. RxJS – библиотека, построенная на паттерне Observable/Observer, выражает последовательность изменений в состоянии приложения через внешние потоки данных и предоставляет широкий набор средств для создания, фильтрации, комбинирования таких потоков удобным для разработчика способом. Для наглядной демонстрации преимуществ такого подхода в докладе будут рассмотрены некоторые примеры с использованием библиотеки React, они помогут осознать основные принципы связывания потоков данных и представления, а также увидеть гибкость, компактность и практическую ценность предлагаемого библиотекой RxJS метода.

Антон Киршанов - «Квант изменения. Реактивные реакции на React.

FDConf

Насколько сложно создать виртуальный тур и добавить на сайт? Я расскажу как сделать это за 5 минут, мы добавим его на веб страницу, откроем в мобильном браузере и запустим в очках виртуальной реальности. Разберёмся как всё устроено, рассмотрим библиотеку THREE.js и технологию WebGL.

Игорь Еростенко - Создаем виртуальный тур

FDConf

ClojureScript, Elm, PureScript, CoffeeScript, Dart, Kotlin. Этот список языков, так или иначе транспилирующихся в JavaScript можно продолжать бесконечно. В своем докладе я расскажу о Reason - еще одной попытке, в этот раз от Facebook?влиться в это движение. Или все же нет? В докладе я сфокусируюсь не столько на том, как Reason крут, сколько на том, какую ценность он составляет для JavaScript разрабочика, кому он нужен и свой реальный опыт практического использования.

Илья Климов - Reason: маргиналы против хайпа

FDConf

За 7 лет развития World of Tanks, сложность игрового клиента и сервера значительно выросла. Если сервер можно разделить на сервисы, то клиент остается огромным монолитом в миллионы строк кода на ActionScript, C++ и Python. Мы решили проблему сложности, встаиванием браузера в игровой клиент и заменив частично на нативные интерфесы на веб-контент. О преимуществах и недостатках этого подхода я расскажу в своём докладе.

Максим Щепелин - Доставляя веб-контент в игру

FDConf

Александр Черноокий - Как правило "победитель получает все" работает и не раб...

FDConf

Михаил Волчек - Что такое Цифровая мастерская?

FDConf

Radoslav Stankov - Handling GraphQL with React and Apollo

FDConf

Пять лет назад присоединился к команде разработки проекта, над которым до сих пор идёт работа. За это время приложения, создаваемые в рамках проекта, использовали разные фреймворки - от jQuery до React, от Backbone до Angular. Как мы выбираем фреймворк для нашего следующего приложения? Какой фреймворк самый лучший? Как выбрать фреймворк и через год разочароваться в своём выборе? Короткая история о выборах в одном длинном проекте.

Виктор Русакович - Выборы, выборы, все фреймворки… приторны

FDConf

Slobodan Stojanovic - 8 1/2 things about serverless

FDConf

PWA – это сейчас хайп тренд. Google и Microsoft говорят про них на своих конференциях. Twitter и Uber переписывают на них свои мобильные версии веб-приложений. И вот, работая над своим проектом, я решил сделать его Progressive и протестировать на реальных пользователях в production. В этом докладе я расскажу как я это делал и какую пользу это принесло проекту.

Тимофей Лавренюк - Почему мне зашел PWA?

FDConf

Страница должна загружаться быстрее чем 1 секунда; количество серверных запросов должно быть сведено к минимуму; CSS и JS файлы должны быть сжаты и не превышать 50 килобайт…” Это лишь малая часть технических решений и рекомендаций, которыми нас снабжает индустрия в погоне за производительностью. Но во всем этом есть одна проблема – пользователям нет никакого дела до килобайтов, миллисекунд и количества запросов. Производительность – это не математика. Производительность — это восприятие. Именно восприятие может создает впечатление медлительности сайта с малым количеством серверных запросов, в то время как сайт, возвращающий результаты поиска в течение секунд, может восприниматься как достаточно быстрый для пользователя. И именно восприятие пользователя является единственным мерилом производительности вашего сайта. В докладе будут рассмотрены психологические и технические теории, приемы и примеры, позволяющие управлять восприятием пользователя

В погоне за производительностью

FDConf

Полная версия презентации по ссылке: http://goo.gl/1iBNNO ... ничего такого не произойдет :) Их сложно начать писать, нужно мотивировать команду, а самое главное — непонятно, зачем? Ведь можно открыть браузер и в пару кликов проверить все ли в порядке с приложением. Доклад о том, как много мы теряем, если не пишем тесты. Я покажу, с чего начать, какие инструменты и методики можно использовать. Поделюсь собственным опытом разработки JavaScript тестов. Постараюсь показать, как тесты смогут сделать ваш проект лучше.

Если у вас нету тестов...

FDConf

Migrate your React.js application from (m)Observable to Redux

FDConf

Вся презентация по ссылке: goo.gl/WuwMZL Если ваш проект перевалил за миллион строк кода, а количество разработчиков за десяток - то вам уже пришлось столкнутся с проблемами JS и его масштабируемости. В данном докладе будет рассказано о том, как решить эти проблемы, как начать использовать Dart, послойно встраивая его в устаревший код и как растить команду с помощью типизированного языка.

Dart: питание и сила для вашего проекта

FDConf

Modern web applications have constantly growing requirements and their complexity grows exponentially. Some of the biggest challenges in front of us are state management, testability, flexibility and on top of that we need to develop the application at reasonable level of simplicity in order to ease the recruitment process. In this presentation I'll introduce a scalable Angular 2 application architecture, which answers the following requirements: - Testability. - Predictable state management. - Scalable communication layer. - Modular and robust design

Scalable Angular 2 Application Architecture

FDConf

JavaScript является одни из самых популярных языков программирования. На сегодняшний день его можно использовать не только в браузере, но и на сервере, в системах управления баз данных, программировать микроконтроллеры, писать десктопные и мобильные приложения. В данном докладе я расскажу о современном JavaScript и его областях применения (Mongo, CouchDB, Node, Meteor, tessel, PhoneGap, ReactNative и так далее), а также загляну немного в будущее и покажу вам куда он движется (ES2015, ES2016 ... ESxxxx, WebAssembly). И много-много всего интересного с демками)

JavaScript: прошлое, настоящее и будущее.

FDConf

CSSO – инструмент для минификации CSS, который недавно вернулся к активной разработке. Зачем? Дело в том, что минификация CSS – задача сложная. Сейчас нет идеального минификатора, и чтобы эффективным был и делал все правильно. Ведь нужно учитывать не только особенности CSS, который постоянно меняется, но и уровень его поддержки браузерами, их баги, префиксы, хаки и т.д. Все это требует решения ряда непростых задач. Поговорим об этом, а так же принципах работы CSS-минификаторов, новых идеях и развитии CSSO. Подробнее: http://www.slideshare.net/basisjs/csso-compress-css-english-version

CSSO — сжимаем CSS

FDConf

Redux - негласный победитель Flux соревнований, одна из трендовых библиотек 2015 года. Слишком "сырой" для продакшена? Нет, мы так не думаем! Используя силу функционального подхода и модель Event Sourcing'a, Redux позволяет гибко управлять состоянием вашего приложения. В докладе мы расскажем про то, как мы, используя связку Redux+React, переписали с нуля front-end одного из наших продуктов (Лидсканер | leadscanner.ru). Рассмотрим реальные плюсы и минусы данного стека, в частности: работу с side-effects, повторное использование компонентов, тестируемость. Структура: Про нас. Какие перед нами стояли вызовы. Многоуровневая архитектура. Обзор Flux архитектуры. Redux - Predictable state container for JavaScript apps. React как view layer. Повторное использование компонентов. Dumb and Smart components. Feature Folders. Работа с side effects. Обзор подходов организации actionCreators. Middlewares. Redux-saga. Минусы данного стека.

Redux. From twitter hype to production

FDConf

Каждый день появляется по новому JavaScript фрeймворку или новой технологии. И каждый день мы задаемся вопросом, как за всем этим успеть? Константин даст Вам серебряную пулю. Вы будете знать, как быстро разобраться в React, PostCss, RxJS, Redux, CycleJs, Angular и даже в неизвестном супер фреймворке. Увидим, что стоит за трендами технологий 2016. Подробнее: https://mavrin.github.io/pres-be-first/#1

Будь первым

FDConf

Nowadays web apps become inseparable part of our everyday life. But even playing such a big role they still don’t have a lot of advantages the native ones have. Service Worker is designed to break down these barriers. Installing and updating your app, fully controlling the network cache, intercepting network responses, sending push notifications and doing backgrounds updates. All these becomes possible with Service Worker. Is your web app ready to rock?

"Service Worker: Let Your Web App Feel Like a Native "

FDConf

More from FDConf (20)

Антон Киршанов - «Квант изменения. Реактивные реакции на React.

Игорь Еростенко - Создаем виртуальный тур

Илья Климов - Reason: маргиналы против хайпа

Максим Щепелин - Доставляя веб-контент в игру

Александр Черноокий - Как правило "победитель получает все" работает и не раб...

Михаил Волчек - Что такое Цифровая мастерская?

Radoslav Stankov - Handling GraphQL with React and Apollo

Виктор Русакович - Выборы, выборы, все фреймворки… приторны

Slobodan Stojanovic - 8 1/2 things about serverless

Тимофей Лавренюк - Почему мне зашел PWA?

В погоне за производительностью

Если у вас нету тестов...

Migrate your React.js application from (m)Observable to Redux

Dart: питание и сила для вашего проекта

Scalable Angular 2 Application Architecture

JavaScript: прошлое, настоящее и будущее.

CSSO — сжимаем CSS

Redux. From twitter hype to production

Будь первым

"Service Worker: Let Your Web App Feel Like a Native "

Recently uploaded

The microservices honeymoon is over. When starting a new project or revamping a legacy monolith, teams started looking for alternatives to microservices. The Modular Monolith, or 'Modulith', is an architecture that reaps the benefits of (vertical) functional decoupling without the high costs associated with separate deployments. This talk will delve into the advantages and challenges of this progressive architecture, beginning with exploring the concept of a 'module', its internal structure, public API, and inter-module communication patterns. Supported by spring-modulith, the talk provides practical guidance on addressing the main challenges of a Modultith Architecture: finding and guarding module boundaries, data decoupling, and integration module-testing. You should not miss this talk if you are a software architect or tech lead seeking practical, scalable solutions. About the author With two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Victor Rentea

Discover the innovative features and strategic vision that keep WSO2 an industry leader. Explore the exciting 2024 roadmap of WSO2 API management, showcasing innovations, unified APIM/APK control plane, natural language API interaction, and cloud native agility. Discover how open source solutions, microservices architecture, and cloud native technologies unlock seamless API management in today's dynamic landscapes. Leave with a clear blueprint to revolutionize your API journey and achieve industry success!

WSO2's API Vision: Unifying Control, Empowering Developers

WSO2

Stronger Together: Developing an Organizational Strategy for Accessible Desig...

caitlingebhard1

Tracing the root cause of a performance issue requires a lot of patience, experience, and focus. It’s so hard that we sometimes attempt to guess by trying out tentative fixes, but that usually results in frustration, messy code, and a considerable waste of time and money. This talk explains how to correctly zoom in on a performance bottleneck using three levels of profiling: distributed tracing, metrics, and method profiling. After we learn to read the JVM profiler output as a flame graph, we explore a series of bottlenecks typical for backend systems, like connection/thread pool starvation, invisible aspects, blocking code, hot CPU methods, lock contention, and Virtual Thread pinning, and we learn to trace them even if they occur in library code you are not familiar with. Attend this talk and prepare for the performance issues that will eventually hit any successful system. About authorWith two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

Victor Rentea

In the ever-evolving landscape of data management, Zero-ETL is an approach that is reshaping how businesses handle and integrate their data. This webinar explores Zero-ETL, a paradigm shift from the traditional Extract, Transform, Load (ETL) process, offering a more streamlined, efficient, and real-time data integration method. We will begin with an introduction to the concept of Zero-ETL, including how it allows direct access to data in its native environment and real-time data transformation, providing up-to-date information with significantly reduced data redundancy. Next, we'll take you through several demonstrations showing how Zero-ETL can deliver real-time data and enable the free movement of data between systems. We will also discuss the various tools that support all aspects of Zero-ETL, providing attendees with an understanding of how they can adopt this innovative approach in their organizations. Lastly, the session will conclude with an interactive Q&A segment, allowing participants to gain deeper insights into how Zero-ETL can be tailored to their specific business needs and how they can get started today. Join us to discover how Zero-ETL can elevate your organization's data strategy.

The Zero-ETL Approach: Enhancing Data Agility and Insight

Safe Software

In today's digital world, trust is key to customer relationships, but keeping it is a huge challenge. Customers are well-informed and empowered, quick to change brands if their trust is broken, even if it costs them more. This puts a lot of pressure on organizations to handle trust and safety issues with great care and transparency. The challenge, however, is real. Fragmented solutions have left privacy, legal, and security teams in a perpetual cycle of catch-up, struggling to update privacy notices, manage customer data rights, and answer lengthy security questionnaires—all while trying to prove ROI to the business. It's a thankless job, filled with repetition, tedious tasks, and constant interdepartmental coordination. Combine this with fast regulatory changes and the quick evolution of AI, and it becomes overwhelming. Join this webinar to learn more about TrustArc's new innovative solution Trust Center, the only unified, no-code online hub for trust and safety information built for privacy, security, compliance, and legal teams. Trust Center streamlines your path to compliance, shortens the pre-sales cycle, and reduces both legal and regulatory risks, saving time, effort, and cost. This webinar will review: - Why companies are building unified Trust Centers for a robust privacy program. - How unified Trust Centers streamline sales cycles, ensure regulatory compliance, and reduce operational bottlenecks. - How compliance, legal, security, GRC, and privacy teams benefit from a unified Trust Center in terms of needs, pains, and outcomes. - How TrustArc Trust Center saves time and work while reducing legal, reputational, and compliance risk by effectively managing policies, notices, terms, and disclosures, and providing real-time updates on subprocessors.

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...

TrustArc

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Bhuvaneswari Subramani

Decarbonising Commercial Real Estate: The Role of Operational Performance

IES VE

CNIC Information System with Pakdata Cf In Pakistan

danishmna97

JohnPollard-hybrid-app-RailsConf2024.pptx

JohnPollard37

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

[BuildWithAI] Introduction to Gemini.pdf

Sandro Moreira

At its core, the challenge of managing Human Resources data is an integration challenge: estimates range from 2-3 HR systems in use at a typical SMB, up to a few dozen systems implemented amongst enterprise HR departments, and these systems seldom integrate seamlessly between themselves. Providing a multi-tenant, cloud-native solution to integrate these hundreds of HR-related systems, normalize their disparate data models and then render that consolidated information for stakeholder decision making has been a substantial undertaking, but one significantly eased by leveraging Ballerina. In this session, we’ll cover: The overall software architecture for VHR’s Cloud Data Platform Critical decision points leading to adoption of Ballerina for the CDP Ballerina’s role in multiple evolutionary steps to the current architecture Roadmap for the CDP architecture and plans for Ballerina WSO2’s partnership in bringing continual success for the CD

Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform

WSO2

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...

Zilliz

Six Myths about Ontologies: The Basics of Formal Ontology

johnbeverley2021

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Edi Saputra

Introduction to use of FHIR Documents in ABDM

Kumar Satyam

In this session, we will discuss the journey of API governance from its initial, ungoverned state to the development of sophisticated models that tackle contemporary challenges. We'll explore how APIs have become essential in the intersection of business and technology, adapting to advancements and evolving needs. We'll focus on how organizations have moved from launching to monetizing APIs, using models like pay-per-use and subscriptions, and finding the right balance between technical implementation and business strategy. We'll also highlight the impact of governance on monetization strategies, especially how data security, compliance, and service quality influence pricing. Real-world examples will demonstrate the effective integration of governance with monetization, including AI's role in dynamic pricing. Looking ahead, we'll share insights into future trends in API governance and monetization, emphasizing the importance of adaptability, continuous learning, and innovation.

API Governance and Monetization - The evolution of API governance

WSO2

Architecting Cloud Native Applications

WSO2

Recently uploaded (20)

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

WSO2's API Vision: Unifying Control, Empowering Developers

Stronger Together: Developing an Organizational Strategy for Accessible Desig...

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

The Zero-ETL Approach: Enhancing Data Agility and Insight

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Decarbonising Commercial Real Estate: The Role of Operational Performance

CNIC Information System with Pakdata Cf In Pakistan

JohnPollard-hybrid-app-RailsConf2024.pptx

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

AWS Community Day CPH - Three problems of Terraform

[BuildWithAI] Introduction to Gemini.pdf

Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...

Six Myths about Ontologies: The Basics of Formal Ontology

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Introduction to use of FHIR Documents in ABDM

API Governance and Monetization - The evolution of API governance

Architecting Cloud Native Applications

Визуализируем данные в JavaScript с помощью D3.js

1. Data Visualization with D3.js

2. More and more data

3. Data should be analyzed

4. Visualization can help

5. Data-Driven Documents

7. Web Standards

8. Open source: under BSD license

9. Plenty of examples

10. Need a developer…

11. … and money

12. Learning curve

13. Web Standards Open Source Plenty of examples Need a Developer Learning Curve

14. An example

15. Sample data 00 01 01 02 02 03 03 04 04 05 05 06 06 07 07 08 08 09 09 10 10 11 11 12 12 13 13 14 14 15 15 16 16 17 17 18 18 19 19 20 20 21 21 22 22 23 23 00 Sun Mon Tue Wed Thu Fri Sat

16. 00 01 01 02 02 03 03 04 04 05 05 06 06 07 07 08 08 09 09 10 10 11 11 12 12 13 Sun Mon 2 Tue Wed Thu Hour range Day of week Commits number

17. Sample data 00 01 01 02 02 03 03 04 04 05 05 06 06 07 07 08 08 09 09 10 10 11 11 12 12 13 13 14 14 15 15 16 16 17 17 18 18 19 19 20 20 21 21 22 22 23 23 00 Sun 1 0 0 0 0 0 0 0 0 0 1 5 9 9 6 9 2 1 2 0 2 11 2 0 Mon 0 2 1 1 0 0 0 0 0 0 3 2 7 15 2 11 13 7 6 1 1 3 4 7 Tue 5 2 1 0 0 0 1 0 4 1 0 9 6 8 5 4 10 6 5 4 1 2 5 3 Wed 1 2 2 0 1 0 0 0 0 1 1 4 12 6 2 7 6 5 4 3 0 3 13 10 Thu 3 0 2 1 2 0 0 1 0 0 2 2 7 10 3 5 5 7 6 2 3 6 4 7 Fri 3 3 3 0 0 1 0 0 1 0 4 5 8 8 3 2 9 4 7 2 2 3 4 2 Sat 1 0 0 0 1 0 0 0 0 0 0 0 5 3 3 0 2 1 0 2 7 3 4 3

18. Visualization

19. SVG Source

20. Data-driven transformations Data selection

21. Data-driven transformations Data binding Data selection

22. Data-driven transformations Data binding Data selection Entering data

23. Scales Input domain

24. Scales Input domain Output range

25. Scales Input domain Output rangeScaling algorithm

26. Transitions Animation

27. Thank you! Alexander Kuznetsov alexkuznetsov@stiltsoft.com https://www.facebook.com/kuznetsov.sasha