represent a movie scenes with d3 js

[Youssef Mourchid]

I want to create a chart where I can represent my movie scenes (each scene is divided into blocks) data using time scale.block for each scene, for example, my data looks like:

{label: "Scene 1", times: [{"color":"blue", "label":"block 1 ", "starting_time":28, "ending_time": 42},{"color":"green", "label":"block 2", "starting_time":42, "ending_time": 72},]}, 

 {label: "Scene 3", times: [{"color":"red", "label":"block 1 ", "starting_time":121, "ending_time": 126},]}, 

the problem is that my starting_time and ending_time are in second, but I want something like that (HH:MM:SS) in the time axis

I try this:

var chart = d3.timeline()
          .relativeTime()
          .tickFormat({
            format: function(d) { return d3.time.format("%X")(d) },
            tickTime: d3.time.minute,
            tickInterval: 15,
            tickSize: 10,
          });

but it shows nothing in the time axis.

[steve rickus]

From the docs, it appears that the tick format is expecting a format function -- i would try replacing the format line with the time format function itself, instead of creating an anonymous data function:

var chart = d3.timeline()
          .relativeTime()
          .tickFormat({

            format: d3.timeFormat("%H:%M:%S"),

            tickTime: d3.time.minute,
            tickInterval: 15,
            tickSize: 10,
          });

[Youssef Mourchid]

Dear Mr. steve thank you for your response,  I tried your suggestion but it displays nothing.

to have an idea about what plugin I use you can see this website:https://github.com/jiahuang/d3-timeline

if you can help me for that, I would be very grateful.

​​

Best regards.

----------------------------

MOURCHID Youssef

---------------------------------------------------------------------------------------------------

PhD Student - Computer Sciences and Telecommunications 

                           Laboratory Research (LRIT)

Faculty of sciences  University of Mohammed V Agdal-Rabat, Morocco 

-------------------------------------------------------------------------------

•     Phone : + 212 (0) 6 71 96 32 54
  
•     Mail : youss...@gmail.com 

--
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/6wB6Y3zqHWQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[steve rickus]

It could be that your start/end times are in seconds, and so they are not recognized as dates. You may need to multiply by 1000 to get to milliseconds, and create new Date(ms) objects first.

[Youssef Mourchid]

How I can create a new date (ms ) object, because i want my time axis looks like HH:MM:SS (hours: minutes: seconds) so how can i do that ?? 

--
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/6wB6Y3zqHWQ/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.

--

[steve rickus]

var start_seconds = 1234;
var start_time = new Date(start_seconds * 1000);

Without looking at the code, I was just speculating that you need to pass a javascript Date object to D3, instead of an integer representing seconds. If you have a publicly runnable snippet (blocks, jsbin, gist, etc) I can probably take a look at it...

[Youssef Mourchid]

I did what do you told me but it doesn't  work for me, this is my code for the chart:

 function timelineRelativeTime() {

var d = new Date(d * 1000)

        var chart = d3.timeline()

          .relativeTime()

          .tickFormat({

            format: function(d) { return d3.time.format("%H:%M:%S")(d) },

            tickTime: d3.time.minutes,

            tickInterval: 5,

            tickSize: 15,

          });

        var svg = d3.select("#timelineRelativeTime").append("svg").attr("width", width)

          .datum(testDataRelative).call(chart);

          console.log(testDataRelative);

      }

but it show me that:

​

for a data like that :

 var testDataRelative = [

        {times: [{"starting_time": 2, "ending_time": 40}, {"starting_time": 50, "ending_time": 250}]},

        {times: [{"starting_time": 300, "ending_time": 1000}]},

        {times: [{"starting_time": 1500, "ending_time": 3000}]}

      ];

Best regards.

----------------------------

MOURCHID Youssef

---------------------------------------------------------------------------------------------------

PhD Student - Computer Sciences and Telecommunications 

                           Laboratory Research (LRIT)

Faculty of sciences  University of Mohammed V Agdal-Rabat, Morocco 

-------------------------------------------------------------------------------

•     Phone : + 212 (0) 6 71 96 32 54
  
•     Mail : youss...@gmail.com 

--
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/6wB6Y3zqHWQ/unsubscribe.

To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.

[steve rickus]

Ok, so I see what's happening -- the timeline library expects all the start/end times to be a valid javascript timestamp, which is why the axes are not able to render the labels correctly. In order to accomplish this, I added a function to convert your relative dataset to js timestamp data:

  var testDataRelative = [
        {times: [{"starting_time": 2, "ending_time": 40}, {"starting_time": 50, "ending_time": 250}]},
        {times: [{"starting_time": 300, "ending_time": 1000}]},
        {times: [{"starting_time": 1500, "ending_time": 3000}]}
      ];

  var epoch = new Date(70, 0, 1);
      testDataRelative.forEach(function (r) {
        r.times.forEach(function (t) {
          t.starting_time = t.starting_time * 1000 + epoch.getTime();
          t.ending_time = t.ending_time * 1000 + epoch.getTime();
        });
      });

The trick is to multiply all your times (in seconds) by 1000 (to get milliseconds), then add the offset for the UTC epoch (Jan 1, 1970).

Now, the chart can correctly render the tick marks with the specified format, tickTime and tickInterval options. However, in order to NOT show the labels in UTC timezone, you have to NOT use the relativeTime() mode of the chart. Otherwise, the left hand tick time will be calculated to be 0, which in my timezone (US Eastern) shows up as "19:00:00", since I am 5 hours behind UTC. **In my opinion, this is a bug in the timeline library**

So the revised chart code for showing the relative timeline is this:

        var chart = d3.timeline()
          .beginning(epoch)
          .tickFormat({
            format: d3.time.format("%H:%M:%S"),
            tickTime: d3.time.minutes,
            tickInterval: 5,
            tickSize: 10
          });

Setting the beginning point is necessary, or else the left side of the timeline will start at the earliest data point, not at 00:00:00

Dealing with date/time calculations in javascript is never easy, and takes a lot of testing to get it right. Trying to learn javascript and D3 at the same time is a very steep learning curve. Good luck with your project...

--

Steve