Synopsis:
D3.js is a Javascript library primarily used to create interactive data visualizations in the browser. Despite its growing popularity and warm community, getting started with D3 can be tricky. This talk covers the basics of D3 and sheds light on some of its main conceptual hurdles. It concludes by discussing some applications of D3 to big data.
About the speaker:
Sam Selikoff [ http://www.samselikoff.com/ | @samselikoff ] is a self-taught full-stack web developer. Formerly a graduate student of economics and finance, he unexpectedly discovered a passion for programming while doing data work for a consulting firm. He is currently focusing on client-side MVC and data visualization.
Thanks to our Sponsors
Microsoft [ http://microsoftnewengland.com ] for providing awesome venue for the event.
Rovi [ http://rovi.com ] for providing the food/drinks.
cognizeus [ http://cognizeus.com ] for hosting the event and providing books to give away as raffle.
Introduction to data visualisations with d3.js — Data Driven DocumentsMichał Oniszczuk
Introduction to data visualisations with d3.js and how we use it in ADA lab where we visualise large datasets (adalab.icm.edu.pl) and in the whole ICM (icm.edu.pl).
Presentation for the Data Science Warsaw meetup (http://www.meetup.com/Data-Science-Warsaw/).
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트Dae Kim
CloudBread
클라우드 기반 무료 오픈소스 프로젝트로, 모바일 게임과 모바일 앱에 최적화된 게임 서버 엔진입니다. 모든 서비스는 마이크로소프트의 클라우드 서비스인 Azure에 최적화되어 동작하며, 안정성과 확장성을 목표로 개발 중입니다.
기능
•PaaS / DaaS 서버 엔진•PaaS, DaaS 로 손쉬운 개발 및 서비스 즉시 배포
•Real Auto Scale - PaaS
•개발/테스트/배포 = 통합 환경
•서비스 규모에 따른 앱 변경 없음
글로벌 론칭 아키텍처
•글로벌 론칭+데이터 동기화
•설계 부터 클라우드에 최적화된 아키텍처 및 프레임워크로 개발
•오픈소스 프레임워크 활용 개발
보안, 관리, 기술교육
•저장/통신에 표준 암호화 기술 적용
•기본 관리자 서비스 및 커스터마이징
•분석/관리 배치 작업 추가 제작 가능
개발자 그룹
•페이스북 사용자 그룹 : https://www.facebook.com/groups/cloudBreadProject/
지원되는 모바일 & 클라이언트환경
•iOS, Android, Windows Phone, Windows 스토어앱, Xamarin, PhoneGap, Sencha 등
•Microsoft Azure Mobile Service가 지원하는 모바일 및 다양한 클라이언트 플랫폼 지원 : http://azure.microsoft.com/ko-kr/documentation/services/mobile-services/
설치
•Wiki의 튜토리얼 설치 참조
프로젝트 설명
•모바일게임과 모바일 앱에서 사용되는 사용자의 패턴과 액션을 기록해 기능들을 제공
•클라이언트 모바일 디바이스는 게임서버로 JSON 방식의 데이터를 요청하고 서버가 해당 데이터를 처리 후 응답
•약 100여개의 비즈니스 로직이 기본제공(Wiki 참조)
•클라이언트는 마이크로소프트가 오픈소스로 직접 만들어 제공하는 라이브러리를 통해 서버로 API를 호출
실행 예제와 API 리스트는 Wiki 참조
Contribute/질문/토론
•페이스북 사용자 그룹 : https://www.facebook.com/groups/cloudBreadProject/
꿈꾸는 데이터 디자이너 시즌2 교육설명회 슬라이드 입니다. 시즌2에 대한 정보와 시즌1에서의 결과에 대한 설명입니다.
www.facebook.com/datadesigner2015
https://www.facebook.com/groups/datadesigner/
www.datadesigner.org
꿈꾸는 데이터 디자이너 시즌2 교육설명회 슬라이드 입니다. 시즌2에 대한 정보와 시즌1에서의 결과에 대한 설명입니다.
www.facebook.com/datadesigner2015
https://www.facebook.com/groups/datadesigner/
www.datadesigner.org
4. d3.js란무엇인가
- D3.js는 ‘데이터 중심의 문서’(Data-Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어입니다.
- D3.js는 사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해 시각화 결과물을 생성합니다.
D3.js
D3.jsData-Driven Documents Javascript
6. D3.js
d3.js동작과정이해하기
데이터 불러오기
(Loading)
데이터 엮기
(Binding)
시각적 요소 지정
(Transforming)
사용자 반응 지정
(Transitioning)
• 시각적 요소를 그리기 전에 보여주고자 하는 데이터를 불러옴.
• .tsv, .csv, .json 등 다양한 형식의 데이터 연동 가능.
• 데이터를 시각적인 요소와 연동시킴.
• 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연동시킴.
• 데이터의 시각적인 요소 지정.
• 그래프의 유형, 요소의 색상, 축과 범례의 여부 등 다양한 요소 지정 가능.
• 파이, 트리맵 등 그래프 유형별로 레이아웃 코드 제공
• 클릭, 드래그 등 사용자 반응에 따른 효과 지정 가능.
10. D3.js
HTML/CSS/Javascript
HTML에 디자인 속성을 적용하는 방법
1. 내부 코드 작성
- HTML 요소 내에 스타일 태그를 지정함.
- 장점 : 별도의 연동이 필요 없다.
- 단점 : 수정을 한꺼번에 할 수 없고 일일이 해야 함.
2. CSS 파일 별도 작성
- HTML 요소 속성을 CSS 파일에 지정.
- 장점 : 수정 및 관리 용이
보통 CSS파일 작성을 추천하지만
오늘의 실습은 내부 요소에 먼저 작성해보기
14. D3.js
SVG란무엇인가
웹용 벡터그래픽
HTML 문서에 직접 포함시키거나 삽입할 수 있다.
인터넷 익스플로러 8 이하를 제외한 모든 브라우저에서 지원
코드작업으로 이미지 편집 가능
품질손상없이 확대/축소 가능
SVG(Scalable Vector Graphics)