9 ms·

Easily Create D3 Examples

98 points by kilbuz 11y ago

chrisacree 11y ago
The video takes up most of the screen and can't be scrolled/closed. I can only see two lines of the coding block.
- ditdatdave 11y ago
  The video disappears when you start editing code.
  - mkoryak 11y ago
    which I never did because I don't like to use an editor where you can only see 3 lines of code. A close button would go a long way here.
- urda 11y ago
  It's also a very busy and noisy video which ends up just being a generic PowerPoint-like presentation on autoplay. Within seconds of the video's awful soundtrack blaring out I just closed the entire tab, and lost full interest in the project.
ebrewste 11y ago
I think it was developed on a 1200 or 1440 px tall screen. You can zoom out (ctrl -) to make the video / plotting window smaller. It's a pretty bad UI mistake, but the fix is easy, too.
- ebrewste 11y ago
  Or click on the yin-yang symbol in the upper right to go into side by side mode. Not sure how yin-yang is side by side...
jordache 11y ago
was this shared to illustrate an example of bad UI? I'm like the target audience for this.. highly movtivated to learn D3.. HOwever this UX doesn't even make my want to click play on the video.
- Ronsenshi 11y ago
  Agreed. UI/UX is laghably bad. Is it that hard to find competent designer for some of those ~$11,000 that were collected on Kickstarter?
  - ottertown 11y ago
    Seriously? I know HackerNews can rock the haterade like no other, but why aim that at developers who took months out of their lives to build a tool for the open source community? And why do so with such unhelpful criticisms? And do you think the team that built this had anything but a huge net loss in opportunity cost? $11k is an above average software engineer's monthly take home. This was built in at least a few months with several engineers. If the UI is laughably bad, surely it should be easy to list out some constructive criticisms rather than disparaging insults? I will offer some: 1. One defense of the default UI is that in bl.ocks.org, most examples are shown with the visualization on top and the code on the bottom. Maybe they were trying to offer a similar experience, but I agree it doesn't make sense as the code will almost always be longer in height than the output it creates. Side by side should be the default view, and the code should be on the left, output on the right. 2. The inability to resize the code view when in side by side mode (clicking on the ying yang), is also frustrating. 3. The home / about / gallery menu in the top left feels incomplete. It needs styling and a proper home. It feels like it was just stitched on. 4. Having the video seems like an okay idea but I think most people are used to in browser editors at this point and don't need a video explanation. The UI should speak for itself in this regard. You could have some instructions commented out in the editor for how to get started, but that's it. 5. Borrow from others: jsbin, codepen, jsfiddle... Overall, I think this could be a really helpful tool and this is a strong prototype. The UI needs some work but the core functionality works well, and I like that I don't have to rerun the code to see the output.
RobinL 11y ago
http://tributary.io/ http://tributary.io/ has been around for ages and works pretty well....
- Uehreka 11y ago
  Looks like it's the same guy, @enjalot. At the very least, he's at the top of tributary's most active users list.
  - erispoe 11y ago
    It's the same guy.
- enjalot 11y ago
  thanks! I'm shifting my focus to blockbuilder.org because it's compatible with bl.ocks.org, the defacto standard for sharing d3 related code examples. I've applied a lot of my learnings from tributary to this new project, and hope it will exceed tributary's most advanced features eventually!
  - RobinL 11y ago
    Well - that gives me the opportunity to say thank you for your work! It's helped me on numerous occasions to test things out, and to demonstrate concepts to others.
an_ko 11y ago
Neat, but this adds very little to my existing workflow. bl.ocks.org is just a frontend to gist.github.com, so one can create a gist (working in your preferred $EDITOR and $BROWSER), then changing the appropriate part of the URI when sharing with others.
- enjalot 11y ago
  Yeah, the purpose of this tool is to cut out the command line, which is a sin to many advanced developers but a blessing for many beginners. A big part of my motivation is to be able to teach people d3 without having to teach them about the entirety of the internet, client-server model, web servers. Just let them start playing with d3, see the fun stuff for themselves and then be motivated to learn all the other things once they're hooked. I do hope it is a useful tool for many advanced developers who want to quickly put an idea out there with minimal friction. I know my personal blocks output has sky rocketed since I've launched it, and I'm no stranger to the command line.
enjalot 11y ago
Creator of the project here, I was pleasantly surprised to find this on the front page! I'm glad people are finding the tool, it's been useful to many people I know. I want to make it useful to more people, so please join us on chat: https://gitter.im/enjalot/building-blocks https://gitter.im/enjalot/building-blocks
- 4wrbr 11y ago
  This is what your site looks like to me: https://www.jottit.com/4wrbr https://www.jottit.com/4wrbr Now, what am I supposed to do with this again? You have somehow made the scroll bar on the right useless - it only appears to scroll one line at the bottom.

98 points by kilbuz 11y ago

chrisacree 11y ago

The video takes up most of the screen and can't be scrolled/closed. I can only see two lines of the coding block.

ditdatdave 11y ago
The video disappears when you start editing code.
- mkoryak 11y ago
  which I never did because I don't like to use an editor where you can only see 3 lines of code. A close button would go a long way here.
urda 11y ago
It's also a very busy and noisy video which ends up just being a generic PowerPoint-like presentation on autoplay. Within seconds of the video's awful soundtrack blaring out I just closed the entire tab, and lost full interest in the project.

ebrewste 11y ago

I think it was developed on a 1200 or 1440 px tall screen. You can zoom out (ctrl -) to make the video / plotting window smaller. It's a pretty bad UI mistake, but the fix is easy, too.

ebrewste 11y ago
Or click on the yin-yang symbol in the upper right to go into side by side mode. Not sure how yin-yang is side by side...

jordache 11y ago

was this shared to illustrate an example of bad UI? I'm like the target audience for this.. highly movtivated to learn D3.. HOwever this UX doesn't even make my want to click play on the video.

Ronsenshi 11y ago
Agreed. UI/UX is laghably bad. Is it that hard to find competent designer for some of those ~$11,000 that were collected on Kickstarter?
- ottertown 11y ago
  Seriously? I know HackerNews can rock the haterade like no other, but why aim that at developers who took months out of their lives to build a tool for the open source community? And why do so with such unhelpful criticisms? And do you think the team that built this had anything but a huge net loss in opportunity cost? $11k is an above average software engineer's monthly take home. This was built in at least a few months with several engineers. If the UI is laughably bad, surely it should be easy to list out some constructive criticisms rather than disparaging insults? I will offer some: 1. One defense of the default UI is that in bl.ocks.org, most examples are shown with the visualization on top and the code on the bottom. Maybe they were trying to offer a similar experience, but I agree it doesn't make sense as the code will almost always be longer in height than the output it creates. Side by side should be the default view, and the code should be on the left, output on the right. 2. The inability to resize the code view when in side by side mode (clicking on the ying yang), is also frustrating. 3. The home / about / gallery menu in the top left feels incomplete. It needs styling and a proper home. It feels like it was just stitched on. 4. Having the video seems like an okay idea but I think most people are used to in browser editors at this point and don't need a video explanation. The UI should speak for itself in this regard. You could have some instructions commented out in the editor for how to get started, but that's it. 5. Borrow from others: jsbin, codepen, jsfiddle... Overall, I think this could be a really helpful tool and this is a strong prototype. The UI needs some work but the core functionality works well, and I like that I don't have to rerun the code to see the output.

RobinL 11y ago

http://tributary.io/ http://tributary.io/ has been around for ages and works pretty well....

Uehreka 11y ago
Looks like it's the same guy, @enjalot. At the very least, he's at the top of tributary's most active users list.
- erispoe 11y ago
  It's the same guy.
enjalot 11y ago
thanks! I'm shifting my focus to blockbuilder.org because it's compatible with bl.ocks.org, the defacto standard for sharing d3 related code examples. I've applied a lot of my learnings from tributary to this new project, and hope it will exceed tributary's most advanced features eventually!
- RobinL 11y ago
  Well - that gives me the opportunity to say thank you for your work! It's helped me on numerous occasions to test things out, and to demonstrate concepts to others.

an_ko 11y ago

Neat, but this adds very little to my existing workflow. bl.ocks.org is just a frontend to gist.github.com, so one can create a gist (working in your preferred $EDITOR and $BROWSER), then changing the appropriate part of the URI when sharing with others.

enjalot 11y ago
Yeah, the purpose of this tool is to cut out the command line, which is a sin to many advanced developers but a blessing for many beginners. A big part of my motivation is to be able to teach people d3 without having to teach them about the entirety of the internet, client-server model, web servers. Just let them start playing with d3, see the fun stuff for themselves and then be motivated to learn all the other things once they're hooked. I do hope it is a useful tool for many advanced developers who want to quickly put an idea out there with minimal friction. I know my personal blocks output has sky rocketed since I've launched it, and I'm no stranger to the command line.

enjalot 11y ago

Creator of the project here, I was pleasantly surprised to find this on the front page! I'm glad people are finding the tool, it's been useful to many people I know. I want to make it useful to more people, so please join us on chat: https://gitter.im/enjalot/building-blocks https://gitter.im/enjalot/building-blocks

4wrbr 11y ago
This is what your site looks like to me: https://www.jottit.com/4wrbr https://www.jottit.com/4wrbr Now, what am I supposed to do with this again? You have somehow made the scroll bar on the right useless - it only appears to scroll one line at the bottom.