Front2End
  • Introduction
  • Front
    • Introduction
    • 新手入門
    • 相關連結
    • Css
    • Javascript
    • 立即函式
    • Google SpreadSheet 當資料庫
    • 資料視覺化
    • 新年快樂
    • Google御用網頁語言 Node.js
    • 世大運網頁遊戲腳本
    • YDNJS-1.Up&Going
    • YDNJS
    • 新手入門
  • 實做
    • 程式碼片段蒐集
    • 爬蟲
    • 實做: 貪吃蛇
    • 練習: z=ax+by
    • 實做: 爬八卦版的文章
    • LearnYouNode
      • 3 - 同步 IO 讀寫
      • 4 – My First Async I\/O
      • 5 - filter
      • 6 - Make it Modular
      • 7-Http Client
    • road_to_bookdown
    • FreeCodeCamp
  • End
    • node.js
Powered by GitBook
On this page

Was this helpful?

  1. Front

資料視覺化

PreviousGoogle SpreadSheet 當資料庫Next新年快樂

Last updated 5 years ago

Was this helpful?

在前端很夯的現在，用來顯示圖形的 js 擴充好像有 D3.js，processing.js，和 p5.js。processing.js 和 p5.js 都是基於 processing 修改並用在 js 上。不過，processing.js 用的還是類似 java, c 的語法，而 p5.js 則完全使用 js 的語法，因此可以用原生的 js 來修改顏色、形狀等等。

這頁會收集相關的資料視覺化 js 的資料

p5.js

可以先透過 processing 了解有哪些好用好玩的東西，在透過 p5.js 官網和 google 找範例。最後用 JSFiddle 做快速的 demo。

但要注意的是，JavaScript 的 LOAD TYPE，好像要改成 no wrap - in <body> 才能用的樣子

p5.js － 初學者的資料視覺化函式庫
p5.js | get started
p5.js Interactivity - keyPressed() - JSFiddle