Vigo Visu

Monday, January 26, 2015

Angularjs 心得

https://docs.angularjs.org/tutorial/

Here we declared a controller called PhoneListCtrl and registered it in an AngularJS module, phonecatApp. Notice that our ng-appdirective (on the <html> tag) now specifies the phonecatApp module name as the module to load when bootstrapping the Angular application.

Although the controller is not yet doing very much, it plays a crucial role. By providing context for our data model, the controller allows us to establish data-binding between the model and the view. We connected the dots between the presentation, data, and logic components as follows:

The ngController directive, located on the <body> tag, references the name of our controller, PhoneListCtrl (located in the JavaScript file controllers.js).
The PhoneListCtrl controller attaches the phone data to the $scope that was injected into our controller function. This scope is a prototypical descendant of the root scope that was created when the application was defined. This controller scope is available to all bindings located within the <body ng-controller="PhoneListCtrl"> tag.

Writing and Running Tests

Angular developers prefer the syntax of Jasmine's Behavior-driven Development (BDD) framework when writing tests. Although Angular does not require you to use Jasmine, we wrote all of the tests in this tutorial in Jasmine v1.3. You can learn about Jasmine on the Jasmine home page and at the Jasmine docs.

The angular-seed project is pre-configured to run unit tests using Karma but you will need to ensure that Karma and its necessary plugins are installed. You can do this by running npm install.

HTTP call to fetch data

We'll use Angular's $http service in our controller to make an HTTP request to your web server to fetch the data in theapp/phones/phones.json file. $http is just one of several built-in Angular services that handle common operations in web apps. Angular injects these services for you where you need them.

Routing

Note the use of the :phoneId parameter in the second route declaration. The $route service uses the route declaration —'/phones/:phoneId' — as a template that is matched against the current URL. All variables defined with the : notation are extracted into the $routeParams object.

Tuesday, January 13, 2015

支出

AdminDesign template purchase: $20, Envato, Paypal

Monday, January 12, 2015

D3心得

http://bost.ocks.org/mike/bar/
“Thinking with Joins”
1. DATA JOIN

The data join is a general pattern that can be used to create, update or destroy elements whenever data changes. It might feel odd, but the benefit of this approach is that you only have to learn and use a single pattern to manipulate the page. So whether you’re building a static chart or a dynamic one with fluid transitions and object constancy, your code remains roughly the same. Think of the initial selection as declaring the elements you want to exist (see “Thinking with Joins”).

Next we join the data (defined previously) to the selection using selection.data.

The data operator returns the update selection. The enter andexit selections hang off the update selection, so you can ignore them if you don’t need to add or remove elements.

http://bost.ocks.org/mike/bar/2/

2. SVG

A common point of confusion in SVG is distinguishing between properties that must be specified as attributes and properties that can be set as styles. The full list of styling properties is documented in the specification, but a quick rule of thumb is that geometry (such as the width of a rect element) must be specified as attributes, while aesthetics (such as a fill color) can be specified as styles. While you can use attributes for anything, I recommend you prefer styles for aesthetics; this ensures any inline styles play nicely with cascading stylesheets.

Tip: for successful render, doc format needs to be svg

var vbars = vChart.selectAll("g")

.data(data)

.enter().append("g")

.attr("transform", function(d,i) {

return "translate(" + i * barWidth + ",0)";

});

"g" here means group element

Add axis; transformation

Need to know more about interpretation and animation

Sunday, January 11, 2015

一月计划

Weekend of

1.11:

实现3-4个基本的d3数据可视化模板（plot，pie，bar比较常用的几种，也可作为我们vigo可视化的初始样板）

建立一个blog跟踪进度总结经验

1.18：

设计并实现网页格式

把d3的模板搭载到网页中

讨论设计的风格

optional：构架一个简易的网络后端

1.25：

根据讨论结果美化优化设计

讨论其他可能的数据显示方式

2.1：

增加几个数据显示方式（比如说地图-路线等等）

尽量缩短第一阶段，给之后两个阶段留下余量。