d3 - Bar Chart with a dynamic time axis

[newbie@d3]

Hi,

I want to code a reusable chart in d3 to visualize energy data. The chart will be later included as a plugin and supplies "different"data via a WCF service. I have a problem with my x -axis (Time View) . 

First I used a OrdinalScale - the result was a beautiful bar chart. The Data Domain for my OrdinalScale were the timestamps of my data channel - and here is my problem: 

The diagram is static due to the discrete domain of OrdinalScale - example: 

First, I want to draw energy data as a bar chart - for one day (96 values ​​in an interval of 15 minutes = 96 timestamps as data domain for the OrdinalScale)

"Later ", the user would also like to view temperature values ​​(in addition to the energy data and in the same view). But the temperature values ​​have different timestamps (values in minutes) and therefore can not be scaled to the X- axis.

So, I can map the 1440 timestamps of the temperatures and the 96 timestamps of the the energy data and put this to the data-domain, but then I got trouble with the count of ticks (tick filtering is not the solution).... 

OK ... For this reason I have then used a Time Scale . However, it is (as I find) much more difficult to draw a bar chart with a Time Scale .

- The first data point is at the position of 0 on the X axis. To avoid overlap on the Y- axis I have to set an Offset to my Data Domain.( for DayView = + / - a day ... ) 

- The space between the bar is partially different - because of the different time intervals on the time scale (MonthView:  February - > March = 28days "space" , March -> April 31 days "space" ... )

What is the best approach for my challenge: a dynamic X-axis (time scale) and the possibility to draw my bars and lines so perfect as a with a Ordinal Scale  ;-)

thx for any help.... !

[Jaime del Palacio]

Bar charts are inherently ordinal, maybe using an 'area chart' could help?

[farrelld...@gmail.com]

You'll need to update the domain for your scale as the data changes something like:

dates.domain['new date range start', new date range end'])

Then call your x axis again, something like this:

chart.select('.x.axis').call(xAxis);

for the bar width you can just select a width, say 15px and then apply a transform when you create the svg rects, dividing the rect width by 2 should center it over the date:

.attr("transform", "translate("+ (margin.left - band_width / 2) + "," + margin.top + ")")

It's nothing fancy, but you can check out something similar I did, http://www.deanfarr.com/viz/weather.html. Note it doesn't use a dynamic axis.

Dean