zoukankan      html  css  js  c++  java
  • 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 tutorialeditor, 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 

  • 相关阅读:
    Slim + Twig 构建PHP Web应用程序
    Slim
    nginx+php+flight 构建RESTFul API
    Redis Master/Slave 实践
    spring.net +dapper 打造简易的DataAccess 工具类.
    API文档管理工具-数据库表结构思考.
    解决oracle报 ORA-12560错误,只有服务器重启恢复正常的问题
    浮点数的编码
    Jquery.BlockUI-遮罩
    class.forname & classloader
  • 原文地址:https://www.cnblogs.com/mavlarn/p/3136870.html
Copyright © 2011-2022 走看看