D3 for Atom Text Editor

Zac Rinehart

unread,

Mar 4, 2016, 9:26:45 AM3/4/16

to d3-js

Hello everyone,

I do most of my programming offline, and need IME's and text editors. Once I started using Github Atom, I started to really love Atom, and now I don't want to use anything else anymore.

The issue, of course, is that D3 and Atom are not the best combination at current. D3 needs a full fledged IME like Eclipse or something similar, more than a text editor. Atom doesn't have anything built-in for D3. I have asked the representatives of Atom whether there is some kind of package to let me use D3 within Atom text editor. Their response is the packages are community resources and Atom has no way to know what they all do. I searched existing Atom packages, and indeed, nothing did look promising.

Can somebody advise me on what steps I'd have to take to construct my own Atom package for D3? Maybe if I have HTML CSS and JS, would Atom be able to handle it? I'd ask Atom help desk again, but I'm not sure I'll hear anything different. That's why I thought I'd approach the D3 community.

So to sum up, my end goal is to be able to code and create visualizations like graphs within Atom offline.

Note: I only know a statistics software's programming language, similar to R, so any explanations with HTML or JS might have to be dumbed down for me

Thank you for reading,

Zac

Drew Winget

unread,

Mar 4, 2016, 2:43:29 PM3/4/16

to d3...@googlegroups.com

"D3 needs a full-fledged IME like eclipse" - what?

I don't think I understand your problem. Is it that you need documentation available offline? You do not need an internet connection to do web programming. You need a local web server to serve your files to yourself, though with d3 even this is not necessary if you have no server calls. You can embed the data directly in the page you're editing and the browser will render it as desired.

Can you say more about the project you're working on and where you're running into trouble? Web development is a very different beast from command line programming, but it doesn't need an IME. It's possible many of your difficulties have to do with the alien nature of web development, which is not very straightforward by any stretch of the imagination. I use emacs/vim.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Ian Johnson

unread,

Mar 4, 2016, 4:12:49 PM3/4/16

to d3...@googlegroups.com

maybe this tutorial will give a good outline of the basics

http://alignedleft.com/tutorials/d3/fundamentals

you may want to start at the very beginning

https://www.eventedmind.com/classes/how-the-web-works-7f40254c/introduction-how-the-web-works-fd9f78b1

--

Ian Johnson - 周彦

http://enja.org

Zac Rinehart

unread,

Mar 4, 2016, 7:42:14 PM3/4/16

to d3-js

Hey guys,

Thank you for the responses. I could opt for offline way to use D3 in the browser (like you said, if there are no server calls). This is a totally viable option. My aim was more arbitrary I guess, I'm just real keen on using D3 in Atom. For the sake of it. (I know, I'm weird)

I will update my progress after I check out the links and start to tinker with it.

Thanks again!

Chris Viau

unread,

Mar 5, 2016, 8:39:14 AM3/5/16

to d3-js

I use Atom for my D3 code these days FWIW, and really like it (I was using WebStorm before then). I saw Mike using Sublime, which is pretty much the same. I don't know what d3-specific package could be useful, aside for code-completion and snippets (e.g. https://github.com/roundrobin/d3.js-Sublime-2-Snippets ). So you don't need an IDE, you could code it in plain TextEdit or Notepad. A nice editor will give you some features to code faster, like code completion, syntax highlighting, maybe a terminal tab, a local server, live reloading, and a big IDE will give you error checking, code refactoring and lots of things that are not critical.

There's no magic in D3, it's just a javascript library. Just add a new file somewhere, call it index.html, open it in Atom and copy paste this code in it:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

alert('D3 ' + d3.version + ' is here!');

</script>

</body>

</html>

Then open your index.html in your browser. That's all you need to start :)

ChrisV

Zac Rinehart

unread,

Mar 5, 2016, 6:52:08 PM3/5/16

to d3-js

Oh that's a neat idea,

Thank you for sharing too.

If I'm totally offline, I'm guessing I would have to change the line:

to the local source of d3 on my computer? I have JS and CSS working offline, via some kind of developer kit. I will try these all out soon, everyone has been very helpful, I can't thank you enough.

Drew Winget

unread,

Mar 7, 2016, 1:41:43 PM3/7/16

to d3...@googlegroups.com

Yes, you would.

--

Phuoc Do

unread,

Mar 7, 2016, 6:34:07 PM3/7/16

to d3-js

I developed this document template for more complex d3.js project:

https://github.com/vidalab/document_template

It uses gulp and node to run the server instead of Python web server. It does live reload pretty fast. You can bring in other node packages to use.

I use the template repo with Atom editor and jade/sass packages to compile into html and sass. I prefer jade, sass over css, html. They help with readability and reusability. The repo format is compatible with bl.ocks.org viewer.

Phuoc Do

Zac Rinehart

unread,

Mar 9, 2016, 6:12:08 AM3/9/16

to d3-js

I've always wanted to expand the scope I used Atom for D3. In just a few days, I have taken the crucial first steps. I haven't tried anything that uses the D3 library yet, but I have successfully created SVG shapes and DIVS in Atom, and simultaneously viewed them in Atom -- using this: https://github.com/skandasoft/browser-plus. Everyone is probably already familiar with it.One thing I particularly like about browser plus is viewing local html documents. That's great for offline coding (not that you couldn't with other browsers). I just like the convenience of a seamless interface, and the split screen set up.

Anyway, I'm hopeful I will be able to edit and view slightly more complicated D3 projects in Atom soon. And thanks Mr. Do for the template!

Reply all

Reply to author

Forward