score:14
the problem is simply that you are logging date objects to the console, and your browser is applying default formatting to those objects to convert them to your local time zone.
using d3.time.scale.utc()
doesn't change the date objects. javascript date objects are always stored internally as numbers of milliseconds since 1970.
what is unique about the utc scale is the tickformat
function, which uses a utc time formatter by default. however, the tick format function doesn't affect logging to console, only when you're actually drawing the ticks as labels!
the following fiddle actually uses the tick formatting function of each scale to format the date objects logged to the console:
http://jsfiddle.net/qe9ur/1/
var start = new date("mon oct 21 2013 00:00:00 gmt+0100 (bst)");
var end = new date("mon dec 02 2013 00:00:00 gmt+0000 (gmt)")
var xscale = d3.time.scale.utc()
.domain([start, end])
.range([0, 800]);
var xticks = xscale.ticks(d3.time.mondays, 1);
console.log( xticks.map( xscale.tickformat() ) );
var yscale = d3.time.scale()
.domain([start, end])
.range([0, 800]);
var yticks = yscale.ticks(d3.time.mondays, 1);
console.log(yticks.map( yscale.tickformat() ) );
however, you'll discover another problem (assuming you're not in a gmt timezone). the default formatting function for a time scale is a multi-format: if values aren't for midnight, it will return the time instead of the date. when you specify the ticks as mondays
, it still calculates them as midnight monday in your current timezone, which for me is 6 or 7 hours off of utc.
that's why there are utc versions of all the time interval functions, as well. changing the ticks specification to
var xticks = xscale.ticks(d3.time.mondays.utc, 1);
gets the tick values to fall at midnight utc: http://jsfiddle.net/qe9ur/2/
all that said, you'll still probably want to specify a custom tick formatter. the day of the week + day of the month format doesn't really work when you're scanning through multiple months on mondays only.
Source: stackoverflow.com
Related Query
- D3.js: time.scale.utc() does not seem to do anything for me?
- Pie Chart does not update after first click? onClick works only for first time
- d3 v6 pointer function not adjusting for scale and translate
- d3.tree => transform does not seem to work
- d3js set tickValues for time scale axis
- Tooltip does not appear for the overlapped circles in d3.js
- D3.js: calculate x-axis time scale for bar graph?
- The mouseover event for D3.js does not work in Leaflet
- d3 log scale does not display
- Create a padding for the first and last data points using a time scale
- D3 scatterplot using time scale on x-axis -- not working in Firefox
- Why does this code work for counting one item in a list but not the others?
- d3.js circle plotting does not working properly while trying to load after first time
- C3 - line chart time series error: x is not defined for id = "Dates"
- Bar chart for yearly summaries: use ordinal scale or time scale?
- How to spcify ticks on x axis for time scale in d3js?
- Returning default color for items not in domain, using d3.js scale ordinal
- d3.js scale time on x axis not working
- tickformat for d3.js time scale
- For loop does not work in D3.js
- Tick line not visible in linear time scale
- How can I set a minimum range for an interval for a time scale in d3.js?
- append not working when called for the second time
- Wrong values returned for x(i) when using time scale in D3.js
- D3.js: Scale for circle radius is not displaying the circles
- Why D3.js does not display anything ? (RoR application)
- D3 Scale domain does not update with selected data. I get negative values
- how to set proper domain for date time scale in d3
- Why dc.js does not support labels for bar charts
- d3 binding data to a group does not seem to propagate after creation
More Query from same tag
- transform flat json object to hierarchical d3 object structure
- How to use time series in c3.js chart?
- previously logged d3 object doesn't show its __data__ property after removing __data__ with datum(num)
- dc.js: stacked barchart cant display
- Chart.ygrids.remove and Chart.ygrids.add do not work together
- Is it Possible to search within dc.js graphs (ex: row chart)?
- CORS : No 'Access-Control-Allow-Origin' header is present on the requested resource
- Dynamically Creating and Linking dc.js Charts
- How to access the parentNode of a selection to raise an element?
- Adding a horizontal line to a D3.js barplot function
- d3.select() not selecting the div
- Scaling geographic shapes to a similar size in D3
- Is it possible to set a border or linear gradient to an SVG element - line
- Extend line with given points
- d3 transition wait for previous?
- How to create a Javascript Table Lens
- Uncaught error reading in json data to d3 force-directed graph
- <g> attribute transform="translate(NaN,NaN)" when using Interactive Guideline
- the d3 style fill is being filled in a wierd way
- D3.js drag realtive to graph svg
- D3 v4 graph not updating bars - but appending new axis data
- Execute Javascript-File with Button click in d3
- Node js, NVD3.js cannot read property baseval of undefined
- Clearing and updating svg on click
- Zooming in a D3 visualization that uses WebGL through stardustjs
- How to make a general function to create crossfilter.js dimensions
- X3DOM Text-Node in 3D Graph rendered as black box after browserupdate
- d3.js yaxis not drawing all the ticks properly
- How to remove zoom capability after you set it in D3?
- How to add a border to an image on hover in D3