Re: What is the next chart you want to see in d3?

1351 views
Skip to first unread message

Jason Davies

unread,
Oct 11, 2011, 12:24:11 PM10/11/11
to d3...@googlegroups.com
On Tue, Oct 11, 2011 at 09:11:36AM -0700, Curran Kelleher wrote:
> I'm wondering, has anyone tried to abstract out brushing for D3
> visualizations, which would make it easy to build interactive
> dashboards with linked views?

This is my attempt at implementing d3.behavior.select:

https://github.com/mbostock/d3/pull/302

This can be used with svg:rect to support brushing, and linking should
be fairly simple to implement as needed using event listeners.
Suggestions are welcomed!

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

Jason Davies

unread,
Oct 11, 2011, 12:42:13 PM10/11/11
to d3...@googlegroups.com
On Tue, Oct 11, 2011 at 09:30:50AM -0700, Chris Viau wrote:
> I would really like to see an example of this behavior. I have a custom
> brushing on a table that I will try to convert to d3.behavior.select:
> http://bl.ocks.org/1223510

The pull request modifies examples/zoom/zoom.html to use
d3.behavior.select. It only makes use of one dimension, but that
demonstrates the flexibility of the behaviour. I'll update the splom
example too when I get a chance, with full two-dimensional brushing!

Cassio Melo

unread,
Nov 9, 2011, 3:33:49 PM11/9/11
to d3-js
adjacency matrix and timelines would be great!!

Cassio

On Oct 7, 2:48 pm, Chris Viau <christophev...@gmail.com> wrote:
> D3 already has a lot of charts packaged as layouts, helpers and in the
> examples. What's missing? Here is a list of charts already implemented, if
> you can help me find the next one you want to see programmed in d3:
>
> Packaged:
> pie chart
> node-link hierarchical, force-directed, chord, circular tree, cluster
> layouts
> treemap
> circle packing
> box plot
> bullet chart
> stacked bar chart
> histogram
> horizon chart
> quantile-quantile plot
> radar chart
> scatterplot
> stagger chart
> choropleth
> calendar
> lots of maps
> marimekko
> line chart
> area chart
> donut chart
>
> Examples not packaged in a layout:
> streamgraph
> splom
> voronoi diagram
> sunburst
> bubble charts
> voroboids ;)
>
> Found on the web:
> slopegraph
> dotplot
> pyramid bar chart
> venn diagram
> sparkline
> tables
> heatmap
>
> What's not in this list?
>
> parallel coordinates
> adjacency matrix
> arc diagram
> polar area diagram (nightingale)
> gantt and other timing diagram
> sulky and parallel sets
> ...

Christophe Viau

unread,
Nov 9, 2011, 3:41:34 PM11/9/11
to d3...@googlegroups.com
A table could also be useful. I know HTML is more fit for this task. But
I have a project rigth now where my table needs to be in SVG because I
transition the table graphical structure to other type of charts.

Larry White

unread,
Nov 9, 2011, 3:43:28 PM11/9/11
to d3...@googlegroups.com
+1 for timelines.

pax roman

unread,
Nov 12, 2011, 4:15:23 AM11/12/11
to d3...@googlegroups.com
+1 for timelines - we really need them....

Bixente

unread,
Nov 13, 2011, 6:41:00 AM11/13/11
to d3-js
+1 for timelines

Kai Chang

unread,
Nov 14, 2011, 7:23:05 PM11/14/11
to d3...@googlegroups.com
Will there be a standardized way to update data in a chart? I'm sure most of us have had the experience of banging our heads against a d3 visualization trying to get it to tween correctly.

To me, the transitions between datasets a big strength of d3 and would be awesome to have out-of-the-box for as many charts as possible. The visualizations may take different data structures and each have different nuances, but not having to hack the visualization code itself would be a big step.

On Sun, Nov 13, 2011 at 3:41 AM, Bixente <vhiri...@gmail.com> wrote:
 +1 for timelines

MWJames

unread,
Nov 15, 2011, 12:28:59 AM11/15/11
to d3-js
Hi,

It could be nice to have something like a hypergraph (example seen in
[1] put based on java) based on hyperbolic geometry.

[1] http://hypergraph.sourceforge.net/wiki.html

Cheers

Mike Bostock

unread,
Nov 15, 2011, 12:49:01 AM11/15/11
to d3...@googlegroups.com
> Will there be a standardized way to update data in a chart?

Definitely; I think that should be a standard feature of any chart
template, including the ability to specify a key function for data so
that you can preserve object constancy across transitions.

Mike

Chris Viau

unread,
Nov 15, 2011, 7:45:52 AM11/15/11
to d3...@googlegroups.com
Keep them coming. I'm adding them to a wish list at the end of the wiki. And some implementations are on there way. 

Kai Chang

unread,
Nov 22, 2011, 7:24:01 AM11/22/11
to d3...@googlegroups.com
Parallel Scatterplot Matrix please

Chris Viau

unread,
Nov 22, 2011, 8:43:37 AM11/22/11
to d3...@googlegroups.com
;) I programmed this interface in OpenGL but the 3D rotation between SPLOM and PCP matrix can easily be implemented as a 2D transition. It reminds me that a radial menu can also be a good widget to implement in D3, especially when it integrates a visualization like the FlowVizMenu in our paper.

Thug

unread,
Nov 24, 2011, 5:18:14 AM11/24/11
to d3...@googlegroups.com
A couple of diagrams prominent in management/QC disciplines such as ITIL are currently missing from the list, namely pareto charts and ishikawa (or fishbone) diagrams.

Incidentally, a good number of charts listed on the following page are currently without examples, and those in place are not interactive. For wider d3 evangelising, not a bad place to start..

http://en.wikipedia.org/wiki/Category:Statistical_charts_and_diagrams

Thug

pax roman

unread,
Nov 24, 2011, 5:27:48 AM11/24/11
to d3...@googlegroups.com
Good idea!

Wow! If we will have all these implemented in D3 most of the current stock market systems 
will switch to D3's in the browser visualizations instead of the current C++/Python/Java.

Keep up the good work!

Thug

unread,
Dec 17, 2011, 8:36:43 AM12/17/11
to d3...@googlegroups.com
Bit cheeky (possibly significant challenge, and partial overlap with current DOM inspector goals), but I often find myself hankering for a complete node-link or tree diagram of the browser's SVG DOM, something along the lines of that done -at some overhead- for the HTML DOM here : http://www.burlaca.com/2009/02/html2gdl-graphviz/

I imagine delivery as for Tilt, and it's being unfazed by a DOM at fault. Possible motivations?:
  • sometimes tedious DOM inspector navigation
  • aid to rapid understanding of others, and troubleshooting of own visualisations
  • a nifty student project..
Thug

webdevelop...@gmail.com

unread,
Oct 17, 2014, 2:28:26 AM10/17/14
to d3...@googlegroups.com
PFB jsfiddle link


Is there any way or references available to implement the gantt chart as coming in the attached jsfiddle. Need to get the table, grid , the bars , milestones all together.

Chris Viau

unread,
Oct 17, 2014, 8:17:14 AM10/17/14
to d3...@googlegroups.com
You can find plenty with a quick search on your favorite search engine.
BTW, this is a very old thread. It would have been better to start a new one.
ChrisV

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/N6JpD6dIOoE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Chris Viau

unread,
Oct 7, 2011, 9:48:53 AM10/7/11
to d3...@googlegroups.com

Ralf Kuhn

unread,
Oct 7, 2011, 11:29:55 AM10/7/11
to d3...@googlegroups.com
hello!

gant examples and other timing diagram are definitely interesting :)
they are useful for any management software, so that would be nice,
even a simple one....

also adyancency matrix..

thanks!

Nate Vack

unread,
Oct 7, 2011, 11:46:52 AM10/7/11
to d3...@googlegroups.com
On Fri, Oct 7, 2011 at 8:48 AM, Chris Viau <christo...@gmail.com> wrote:
> D3 already has a lot of charts packaged as layouts, helpers and in the
> examples. What's missing? Here is a list of charts already implemented, if
> you can help me find the next one you want to see programmed in d3:

Beeswarm plot:

http://www.r-statistics.com/2011/03/beeswarm-boxplot-and-plotting-it-with-r/

... been thinking about this one for a while, as a force-directed
layout for better packing than in those examples.

-n

Mike Bostock

unread,
Oct 7, 2011, 11:50:15 AM10/7/11
to d3...@googlegroups.com
I would love to see an interactive parallel coordinates example. A
Sankey diagram would also be fantastic, though probably more work to
implement a general flow layout.

Whatever chart type you choose, I'd recommend implementing it as an
example, at least for now. Or possibly a layout. But not a d3.chart:
I've been thinking about how to redesign the d3.chart classes to make
them easier to use, so I wouldn't recommend copying their current
design. They are currently implemented as "transformations of data",
similar to the SVG shape generators, but given that charts are
stateful I think they might be easier to use as more traditional
self-contained widgets. We'll probably break the d3.chart components
out into a separate library, under a separate release cycle, since the
number of different possible types is unbounded.

Mike

Mike Bostock

unread,
Oct 7, 2011, 11:53:48 AM10/7/11
to d3...@googlegroups.com
> http://www.r-statistics.com/2011/03/beeswarm-boxplot-and-plotting-it-with-r/

I've implemented this using custom gravity and collision detection,
similar to this slide:

http://mbostock.github.com/d3/talk/20110921/#23

It works great. :)

Mike

Nate Vack

unread,
Oct 7, 2011, 12:03:42 PM10/7/11
to d3...@googlegroups.com
On Fri, Oct 7, 2011 at 10:53 AM, Mike Bostock <mbos...@cs.stanford.edu> wrote:
>> http://www.r-statistics.com/2011/03/beeswarm-boxplot-and-plotting-it-with-r/
>
> I've implemented this using custom gravity and collision detection,
> similar to this slide:
>
>  http://mbostock.github.com/d3/talk/20110921/#23

Yup, that was the slide that inspired me to try this. I'll probably
have some questions about implementing the custom gravity, but it
looks eminently possible :)

-n

Message has been deleted

Oliver Boermans

unread,
Oct 7, 2011, 10:23:54 PM10/7/11
to d3...@googlegroups.com
I have been attempting to draw a slopegraph with d3 on and off over
the last few weeks.
http://charliepark.org/slopegraphs/

Not much success as yet.
Not recommended as a beginner exercise!

Tim Triche, Jr.

unread,
Oct 7, 2011, 11:33:48 PM10/7/11
to d3...@googlegroups.com
Sorry for your misfortune, but I must say, your site is very information dense (and thus, I say, well designed).

Regards,

--t

Oliver Boermans

unread,
Oct 8, 2011, 12:45:17 AM10/8/11
to d3...@googlegroups.com
That is not my site - just the origin of my interest in that particular kind of graph.
I expect Tufte would approve of his charts being brought to life with d3; The dimension of time increases the potential information density manyfold!

Chris Viau

unread,
Oct 8, 2011, 7:42:19 AM10/8/11
to d3...@googlegroups.com
What about this slopegraph implementation in d3? http://skedasis.com/d3/slopegraph/

Oliver Boermans

unread,
Oct 8, 2011, 8:42:01 AM10/8/11
to d3...@googlegroups.com
On 08/10/2011, at 10:12 PM, Chris Viau <christo...@gmail.com> wrote:

What about this slopegraph implementation in d3? http://skedasis.com/d3/slopegraph/

Thanks Chris I'll take a close look!
Cheers Ollie
--
@ollicle

Thomas Counsell

unread,
Oct 9, 2011, 2:31:30 PM10/9/11
to d3...@googlegroups.com
On 7 Oct 2011, at 16:50, Mike Bostock wrote:
> A Sankey diagram would also be fantastic,

I put together a basic javascript sankey diagram library using the Raphael library:
http://tamc.github.com/Sankey/
and used it here:
http://2050-calculator-tool.decc.gov.uk/pathways/2022222122222103332220023211022330220130233022012/sankey

If anyone wants to work together on a d3 version, let me know.

Tom

Chris Viau

unread,
Oct 10, 2011, 5:02:36 PM10/10/11
to d3...@googlegroups.com

I put together a basic javascript sankey diagram library using the Raphael library:

Pretty impressive work! I don't know how a d3 implementation could be better than this one and not just a direct translation... 

Chris Viau

unread,
Oct 11, 2011, 2:23:58 AM10/11/11
to d3...@googlegroups.com
Here is my first attempt at Parallel Coordinates Plot with simple brushing. http://bl.ocks.org/1277343

Curran Kelleher

unread,
Oct 11, 2011, 12:11:36 PM10/11/11
to d3-js
Nice parallel coordinates! I'm wondering, has anyone tried to abstract
out brushing for D3 visualizations, which would make it easy to build
interactive dashboards with linked views?

Chris Viau

unread,
Oct 11, 2011, 12:30:50 PM10/11/11
to d3...@googlegroups.com
I would really like to see an example of this behavior. I have a custom brushing on a table that I will try to convert to d3.behavior.select:

E. F.

unread,
Nov 2, 2011, 3:23:10 AM11/2/11
to d3...@googlegroups.com
Here's another idea.  I'm currently using MIT's Simile Timeline to represent events in a modified Gantt-like fashion (see below - the dots represent text descriptions of events, and events of the same type are grouped on the same horizontal track).  I am also using D3 to plot time series.  The time span for both plots is the same.  I now need to some way of superimposing the time series onto the timeline.  Thoughts?


Thug

unread,
Nov 9, 2011, 1:16:38 PM11/9/11
to d3...@googlegroups.com
Not a chart, but a building block.. With so many applications in nature, music, architecture and science, a scale reflecting the fibonacci sequence..

Charles Friedo

unread,
Jul 27, 2021, 9:41:40 AM7/27/21
to d3-js
Hello,

I would love to share with you how to visualize your data in Google Sheets and Excel.

I used ChartExpo™ to make charts in just few clicks.

ChartExpo™ is both an Excel and Google Sheets data visualization tool.

What makes it so easy is that since it works perfectly with both spreadsheets, you can use it with your favorite spreadsheet.

You can easily use ChartExpo™ without any knowledge of coding or programming.

ChartExpo™ has over 80 visualizations in its library.

Curran

unread,
Jul 28, 2021, 11:33:14 AM7/28/21
to d3-js
Please do not spam this list with marketing for your product.
Reply all
Reply to author
Forward
0 new messages