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.
Check it out at https://bollwyvl.github.com/blockd3 It's a modification of the Blockly code demo, which has cool stuff like Python generation.
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
and run:
python -m SimpleHTTPServer
And then visit https://localhost:8000.
If you are planning on doing development, you'll want to look at fab build
:
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
- scales
- 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
- export to JavaScript for further tinkering.
- 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
- Ongoing. Generated JavaScript updates immediately, but the SVG doesn't. The problem here is the "dirty" SVG issue... this needs to be addressed in blocks, as a user may want to "play" with an SVG over time.
- support d3-plugins
- Nice to have
- gist integration
- Once the blockd3 API has stabilized, bl.ocks (or something like it) should be fun for sharing examples! github-api makes this look pretty easy.
- 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 https://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
Running fab dev
does this:
git submodule init
git submodule update
The build system generates the optimized demo version of the site by combining and minifying all of the JavaScript and CSS of Blockd3 and its dependencies.
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
needed:
fab build
fab favicon
: makes the favicon from the SVG design assetfab minify
: used byfab build
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.