$30 off During Our Annual Pro Sale. View Details »

Dive into E2D3

Dive into E2D3

E2D3 is an Open Source project allowing Excel users to bring D3 charts into the world of spreadsheets.

SAWA, Norihiko

December 10, 2015
Tweet

More Decks by SAWA, Norihiko

Other Decks in Technology

Transcript

  1. Dive into E2D3
    How to use D3.js on Excel
    SAWA, Norihiko
    @D3.js meetup in San Francisco
    http://www.meetup.com/Bay-Area-d3-User-Group/events/227062987/

    View Slide

  2. Who I am?
    SAWA, Norihiko
    Software engineer at Nikkei
    nakamods320yen

    View Slide

  3. Who I am?
    Software engineer at Nikkei
    - Data visualize
    - Mobile Apps

    View Slide

  4. I love nutella

    View Slide

  5. View Slide

  6. https://store.office.com/WA104379169.aspx?assetid=WA104379169

    View Slide

  7. Do you use Excel?

    View Slide

  8. Then

    View Slide

  9. Do you like Charts on Excel !?

    View Slide

  10. All we have design guidelines

    View Slide

  11. View Slide

  12. But many people like Excel

    View Slide

  13. This is E2D3

    View Slide

  14. Stats
    Install: 13000
    Charts: 50+
    Contributors: 20+

    View Slide

  15. Requirements
    Excel for Windows 2013 or later
    Excel Online (Office365)
    (Excel for mac is not available)

    View Slide

  16. How to add charts

    View Slide

  17. We are OPEN SOURCE

    View Slide

  18. How to add charts
    $ npm install -g e2d3
    $ git clone [email protected]:e2d3/e2d3-contrib.git
    e2d3-contrib$ e2d3
    [E2D3] Publish /Users/chimera/Sites/e2d3-server/e2d3/contrib
    [E2D3] Webserver started at http://0.0.0.0:8000
    [E2D3] Webserver(SSL) started at https://0.0.0.0:8443
    Setting up

    View Slide

  19. Reffering to localhost by type Ctrl key 5 times

    View Slide

  20. regulations of files
    How to add charts
    directory name for each charts
    ├ main.js
    ├ main.css
    ├ thumbnail.png
    └ README.md

    View Slide

  21. Thumbnail.png

    View Slide

  22. README.md

    View Slide

  23. structure of main.js

    View Slide

  24. Reserved words
    root
    HTML Element to show charts
    function reload()
    to call update() manually

    View Slide

  25. Fork us: e2d3/e2d3-contrib
    https://github.com/e2d3/e2d3-contrib
    @e2d3org

    View Slide