Expose the visualization-building power of d3 to curious users with a visual programming metaphor provided by blockly. From a d3 point of view, I am trying to get to an experience like this great tutorial.
At present, I have not duplicated the upstream's ability to work without a web
server. Working on it. In the meantime, if you have Python (included on most
Linux and OSX systems), check out the
gh-pages branch, go to that directory
python -m SimpleHTTPServer
And then visit http://localhost:8000.
If you are planning on doing development, you'll want to look at
this uses a Flask server to provide templating functions.
Right now, most of the documentation is in the code. As we get closer to a useful project, I'd like to have canned lessons for some of the excellent community-built tutorials.
need to automate updating this
Blockly aims to present a high-level interface to the d3 library in blocks, allowing the 99% of end users to concentrate on what a program does so they can learn how.
By embedding some core use cases in a single screen, I want to enable people that might not have an interest (per se) in writing code, but are interested in making data-driven pictures, to be successful in using d3. So while I am planning on building Blockly blocks for the full d3 API, my initial focus will be on making some core "canned" concepts:
- d3.(select, append, enter, update, transition, exit)
- some layouts
- csv/json loading (initially, google spreadsheet or hosted csv, not very flexible)
And once those work, to get some of them working better from an experience point of view:
To serve as a proof of concept, blockd3 should support the most common d3 paradigm:
- a single SVG that fills the whole available area
- data formatted in a JSON-based list of uniformly-constructed items
- block coverage of the d3 API
- As soon as possible, blockd3 should be extracted automatically from the source of the d3 API wiki, or at the very least be checked for coverage.
- immediate visual update
- support d3-plugins
- Nice to have
- gist integration
- support svgedit
- in consideration
Fork the repo, write code/test/docs, then make pull requests! Once you have the repo locally, you will need to run a webserver to be able to load the blockd3 files... all other assets will be pulled down from CDN or the blockly site:
python -m SimpleHTTPServer 8000
Then just go to http://localhost:8000/dist.
Make suggestions via the tickets!
The build system uses fabric, which requires Python. The easiest way to get it running it to use a virtualenv. Once you have installed it and created and activated a new virtualenv, you can do the following:
pip install -r requirements.txt
Most other tasks will use the fabric command line tool,
fab, which will be
available in your activated virtualenv.
Partially as a learning exercise, many of the more active dependencies and outputs of the project are referenced as git submodules. To get these set up, after checkout out the code, you should: Note: still learning this, looking for guidance
fab dev does this:
git submodule init git submodule update
After that, it replaces the
dist directory (itself a submodule to the
gh-pages branch of blockd3) with the the most recent code, style and assets
fab favicon: makes the favicon from the SVG design asset
fab minify: used by
fab flake: check python syntax for test harness for Travis-CI
Testing uses Ghost.py.
Continuous integration by Travis-CI:
Blockd3 is licensed under the Apache Public License.