Future of d3.chart.js

[MWJames]

Since most functions are now included d3.v2.js, the chart components
has been demoted to the examples directory (as noted by Mike).

Does this mean that their is no development on the d3.chart at all?
How do you make sure dependencies between d3.v2.js and d3.chart still
correspond?

I understand the move to consolidate the js files into d3.v2.js but
I'm not really sure how this will impact d3.chart and the ability the
deploy component that uses d3.chart.js.

I do understand D3 is not a charting tool but I would guess people
starting with some simple implementations and charts by its nature are
simple objects that one can implement without a big hustle.

I would appreciate some clarification on how d3.v2.js and d3.chart.js
going to be deployed in future.

Cheers

[Mike Bostock]

I've written up some thoughts on a convention for reusable
visualization components (possibly charts) here:

http://bost.ocks.org/mike/chart/

One possibility is that every D3 example becomes a de facto chart,
albeit with limited configurability. This might be become a new best
practice for examples, and encourage greater reusability. And, you'd
still be able to modify the chart implementation to do whatever you
like, and learn from its implementation.

Mike

[Chris Viau]

Excellent. It goes in the same direction as what we discussed. Let's package some examples and put this on the wiki. I will build a website for charts showcase when we will have a couple of charts wrapped that way.

[Vincenzo Menanno]

And being one of the developers with a self taught background I would also add that one of the great benefits of looking at these simple examples would be to have access to the dataset in some way.

If I am not mistaken in the past some of the datasets were generated with code .. although this is great and compact way to disseminate the information - for a novice user like me. It then makes it hard to see how I can replace my dataset for whats there... 

But if I can clearly and easily see a dataset I can rip it out and instantly see the visual in the context of my own data ... which I think is very powerful.

So please keep that in mind.

Thanks

Vince

[Stephen Bannasch]

I'm curious if you have any thoughts on maintainable and elegant patterns that combine persistence (to and from a JSON object) with the pattern you describe?

I like the method chaining with getter and setter methods but the charts I create are have a set of properties a user can interactively change (axis scale add/remove data points).

I could imagine making a method that return all the user changable properties in a JSON object, and a separate method that accepts a JSON object and calls the various setters to distribute the updated property values.

[Kai Chang]

"To sum up: implement charts as closures with getter-setter methods."

A simple, open-ended directive. This can be used for data models as well.

A useful pattern is to dispatch events when setters activate:

https://github.com/mbostock/d3/wiki/Internals#wiki-d3_dispatch

On Mon, Feb 27, 2012 at 11:36 PM, Stephen Bannasch
<stephen....@deanbrook.org> wrote:
> At 12:57 PM -0800 2/27/12, Mike Bostock wrote:

[Lukas]

Also it would be nice to have a place to register and follow the
examples with comments, suggestions, issues (e.g. search etc.). For me
as an absolute beginner it is not just difficult to read some examples
written using generated data (I got used to it) but also to find
resources to study.

I would just try to add these thoughts (if I may):

1. Examples guidelines and best-practices (coding standards, design
and commenting standards..so on)
2. Infrastucture - repository, issues, comments (something like
Drupal.org pages - example here http://drupal.org/https-information).
Just a clarrification - in this way knowledgebase can be built and new
users can find valuable information right under the examples (easier
to study, learn and ask, clearer to manage)
3. Also many Mike's talks disappear in great universe called interned
and it's noise :-)
4. Google groups are superb but in my experinece a bit unreadable and
misleading (it is complicated to find something really important and
interesing, some information can be unintentionally lost or left out
due to langueage used by the authors and repliers)
5. Bulding data driven documents (mainly for vizualization) and do not
have the means to present the THING itself seams a bit strange...

I am willing to assist with this - github is great and it would be
ever greater to have something above it to present, manage, mainatain,
devevelop, learn and study D3 in one place which is focused on new and
existing users at once.

Please consider this as a proposal of student who is using D3 for his
masters degree work, relatively new both in the world of data
visualization and D3.js.

[Ariel Marcus]

Lukas and Chris,

Where and what did you study that required you to use d3?

Best,
Ariel

On Feb 28, 6:00 am, Lukas <beranek.lu...@gmail.com> wrote:
> Also it would be nice to have a place to register and follow the
> examples with comments, suggestions, issues (e.g. search etc.). For me
> as an absolute beginner it is not just difficult to read some examples
> written using generated data (I got used to it) but also to find
> resources to study.
>
> I would just try to add these thoughts (if I may):
>
> 1. Examples guidelines and best-practices (coding standards, design
> and commenting standards..so on)
> 2. Infrastucture - repository, issues, comments (something like

> Drupal.org pages - example herehttp://drupal.org/https-information).

[Lukáš Beránek]

This is not a school subject thing. I am currently working with
metadata visualization which is related to business intelligence. I was
trying to find a robust and suitable vizualization (and graph) library
that is mainly focused on web environment and uses this kind of
technology. Then I came across D3 and was stunned immediatelly.

This library is great and very useful.

It is not *required* as it is my own iniciative.

28. únor 2012 15:55:27, Ariel Marcus napsal:

[JDennison]

I love the library and would love a reusable chart functions. I
stumbled upon paper.js last week and I wanted to point out their
tutorial section has a wonderful zero-barrier-to-entry coding
examples.

http://paperjs.org/examples/chain/

Click the source button on the top right and you can toggle between
code and example, A wonderful piece of coding. Obviously blocks is a
great for trading examples and priceless for trouble shooting, but
after 2 minutes on paper.js's website i was getting my feet wet in
code. That is pretty cool. Perhaps I'm just of the adhd generation
who's attention span was zapped by the simpsons, but just a thought.

"If I am not mistaken in the past some of the datasets were generated
with code .. although this is great and compact way to disseminate the
information - for a novice user like me. It then makes it hard to see
how I can replace my dataset for whats there... "

This i would also second. It took my three tries over two weeks to
grok the stream example because of the generator functions. <--- maybe
im just slow!

Thanks,

John

On Feb 28, 6:00 am, Lukas <beranek.lu...@gmail.com> wrote:

> Also it would be nice to have a place to register and follow the
> examples with comments, suggestions, issues (e.g. search etc.). For me
> as an absolute beginner it is not just difficult to read some examples
> written using generated data (I got used to it) but also to find
> resources to study.
>
> I would just try to add these thoughts (if I may):
>
> 1. Examples guidelines and best-practices (coding standards, design
> and commenting standards..so on)
> 2. Infrastucture - repository, issues, comments (something like

> Drupal.org pages - example herehttp://drupal.org/https-information).

[Lukas]

Also I belive that ther are many vizualization methods out in the web
(many of them passed throug my hands), but neither of them worked as
good and was so easy to use. Having a force tree implementation is
very rare too. Please read below.

[Mike Bostock]

Here's another example of a histogram chart:

http://bl.ocks.org/1933560

> A useful pattern is to dispatch events when setters activate:

Yep, similar to the brush component. I think there's further
convention to establish regarding how charts (or other reusable
visualization components) could keep state and dispatch events. The
brush component now uses an internal wrapper on top of d3.dispatch
that enforces some standardization regarding the use of d3.event and
preserving the `this`, `d` and `i` for callback:

https://github.com/mbostock/d3/blob/master/src/core/event.js#L14-49

Potentially as we start to build more reusable interactive components
outside of the core library, that helper could be cleaned up (if
needed) and made public.

Mike

[Mike Bostock]

> If I am not mistaken in the past some of the datasets were generated
> with code .. although this is great and compact way to disseminate the
> information - for a novice user like me. It then makes it hard to see
> how I can replace my dataset for whats there...

Right, I've stopped doing this for new examples, and I've filed an
issue to update the old ones (though I expect I'll never be able to
update every existing example, since they exist in the wild):

https://github.com/mbostock/d3/issues/565

You'll note the tutorial had a CSV file, which is hopefully the most
accessible way of representing a dataset.

Mike

[Jason Davies]

This sounds like a good approach. It feels like it might lead to more
of an ecosystem of lightweight components that borrow ideas from each
other while remaining configurable, rather than any kind of one-fits-all
heavyweight chart. Making at least some of the D3 examples configurable
could help kick-start the process. I look forward to seeing the
ecosystem flourish!

--
Jason Davies, http://www.jasondavies.com/

[Lars Grammel]

I created a streamgraph chart based on the streamgraph example
(following the structure of Mike's histogram chart example):

http://bl.ocks.org/1935509

I am fairly new to d3 & javascript, so feedback is much appreciated!

Lars

--
Lars Grammel
PhD Candidate, The CHISEL Group, University of Victoria
http://larsgrammel.de
http://twitter.com/lgrammel

[Mike Bostock]

> http://bl.ocks.org/1935509

Nice work!

Mike

[Kai Chang]

I wish it was possible to test the Chart API on bl.ocks using Firebug
or Chrome Inspector, but unfortunately that code is running in an
IFRAME.

[Mike Bostock]

> I wish it was possible to test the Chart API on bl.ocks using Firebug
> or Chrome Inspector, but unfortunately that code is running in an
> IFRAME.

You can access it directly, http://bl.ocks.org/d/1935509/

Mike

[Stephen Bannasch]

At 1:59 PM -0800 2/28/12, Lars Grammel wrote:
>I created a streamgraph chart based on the streamgraph example
>(following the structure of Mike's histogram chart example):
>
>http://bl.ocks.org/1935509
>
>I am fairly new to d3 & javascript, so feedback is much appreciated!

I also adapted my simple grapher that combines zoom, pan, and axis re-scaling to the closure pattern Mike described:

http://lab.dev.concord.org/tests/simple-graphs-closures/one-graph.html
http://lab.dev.concord.org/tests/simple-graphs-closures/two-graphs.html

These have the same UI accordances in my earlier examples:

- Drag on the canvas to translate/pan the graph.
- double-click on the canvas to zoom in
- shift-double-click on the canvas to zoom out
- Drag on one of the X or Y axis numeric labels to re-scale that axis
- click on a data point to select it
- drag a selected data point up or down to change it's Y value
- enter the delete or backspace key to delete a selected data point
- hold the ALT/Option key down and click an empty area of the graph to add a data point

Here's the equivalent using a prototypical class-pattern.

http://bl.ocks.org/1920939

I'm wondering if there are differences in performance or memory usage between the two styles of JavaScript programming.

[Mike Bostock]

> I'm wondering if there are differences in performance or
> memory usage between the two styles of JavaScript programming.

The overhead of closures is minimal in modern JavaScript engines. It's
still there, but it should only matter if you were creating hundreds
of thousands of charts on the same page. But then you'd be rendering
hundreds of thousands of SVG elements, and you'd have bigger problems.
:) Also, you never know how the runtime will optimize the code, so
sometimes closures can be faster than branching.

If I am creating hundreds of thousands, or millions of things, I
generally create data (structs) rather than code (objects, in
object-oriented speak). The fastest things to create are array
literals, object literals, and primitives.

Mike

[Victor Hooi]

heya,

Yes, this! =).

I would love there to be a catalogue of example charts, graphs and visualisations, all based on D3.js and following best practices.

Would these examples form part of the default Github repository, or are they better split off onto their own repository, for example?

Cheers,

Victor

[Victor Hooi]

Heya,

Sorry, in that second paragraph, it should be *easily reusable* examples, since that's the key point with these new-style charts. 

Cheers,
Victor

[Elliot Saba]

I also am incredibly excited about this, but a question I have is should there be some generalized elements that are common to all charts?  Axes, for example.  Should manipulations of axes be chart-dependent, or is it possible to have a "generic axes" interaction concept with charts of varying types?

-E

[Mike Bostock]

> Should manipulations of axes be chart-dependent, or is it possible
> to have a "generic axes" interaction concept with charts of varying types?

Are you referring to d3.svg.axis?

https://github.com/mbostock/d3/wiki/SVG-Axes

Mike

[Victor Hooi]

Mike,

Just wondering if there was any update on this?

Is D3 still shifting to reusable visualisation components?

Will there be a library of these components?

Cheers,

Victor

[Kai Chang]

Bob has been making great progress on common chart types and components:

http://novus.github.com/nvd3/

We are also collecting components on the d3 plugin repository, though not necessarily charts:

https://github.com/d3/d3-plugins