Learning D3.js with App - iLearning D3.js

Introduction of iLearning app

iLearning is a learning and interactive coding environment. 'i' means interactive. With this app, we provide some tutorials. And at the same time, you can also try the code in these tutorials yourself in this App. And there is also a simulated "console", which can be used to enter some js code to run.

So this app is a greate combination of tutorial, editor, and debuger. We hope it can help you during the learning.

You can download it from app store.

iLearning Functions

There will be 3 main screens in this app, "tutorial" screen, "try" screen and "render" screen.

"tutorial" screen:

You can find the tutorial when the app runs. 

tutorial screen

 

"try" screen:

In this place, you can try the code learned from the tutorial. For convenience, we provide 3 file: html, js and css separately. You should add your html elements in html file, add js function and code in js file, and css style in css file. 

try screen

"render" screen:

After you write some code in "try", and you can tap on the render button to check the result in web view. 

And, there is a console in this screen, you can input some js code and run it in the reder view. To get the previous/next command, you can tap "^"/"∨". After you run a command, you can get some result in the view above. 

render screen

 

First Try

Now, let run a js command in the render view to check.

In initial, there will be a line of js code in console, you can just run it. Then you should see that it will creat one circle svg element in the html.

In the console, type the following:

1alert("hello!");

 

This will cause a popup alert to pop up and say "Hello!". This is what it looks like in iPad: 

alert screen

Now to test if D3.js is loaded correctly. Type a lowercase "d3.version" into the Console and tap "Run", you should see the d3.js version we used:

1d3.version
2"3.0.3"

 

If all the tests passed and you were able to load D3.js correctly, you are ready to get started.

If you think it is useful, you can download it from app store and try:

https://itunes.apple.com/cn/app/ilearning-d3.js-basic/id649355489?mt=8 

 

 

posted @ 2013-06-14 22:20  Mavlarn  阅读(584)  评论(0)  编辑  收藏  举报