Vivus: An SVG animation library

Vivus is a JavaScript class for animating SVGs with no dependencies necessary. It offers asynchronous animations, delayed animations, and line-by-line animations.

vivus.js

Demo available on http://maxwellito.github.io/vivus

Vivus is a little JavaScript class (little, because it's being lightweight and having no dependency) to make drawing animation with SVGs in a webpage. Different animations are available, even scripting the entire SVG to do whatever you want.

Animations

Google Charts - Column Chart

https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

Point 커스터마이징 : https://developers.google.com/chart/interactive/docs/points#fullhtml

- 우축 인덱스 영역은 legend

- 그래프 기준값을 0부터 보여주고 싶으면 minValue 를 이용하면 된다.

-------------------------------------------------------------------------------------

//-- google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); } //--

* 가로나 세로 인덱스에서 0 값으로 시작하고 싶으면 아래와 같이 지정. (minValue) 

//-- function drawVisualization() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'], ['2003', 0, 0, 0, 0, 0, 0], ['2004', 0, 0, 0, 0, 0, 0], ['2005', 0, 0, 0, 0, 0, 0], ['2006', 0, 0, 0, 0, 0, 0], ['2007', 0, 0, 0, 0, 0, 0], ['2008', 0, 0, 0, 0, 0, 0] ]); // Create and draw the visualization. new google.visualization.ColumnChart(document.getElementById('visualization')). draw(data, {title:"Yearly Coffee Consumption by Country", width:600, height:400, hAxis: {title: "Year"}, vAxis:{minValue:0, viewWindow: {min : 0 ;}} } ); } //--

 //-- 라인그래프의 옵션 변경 예시 var options = { title: ' ' , curveType: 'function' , colors :['red' ] , legend: { position: 'none' } , vAxism:{ minValue:"-1.5" } //, dataOpacity:{opacity: 1,color: 'blue' } //, crosshair: { focused: { color: '#3bc', opacity: 0.8 } } , pointSize: 15 , pointShape: 'circle' //, series: { 0: { pointShape: 'circle', color : "blue" } } }; //--

Visualization: Column Chart

Walkway.js: Easily animate SVG elements

Walkway.js is an easy way to animate your simple SVG elements. It includes built-in easing functions, and also has options for selector and duration.

AngularJS Fundamentals In 60-ish Minutes

http://angularjs.org

http://builtwith.angularjs.org

http://angular-ui.github.io

http://mgcrea.github.io/angular-strap

http://pluralsight.com

http://www.nodebeginner.org/index-kr.html

이 문서에 대하여

본 문서의 목표는 Node.js용 애플리케이션 개발을 시작을 할 수 있게 만드는 것입니다. 그리고 함께 알아야 하는 “고급” JavaScript에 관한 모든 것을 다룹니다. 본 문서는 전형적인 “Hello World” 튜토리얼 보다는 더 많이 다룹니다.

상태

당신은 현재 이 책의 최종버전을 읽고 있습니다. 즉, 새로운 버전의 Node.js에 있는 변경사항들을 반영하거나 오류를 수정할 때만 업데이트 합니다.

이 책에 있는 코드 예제들은 Node.js 0.6.11에서 동작하는지 테스트 되었습니다.

대상 독자

이 문서는 저와 비슷한 배경을 가진 독자들에게 가장 잘 맞을 겁니다. 적어도 객체지향 언어 –루비, 파이선, PHP, 혹은 자바 같은 언어- 하나 정도에는 경험이 있고, JavaScript에는 약간의 경험만 있으며, Node.js는 이번이 처음인 분들 말입니다.

이미 다른 언어에 대한 경험을 가진 개발자들을 대상으로 한다는 말은 데이터 타입이나 변수, 제어구조 같은 것들을 이 문서에서 다루지 않다는 뜻입니다. 본 문서를 이해하기 위해서는 그런 기본적인 것들은 미리 알고 있어야 합니다.

하지만, JavaScript에서의 객체나 함수들은 다른 대부분의 언어들에 대응되는 것과 다르기 때문에, 좀 더 자세히 설명하겠습니다.

이 문서의 구조

이 문서를 마치는 시점에, 유저들에게 웹페이지를 보여주고 파일들을 업로드 할 수 있는 완성된 웹 애플리케이션을 가지게 될 것입니다.

이 유스케이스를 만족하기 위해 “충분한 정도”까지만 코드를 만드는 것에서 조금 더 나아가서, “세상을 바꾸는 정도”는 아닙니다만, 간결하지만 완결성있는 프레임워크를 만들어서 우리의 애플리케이션의 다른 부분들로부터 깔끔하게 분리할 겁니다.

우리는 Node.js에서 JavaScript 개발을 하는 것이 브라우저에서 JavaScript를 개발하는 것과 어떻게 다른지를 살펴보는 것으로 시작하려 할겁니다.

다음으로, “Hello World” 애플리케이션을 작성하는 훌륭한 오랜 전통을 따를 생각입니다. 그리고 그건 “무언가를 하는” 아주 기본이 되는 Node.js 애플리케이션이 될 겁니다.

그리고 나서는, 우리가 만들기 원하는 “실제” 애플리케이션의 종류가 무엇인지에 대해 논의하고, 이 애플리케이션을 조립하기 위해 구현해야 하는 다른 부분들을 자세히 살펴보고, 하나씩 이 각각의 부분들에 대해 작업을 시작할 생각입니다.

약속드렸듯이, 우리는 JavaScript의 고급 개념 몇 가지와, 그것을 어떻게 사용하는지, 그리고 우리가 아는 다른 프로그래밍 언어의 개념과 이 개념이 어떻게 다른지 살펴볼 것입니다.

완성된 애플리케이션의 소스코드는 아래 링크를 통해 다운 받으실 수 있습니다. the NodeBeginnerBook Github repository.

http://d3js.org/

Data-Driven Documents

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

https://github.com/mbostock/d3/wiki/Gallery

com or vida.io.

Visual Index

Box Plots	Bubble Chart	Bullet Charts	Calendar View
Non-contiguous Cartogram	Chord Diagram	Dendrogram	Force-Directed Graph
Circle Packing	Population Pyramid	Stacked Bars	Streamgraph
Sunburst	Node-Link Tree	Treemap