How to create a time dimension from just a day and time ? crossfilter

Question

I'm using crossfilter and dc.js, let's consider this dataSet :

var dataSet = [{Day:"1", Time:"1230", Score:"30"}, // Monday at 12:30
               {Day:"1", Time:"0830", Score:"20"},// Monday at 08:30
               {Day:"1", Time:"0900", Score:"35"},
               {Day:"1", Time:"2330", Score:"40"},
               {Day:"1", Time:"0450", Score:"15"},
               {Day:"1", Time:"1830", Score:"35"},
               {Day:"2", Time:"0630", Score:"30"},// Tuesday at 06:30
               {Day:"2", Time:"0230", Score:"40"},//Tuesday at 02:30
               {Day:"2", Time:"1910", Score:"35"},
               {Day:"2", Time:"2130", Score:"35"},
               {Day:"2", Time:"2000", Score:"20"},
               {Day:"2", Time:"0725", Score:"15"},
               {Day:"3", Time:"2210", Score:"30"}, // Wenesday at 22:10
               {Day:"3", Time:"1450", Score:"40"},// Wenesday at 14:50
               {Day:"3", Time:"0515", Score:"45"},
               {Day:"3", Time:"0930", Score:"30"},
               {Day:"3", Time:"1100", Score:"40"},
               {Day:"3", Time:"1230", Score:"35"},
               {Day:"4", Time:"1810", Score:"30"}, // Thursday at 18:10
               {Day:"4", Time:"1050", Score:"40"},// Thursday at 10:50
               {Day:"4", Time:"0515", Score:"45"},
               {Day:"4", Time:"0930", Score:"30"},
               {Day:"4", Time:"1100", Score:"40"},
               {Day:"4", Time:"1230", Score:"35"},
               {Day:"5", Time:"2210", Score:"30"}, // Friday at 22:10
               {Day:"5", Time:"1450", Score:"40"},// Friday at 14:50
               {Day:"5", Time:"0515", Score:"40"},
               {Day:"5", Time:"0930", Score:"45"},
               {Day:"5", Time:"1100", Score:"40"},
               {Day:"5", Time:"1230", Score:"35"},
               {Day:"6", Time:"2100", Score:"30"}, // Saturday at 21:00
               {Day:"6", Time:"0550", Score:"40"},// Saturday at 05:50
               {Day:"6", Time:"0515", Score:"45"},
               {Day:"6", Time:"0930", Score:"30"},
               {Day:"6", Time:"1100", Score:"40"},
               {Day:"6", Time:"1230", Score:"35"},
               {Day:"7", Time:"2210", Score:"40"}, // Sunday at 22:10
               {Day:"7", Time:"1150", Score:"35"},// Sunday at 11:50
               {Day:"7", Time:"0515", Score:"45"},
               {Day:"7", Time:"0930", Score:"30"},
               {Day:"7", Time:"1100", Score:"40"},
               {Day:"7", Time:"1230", Score:"20"}

];

As you can see, I have a typical week, from 1 to 7 ( Monday to Sunday ).

And I want make a barChart where I can see the scores by day and time.

X-axis : The week days, from Monday to Sunday, and each day fragmented in
24 hours from 00 to 24
Y-axis : The score's values

For that I must create a time dimension, I tried this but without nice result :

var timeFormatweek = d3.time.format("%w%H%M");
d.timeweek = timeFormatweek.parse(d.Day+Time);

But this return always Monday, even if my d.Day change. And for the scale of the chart and don't now how to proceed.

Just FYI - bumping your questions is really bad form. Please stop. If you want a faster answer, then please think about what you can do to improve your question. Put together a working example (preferably in JSFiddle or the like) and link to it. Explain exactly what you'd like to see. In this case, what value do you want d.timeweek to have? People want to help, but we don't have infinite time, so the easier you make it for us the faster and better answers you will get. — Ethan Jewett

Dania Dania · Accepted Answer · 2016-08-25T05:25:53

Try formatting your data to round off to add a new field like 'Monday-12:00' and sum all values falling below this time (ie from Monday 00 am to 12 pm) on Monday to this time. In this way you will have a resultant data set like

[{Date:"Monday-12pm", Score:"200"},// sum of all monday scores till that time
 {Date:"Tuesday-12am", Score:"300"},// sum of all monday scores till that time
 ]

Making a chart on hourly values for the whole week days will not look good as it will not fit to the screen. One other way could be to make multiple dimensions over hourly resolution, 6 hourly resolution, 12 hourly resolution and daily resolution. Display daily resolution at first on chart and allow user to zoom in towards hourly resolution. Compare the diff of selected range upon each zoom event and change resolution accordingly. Cheers.

How to create a time dimension from just a day and time ? crossfilter

1 Answers