Max and Min on axes

1,671 views
Skip to first unread message

Bob Monteverde

unread,
Jun 23, 2012, 7:32:17 PM6/23/12
to d3...@googlegroups.com
One feature my users came accustomed to was me showing the Max and Min values on the Axes (well at least the vertical axes, usually not on a time series x axis).  I usually don't show a line for the Max and Min (kine seems like chart chunk to me), though suppose that could be optional.

I had implemented this prior to using the axis component, where I simply added the max and min values to the ticks data, and checked to make sure that the other ticks didn't overlap.

Anyway, I'm currently implementing this into NVD3.js, but I'm wondering if this is a feature a lot of people may use.  If so, I'll see about implementing it directly into d3's axis component.

Anyway, let me know what you guys think,

Bob

Mike Bostock

unread,
Jun 23, 2012, 8:19:15 PM6/23/12
to d3...@googlegroups.com
The domain path created by the axis component displays the minimum and
maximum value.

Mike

Bob Monteverde

unread,
Jun 23, 2012, 9:59:12 PM6/23/12
to d3...@googlegroups.com
Yeah, I know.. I believe Tufte calls that range axes.  I was hoping that was enough, but the boss said that our users have been accustomed to having the max and min label show, and really like that.  

I just implemented that into NVD3 on the Y axis, still gotta do the x which is slightly more complex, will likely get to that tomorrow, if not, Monday.  The code's a little ugly since I was getting 0 height and width when I was doing getBBox() on the tick's text elements (didn't have time to investigate why, so for the time being, I just assumed the text height was 16px... I will probably redo that later so that the user can change the font size in the CSS without having issues).

The other feature I'm planning to add (at least into my axis wrapper that has an optional axis label) is to calculate the overall width of the axis (not the lines, just the width of that largest label, plus the tickPadding... and in my case, plus the axis label if there is one).  This way the space taken up by the axis represents the actual space the axis needs to fully render.  This is especially important for my horizontal bar example, if the text labels are very long in some cases, and in others short, I don't want to have to manually set the width.  I'll also add an optional max width and clip the text that exceeds that (I'm already doing that on my discrete bar model to prevent the text from overlapping).  And maybe a little while later, I may implement a text wrapping feature for long labels, just got a list of other more important features I wanna finish before I get to that.

You can check out how they look on most of my examples (http://novus.github.com/nvd3/ghpages/examples.html).  One problem I need to work out can be seen on my cumulative line example (http://novus.github.com/nvd3/ghpages/cumulativeLine.html) where the rounded max (from the tickFormat function) is the same value as the first tick.  The easiest solution would be to make the tickFormat show a decimal point, or possibly have the Max and Min use a different more precise formatter (which is an idea I'm not crazy about).  On the other hand, having similar problems in a few spots, while I don;t want to make it painful on the user, there are multiple spots formatting the same value that different amounts of precision may be wanted (like the y axis vs. the tooltips vs. the labels shown on the chart (as seen on the discrete bar and horizontal bar examples I have)).  The user may want to set different ones, but at the same time, I don;t want to make them set the format in 3 different places every time.  I'll probably just do something like: format = tooltipFormat || yAxis.tickFormat()

Bob

Zack Maril

unread,
Jun 24, 2012, 5:22:28 PM6/24/12
to d3...@googlegroups.com
Any particular reason NVD3 can't just have a simple summary statistics table maker for data? It would keep the developer from injecting "chart chunk" into the ticks and allow you to display even more info about the data. It wouldn't need to be a d3 chart, just a small html table that gets the job done.
-Zack

Bob Monteverde

unread,
Jun 24, 2012, 5:31:58 PM6/24/12
to d3...@googlegroups.com
I wouldn't consider a Max and Min values as chart junk, and you can disable them easily.  I don't plan to make a summary table for NVD3,  someone else can, but not something we will be using in house here.  (Well, we do have summary tables on some pages, but that has nothing to do with NVD3).  Our users don't want to have to look at a chart, as well a table, when the chart could easily show them everything they need.

Bob

majeti dinesh

unread,
Dec 28, 2015, 2:25:12 PM12/28/15
to d3-js
So is there an easy way to disable these max/min values from the charts?
Reply all
Reply to author
Forward
0 new messages