Share this project

Done

Share this project

Done
Create, fork and edit d3.js code snippets for use with bl.ocks.org right in the browser, no terminal required.
Create, fork and edit d3.js code snippets for use with bl.ocks.org right in the browser, no terminal required.
Create, fork and edit d3.js code snippets for use with bl.ocks.org right in the browser, no terminal required.
178 backers pledged $11,205 to help bring this project to life.

About this project

Building Bl.ocks project video thumbnail
Replay with sound
Play with
sound

Building Bl.ocks

$11,205

178

Building Bl.ocks will be a simple web application for editing code samples that are compatible with http://bl.ocks.org which is the de facto medium for sharing d3.js code examples. 

100% Funded, Stretch goal time!

It's exciting to see such enthusiastic support for this project, we reached 100% in the first 24 hours!

✔ Stretch Goal 150% - $4500

Side-by-side editing UI: The blocks UI is great for presenting your example, but when you are editing you might want to see your code next to your output. This will include a bit of extra design work to not take away from the core experience while providing an intuitive editing experience.

✔ Stretch Goal 200% - $6000

Thumbnail editing function: Taking a screenshot, resizing it (remembering the dimensions it should be) and committing it to your gist's repo is quite a bit of friction for something that every block should have. We can use the HTML5 file API as well as canvas to make this an interactive in-browser experience!

✔ Final Stretch Goal  - $10,000

Writer's Bl.ock: This project has blown past my expectations in terms of money, support and ideas. There are a number of really interesting things (example searching, drag-and-drop data loading, social features, commenting and more) that can be built on top of this platform. Reaching this goal will buy me the time to clearly document and outline the features and learnings of this project for others to pick up. I'll also host a hackathon in San Francisco where we can work on them together!

The Problem:

it currently takes 10 steps to create a bl.ock:

10 steps to make a block
10 steps to make a block

 It doesn't have to be this way!

One of the brilliant things about bl.ocks is that they are actually saved as GitHub gists, which are like mini git repositories that are cheap and easy to create. All we need is to use the GitHub API to allow users to create, fork or modify gists from a web interface. If we make the web interface look very similar to the bl.ocks interface and add a live code editor, everybody will be only one click away from creating or editing a bl.ock!

proposed 1 click to create a bl.ock:

mockup of UI
mockup of UI

Fortunately I've already built web apps using the GitHub API to save and edit gists for my project Tributary ( you can even see the code ). I also have a long history of using CodeMirror to create live editing environments in Tributary and with friends for projects like @vicapow's recent d3 workshop.

Minimum Viable Product

The goal of this kickstarter is to support the launch of a "Minimum Viable Product" with the most important features that will allow people to create,  edit and share bl.ocks with ease. 

These features include:

  • optionally login with GitHub to create and edit gists
  • 1 click to create a new block (anonymous or authenticated)
  • edit the index.html file of any block right in the browser
  • 1 click to save your edits to a new block
  • matching url scheme with bl.ocks.org for easy navigation

The editing of the bl.ocks will initially be limited to the "index.html" file which is the only requirement for a block to work (it is possible to include other files in a bl.ock, which will not be editable in the MVP).

All development will take place in the open in this GitHub repository: https://github.com/enjalot/building-blocks

When?

To get a working and usable version of the app online should not take longer than a month of full time work. When the kickstarter ends the timer starts and I'll be able to put aside any other paid work to focus!

Why bl.ocks?

D3.js has become an incredibly popular library with a vibrant community, no doubt in part because of the amazing examples available. Mike Bostock, the creator of d3 has a very well thought out essay which highlights the importance of examples for both personal growth and supporting the community.

some more examples
some more examples

Rewards

5$: High Five

Thanks for believing in this project and chipping in to make it possible! 

Keep up with the progress as it happens! Project updates will include code samples and exclusive videos about how it's built.

$25: Quarter

Have your name and a link to your social media profile of choice listed under the BACKERS section of the About page of the website.

100$: Brick

A solid contribution to help build the building blocks. Choose your favorite block (yours or otherwise) and we will feature it in a gallery page that recognizes your contribution.

Includes all lower tier rewards.

$250: DO IT LIVE

If you support the project this much, you must be an interesting person to talk to!

I'll do a 1 hour video session (public or private) to discuss the d3 or data visualization topic of your choice. Some things we could do are code together, philosophize or bemoan SVG performance. It's really up to you though!

Includes all lower tier rewards.

1000$: Patron of the Blocks

At this level you are supporting not just the project but the whole d3.js community. Your contribution will be recognized with the logo or name of your choice on the "About" page of the website as well as in the README of the repository.

This reward includes all the other rewards.

Links from the video

This is a list of the links shown in the video in order of their appearance.

THANKS

I want to take a moment to thank some friends who have already helped me with this project and the projects that have lead up to this: VictorShirley, Erik, Zan and EJ.

Of course I have to thank Mike Bostock and the rest of the d3 community for making so many awesome examples to learn from.

Risks and challenges

Software time estimates are notoriously optimistic, so it's entirely possible that things take longer than we hope. With that said, I've already written all the code needed for this in other projects, so it's more of a chance to refactor that code into the specific functionality we want to see here.

One potential hurdle will be hosting and maintenance. I've been maintaining http://tributary.io personally for a couple years, and it gets a steady average of 300 users per day which is not much by internet standards. If this project proves more useful (which I expect) we may face some scaling issues. Luckily by using gists as the database we offload the biggest scaling issue to GitHub. There are very standard solutions including caching and load balancing to help scale the minimal amount of work the servers will be doing.

Since this is also 100% open source, I look forward to community support and the generous help from friends who are both engineers and designers.

Learn about accountability on Kickstarter

Questions about this project? Check out the FAQ

Support this project

  1. Select this reward

    Pledge $5 or more About $5

    HIGH FIVE

    Thanks for believing in this project and chipping in to make it possible! Every little bit helps, not just the money but the fact that you want to see it realized.

    Keep up with the progress as it happens! Project updates will include code samples and exclusive videos about how it's built.

    Less
    Estimated delivery
    56 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  2. Select this reward

    Pledge $25 or more About $25

    QUARTER

    Have your name and a link to your social media profile of choice listed under the BACKERS section of the About page of the website.

    Includes all lower tier rewards.

    Less
    Estimated delivery
    93 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  3. Select this reward

    Pledge $100 or more About $100

    BRICK

    A solid contribution to help build the building blocks. Choose your favorite block (yours or otherwise) and we will feature it in a gallery page that recognizes your contribution.

    Includes all lower tier rewards.

    Less
    Estimated delivery
    16 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  4. Select this reward

    Pledge $250 or more About $250

    DO IT LIVE

    If you support the project this much, you must be an interesting person to talk to!

    I'll do a 1 hour video session (public or private) to discuss the d3 or data visualization topic of your choice. Some things we could do are code together, philosophize or bemoan SVG performance. It's really up to you though!

    Includes all lower tier rewards.

    Less
    Estimated delivery
    Limited 3 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  5. Select this reward

    Pledge $1,000 or more About $1,000

    PATRON OF THE BLOCKS

    At this level you are supporting not just the project but the whole d3.js community. Your contribution will be recognized with the logo or name of your choice on the "About" page of the website as well as in the README of the repository.

    This reward includes all the other rewards.

    Less
    Estimated delivery
    4 backers
    $
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.

Funding period

- (30 days)