How to use the d3.time function in d3
To help you get started, we’ve selected a few d3 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
rrag / react-stockcharts / src / lib / scale / financeEODDiscontinuousScale.js View on Github 
return prev || curr;
});
return sm ? false : d.startOfWeek;
} }, // 1-week
{ step: 3525e6, f: function(d) {return d.startOfMonth; } }, // 1-month
{ step: 7776e6, f: function(d) {return d.startOfQuarter; } }, // 3-month
{ step: 31536e6, f: function(d) {return d.startOfYear; } }, // 1-year
{ step: 91536e15, f: function(d) {return isDefined(dateAccessor(d)) && (d.startOfYear && dateAccessor(d).getFullYear() % 2 === 0); } } // 2-year
];
var timeScaleStepsBisector = d3.bisector(function(d) { return d.step; }).left;
var bisectByIndex = d3.bisector(function(d) { return indexAccessor(d); }).left;
var tickFormat = [
[d3.time.format("%Y"), function(d) { return d.startOfYear; }],
[d3.time.format("%b %Y"), function(d) { return d.startOfQuarter; }],
[d3.time.format("%b"), function(d) { return d.startOfMonth; }],
[d3.time.format("%d %b"), function(d) { return d.startOfWeek; }],
[d3.time.format("%a %d "), function(/* d */) { return true; }]
];
function formater(d) {
var i = 0, format = tickFormat[i];
while (!format[1](d)) format = tickFormat[++i];
var tickDisplay = format[0](dateAccessor(d));
// console.log(t;ickDisplay);
return tickDisplay;
}
function scale(x) {
return backingLinearScale(x);
}
scale.isPolyLinear = function() {
return true;
};const xAxisTickNumberThreshold = Math.floor(width / xAxisDistanceThreshold);
let xAxisTickValues;
// Dynamic tickValues depending on available space.
if (state.data[0].length < xAxisTickNumberThreshold) {
xAxisTickValues = state.data.map(d => d.date);
} else {
xAxisTickValues = null;
}
const x = d3.svg.axis()
.scale(scales.x)
.orient('bottom')
.tickValues(xAxisTickValues)
.tickFormat(d3.time.format('%b %Y'))
.outerTickSize(0);
const y = d3.svg.axis()
.scale(scales.y)
.orient('left')
.tickFormat(state.formatFunction)
.outerTickSize(0);
return {
x: x,
y: y,
};
}export function autoScale(values, range) {
// empty set
if (values.length === 0) {
return d3.scale.linear().domain([0, 1]).range(range);
}
const first = values[0];
// time series
if (_.isDate(first)) {
return d3.time.scale().domain(d3.extent(values)).nice().range([range[0], range[1] * 0.95]);
}
// ordinals, class and category strings
if (_.isString(first)) {
const domain = Array.from(new Set(values));
// if domain is length 1 then its not useful for mapping
return d3.scale.ordinal().domain(domain).rangeRoundPoints(range);
}
// normal linear
return d3.scale.linear().domain(d3.extent(values)).nice().range(range);
}function init() {
const $el = angular.element('.multi-metric-job-container .card-front');
const offset = $el.hasClass('card') ? 30 : 0;
margin.left = scope.chartTicksMargin.width;
svgWidth = $el.width() - offset;
vizWidth = svgWidth - margin.left - margin.right;
lineChartXScale = d3.time.scale().range([0, vizWidth]);
lineChartYScale = d3.scale.linear().range([lineChartHeight, 0]);
lineChartValuesLine = d3.svg.line()
.x(d => lineChartXScale(d.date))
.y(d => lineChartYScale(d.value))
.defined(d => d.value !== null);
}drawDelimiters() {
this._delimiters.call(delimiter({
xScale: this._scales.x,
dateFormat: this._configuration.locale ? this._configuration.locale.timeFormat('%d %B %Y') : d3.time.format('%d %B %Y'),
}));
}$(function () {
var dateFormat = d3.time.format('%Y-%m-%d');
var parent = d3.select('[data-chart="transactions-overview"]');
//todo custom reduce functions for server-side stuff
var volumeChart = dc.barChart('#volume-chart');
var valueChart = dc.compositeChart('#value-chart');
var amountChart = dc.barChart(valueChart);
var cumAmountChart = dc.lineChart(valueChart);
var accountChart = dc.rowChart('#account-selector');
var typeChart = dc.rowChart('#account-type-selector');
var transactionTable = dc.dataTable('#transaction-table');
var transactionCount = dc.dataCount(".dc-data-count");
var params = (new URL(document.location)).searchParams;
var dateMin = dateFormat.parse(params.get('after'));
var dateMax = dateFormat.parse(params.get('before'));
$("#reset-all").click(function () {export const getEmptySeries = (
start = Date.now() - 3600000,
end = Date.now()
) => {
const dates = d3.time
.scale()
.domain([new Date(start), new Date(end)])
.ticks();
return [
{
title: '',
type: 'line',
legendValue: '',
color: '',
data: dates.map(x => ({
x: x.getTime(),
y: null
}))
}
];function calcMonthPath(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = t0.getDay(), w0 = d3.time.weekOfYear(t0),
d1 = t1.getDay(), w1 = d3.time.weekOfYear(t1);
return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize +
"H" + w0 * cellSize + "V" + 7 * cellSize +
"H" + w1 * cellSize + "V" + (d1 + 1) * cellSize +
"H" + (w1 + 1) * cellSize + "V" + 0 +
"H" + (w0 + 1) * cellSize + "Z";
}
};}
let { history } = wrapper;
history = history.map((_h) => {
const h = { ..._h };
if (h.rating) {
h.newRating = h.rating;
}
if (h.date) {
h.ratingDate = h.date;
}
return h;
});
history.sort(({ ratingDate: d1 }, { ratingDate: d2 }) => moment(d1) - moment(d2));
const parseDate = d3.time.format.utc('%Y-%m-%dT%H:%M:%S.%LZ').parse;
const desktopMeasurements = {
w: 835,
h: 400,
padding: {
top: 20,
right: 5,
bottom: 100,
left: 60,
},
};
const mobileMeasurements = {
w: 0,
h: 200,
padding: {_drawPoints(el, data) {
this.svg.selectAll('*').remove();
let margin = { top: 50, right: 100, bottom: 50, left: 100 };
let width = el.offsetWidth;
let height = 700;
let parseDate = d3.time.format('%Y%m%d').parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
});
let x = d3.time.scale().range([0, width - margin.right - margin.left]);
let y = d3.scale.linear().range([height - margin.top - margin.bottom, 0]);
let color = d3.scale.category10().domain(
d3.keys(data[0]).filter(function(key) {
return key !== 'date';
})
);
let xAxis = d3.svg
