How to proportionally increase the size of X axis which uses d3.scaleTime?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

For values using scaleLinear, this works just fine:

X = d3.scale.linear()

    .domain([0, d3.max(Data, function (d) { return d.x })*1.10])

Multiplication by 1.10 does exactly what I need. However, I have not figured out how to achieve the same with a time based axis:

  X= d3.scaleTime()

      .domain(d3.extent(Data, d => d.date))

edited Nov 17 '18 at 2:27

Gerardo Furtado

67.3k65294

asked Nov 16 '18 at 12:08

Ezoela Vacca

1034

Date.getTime() gives you a number, subtract the domain values, scale and add to the end value and use new Date(value) for the new domain end value

– rioV8
Nov 16 '18 at 12:11

@rioV8 Right but that will not be proportional, if I get it right. I would need to increase always by 10%, as in the example with scale.Linear.

– Ezoela Vacca
Nov 16 '18 at 12:21

You have a range of numbers shifted to the right (not starting at 0), you can make the range 10% bigger if x-domain = [20,100]

– rioV8
Nov 16 '18 at 15:02

add a comment |

For values using scaleLinear, this works just fine:

X = d3.scale.linear()

    .domain([0, d3.max(Data, function (d) { return d.x })*1.10])

Multiplication by 1.10 does exactly what I need. However, I have not figured out how to achieve the same with a time based axis:

  X= d3.scaleTime()

      .domain(d3.extent(Data, d => d.date))

edited Nov 17 '18 at 2:27

Gerardo Furtado

67.3k65294

asked Nov 16 '18 at 12:08

Ezoela Vacca

1034

Date.getTime() gives you a number, subtract the domain values, scale and add to the end value and use new Date(value) for the new domain end value

– rioV8
Nov 16 '18 at 12:11

@rioV8 Right but that will not be proportional, if I get it right. I would need to increase always by 10%, as in the example with scale.Linear.

– Ezoela Vacca
Nov 16 '18 at 12:21

You have a range of numbers shifted to the right (not starting at 0), you can make the range 10% bigger if x-domain = [20,100]

– rioV8
Nov 16 '18 at 15:02

add a comment |

For values using scaleLinear, this works just fine:

X = d3.scale.linear()

    .domain([0, d3.max(Data, function (d) { return d.x })*1.10])

Multiplication by 1.10 does exactly what I need. However, I have not figured out how to achieve the same with a time based axis:

  X= d3.scaleTime()

      .domain(d3.extent(Data, d => d.date))

edited Nov 17 '18 at 2:27

Gerardo Furtado

67.3k65294

asked Nov 16 '18 at 12:08

Ezoela Vacca

1034

For values using scaleLinear, this works just fine:

X = d3.scale.linear()

    .domain([0, d3.max(Data, function (d) { return d.x })*1.10])

Multiplication by 1.10 does exactly what I need. However, I have not figured out how to achieve the same with a time based axis:

  X= d3.scaleTime()

      .domain(d3.extent(Data, d => d.date))

javascript datetime d3.js

edited Nov 17 '18 at 2:27

Gerardo Furtado

67.3k65294

asked Nov 16 '18 at 12:08

Ezoela Vacca

1034

edited Nov 17 '18 at 2:27

Gerardo Furtado

67.3k65294

asked Nov 16 '18 at 12:08

Ezoela Vacca

1034

edited Nov 17 '18 at 2:27

Gerardo Furtado

67.3k65294

edited Nov 17 '18 at 2:27

Gerardo Furtado

67.3k65294

edited Nov 17 '18 at 2:27

Gerardo Furtado

67.3k65294

asked Nov 16 '18 at 12:08

Ezoela Vacca

1034

asked Nov 16 '18 at 12:08

Ezoela Vacca

1034

asked Nov 16 '18 at 12:08

Ezoela Vacca

1034

Date.getTime() gives you a number, subtract the domain values, scale and add to the end value and use new Date(value) for the new domain end value

– rioV8
Nov 16 '18 at 12:11

@rioV8 Right but that will not be proportional, if I get it right. I would need to increase always by 10%, as in the example with scale.Linear.

– Ezoela Vacca
Nov 16 '18 at 12:21

You have a range of numbers shifted to the right (not starting at 0), you can make the range 10% bigger if x-domain = [20,100]

– rioV8
Nov 16 '18 at 15:02

add a comment |

Date.getTime() gives you a number, subtract the domain values, scale and add to the end value and use new Date(value) for the new domain end value

– rioV8
Nov 16 '18 at 12:11

@rioV8 Right but that will not be proportional, if I get it right. I would need to increase always by 10%, as in the example with scale.Linear.

– Ezoela Vacca
Nov 16 '18 at 12:21

You have a range of numbers shifted to the right (not starting at 0), you can make the range 10% bigger if x-domain = [20,100]

– rioV8
Nov 16 '18 at 15:02

Date.getTime() gives you a number, subtract the domain values, scale and add to the end value and use new Date(value) for the new domain end value

– rioV8
Nov 16 '18 at 12:11

@rioV8 Right but that will not be proportional, if I get it right. I would need to increase always by 10%, as in the example with scale.Linear.

– Ezoela Vacca
Nov 16 '18 at 12:21

You have a range of numbers shifted to the right (not starting at 0), you can make the range 10% bigger if x-domain = [20,100]

– rioV8
Nov 16 '18 at 15:02

add a comment |

1 Answer
1

active

oldest

votes

You can do that by extracting the timestamp and making mathematical operations with it. However, time is more complex than numbers. You have to take into account February in leap years, months with 30 or 31 days, daylight saving time, etc...

As the D3 API says about the method I'll use further down:

...This method does not round the specified date to the interval. For example, if date is today at 5:34 PM, then d3.timeDay.offset(date, 1) returns 5:34 PM tomorrow (even if daylight saving changes!).

That being said, it's more comfortable using the D3 time methods.

Solution:

What you want can be achieved using interval.offSet, which:

Returns a new date equal to date plus step intervals.

For this to work, we first have to compute the interval between your minimum date and your maximum date.

So, supposing we have this time scale:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const scale = d3.scaleTime()

  .domain(dates);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

Let's add 10% more days at the end date (you can do the same with seconds, minutes, hours, years etc...).

First, we get the number of days with interval.count:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const numberOfDays = d3.timeDay.count(dates[0], dates[1]);

console.log(numberOfDays);

<script src="https://d3js.org/d3.v5.min.js"></script>

Then, let's multiply it by 10%:

const parser = d3.timeParse("%d-%m-%Y"); 

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

console.log(increase);

<script src="https://d3js.org/d3.v5.min.js"></script>

Don't mind about the number not being an integer: it will be floored.

Finally, we use interval.Offset to increase the last date:

const parser = d3.timeParse("%d-%m-%Y");

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

const scale = d3.scaleTime()

  .domain([dates[0], d3.timeDay.offset(dates[1], increase)]);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

edited Nov 17 '18 at 3:58

answered Nov 17 '18 at 2:25

Gerardo Furtado

67.3k65294

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53337627%2fhow-to-proportionally-increase-the-size-of-x-axis-which-uses-d3-scaletime%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

As the D3 API says about the method I'll use further down:

...This method does not round the specified date to the interval. For example, if date is today at 5:34 PM, then d3.timeDay.offset(date, 1) returns 5:34 PM tomorrow (even if daylight saving changes!).

That being said, it's more comfortable using the D3 time methods.

Solution:

What you want can be achieved using interval.offSet, which:

Returns a new date equal to date plus step intervals.

For this to work, we first have to compute the interval between your minimum date and your maximum date.

So, supposing we have this time scale:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const scale = d3.scaleTime()

  .domain(dates);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

Let's add 10% more days at the end date (you can do the same with seconds, minutes, hours, years etc...).

First, we get the number of days with interval.count:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const numberOfDays = d3.timeDay.count(dates[0], dates[1]);

console.log(numberOfDays);

<script src="https://d3js.org/d3.v5.min.js"></script>

Then, let's multiply it by 10%:

const parser = d3.timeParse("%d-%m-%Y"); 

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

console.log(increase);

<script src="https://d3js.org/d3.v5.min.js"></script>

Don't mind about the number not being an integer: it will be floored.

Finally, we use interval.Offset to increase the last date:

const parser = d3.timeParse("%d-%m-%Y");

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

const scale = d3.scaleTime()

  .domain([dates[0], d3.timeDay.offset(dates[1], increase)]);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

edited Nov 17 '18 at 3:58

answered Nov 17 '18 at 2:25

Gerardo Furtado

67.3k65294

add a comment |

As the D3 API says about the method I'll use further down:

...This method does not round the specified date to the interval. For example, if date is today at 5:34 PM, then d3.timeDay.offset(date, 1) returns 5:34 PM tomorrow (even if daylight saving changes!).

That being said, it's more comfortable using the D3 time methods.

Solution:

What you want can be achieved using interval.offSet, which:

Returns a new date equal to date plus step intervals.

For this to work, we first have to compute the interval between your minimum date and your maximum date.

So, supposing we have this time scale:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const scale = d3.scaleTime()

  .domain(dates);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

Let's add 10% more days at the end date (you can do the same with seconds, minutes, hours, years etc...).

First, we get the number of days with interval.count:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const numberOfDays = d3.timeDay.count(dates[0], dates[1]);

console.log(numberOfDays);

<script src="https://d3js.org/d3.v5.min.js"></script>

Then, let's multiply it by 10%:

const parser = d3.timeParse("%d-%m-%Y"); 

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

console.log(increase);

<script src="https://d3js.org/d3.v5.min.js"></script>

Don't mind about the number not being an integer: it will be floored.

Finally, we use interval.Offset to increase the last date:

const parser = d3.timeParse("%d-%m-%Y");

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

const scale = d3.scaleTime()

  .domain([dates[0], d3.timeDay.offset(dates[1], increase)]);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

edited Nov 17 '18 at 3:58

answered Nov 17 '18 at 2:25

Gerardo Furtado

67.3k65294

add a comment |

As the D3 API says about the method I'll use further down:

...This method does not round the specified date to the interval. For example, if date is today at 5:34 PM, then d3.timeDay.offset(date, 1) returns 5:34 PM tomorrow (even if daylight saving changes!).

That being said, it's more comfortable using the D3 time methods.

Solution:

What you want can be achieved using interval.offSet, which:

Returns a new date equal to date plus step intervals.

For this to work, we first have to compute the interval between your minimum date and your maximum date.

So, supposing we have this time scale:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const scale = d3.scaleTime()

  .domain(dates);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

Let's add 10% more days at the end date (you can do the same with seconds, minutes, hours, years etc...).

First, we get the number of days with interval.count:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const numberOfDays = d3.timeDay.count(dates[0], dates[1]);

console.log(numberOfDays);

<script src="https://d3js.org/d3.v5.min.js"></script>

Then, let's multiply it by 10%:

const parser = d3.timeParse("%d-%m-%Y"); 

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

console.log(increase);

<script src="https://d3js.org/d3.v5.min.js"></script>

Don't mind about the number not being an integer: it will be floored.

Finally, we use interval.Offset to increase the last date:

const parser = d3.timeParse("%d-%m-%Y");

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

const scale = d3.scaleTime()

  .domain([dates[0], d3.timeDay.offset(dates[1], increase)]);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

edited Nov 17 '18 at 3:58

answered Nov 17 '18 at 2:25

Gerardo Furtado

67.3k65294

As the D3 API says about the method I'll use further down:

...This method does not round the specified date to the interval. For example, if date is today at 5:34 PM, then d3.timeDay.offset(date, 1) returns 5:34 PM tomorrow (even if daylight saving changes!).

That being said, it's more comfortable using the D3 time methods.

Solution:

What you want can be achieved using interval.offSet, which:

Returns a new date equal to date plus step intervals.

For this to work, we first have to compute the interval between your minimum date and your maximum date.

So, supposing we have this time scale:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const scale = d3.scaleTime()

  .domain(dates);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

Let's add 10% more days at the end date (you can do the same with seconds, minutes, hours, years etc...).

First, we get the number of days with interval.count:

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const numberOfDays = d3.timeDay.count(dates[0], dates[1]);

console.log(numberOfDays);

<script src="https://d3js.org/d3.v5.min.js"></script>

Then, let's multiply it by 10%:

const parser = d3.timeParse("%d-%m-%Y"); 

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

console.log(increase);

<script src="https://d3js.org/d3.v5.min.js"></script>

Don't mind about the number not being an integer: it will be floored.

Finally, we use interval.Offset to increase the last date:

const parser = d3.timeParse("%d-%m-%Y");

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

const scale = d3.scaleTime()

  .domain([dates[0], d3.timeDay.offset(dates[1], increase)]);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const scale = d3.scaleTime()

  .domain(dates);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const scale = d3.scaleTime()

  .domain(dates);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const numberOfDays = d3.timeDay.count(dates[0], dates[1]);

console.log(numberOfDays);

<script src="https://d3js.org/d3.v5.min.js"></script>

const parser = d3.timeParse("%d-%m-%Y");

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const numberOfDays = d3.timeDay.count(dates[0], dates[1]);

console.log(numberOfDays);

<script src="https://d3js.org/d3.v5.min.js"></script>

const parser = d3.timeParse("%d-%m-%Y"); 

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

console.log(increase);

<script src="https://d3js.org/d3.v5.min.js"></script>

const parser = d3.timeParse("%d-%m-%Y"); 

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

console.log(increase);

<script src="https://d3js.org/d3.v5.min.js"></script>

const parser = d3.timeParse("%d-%m-%Y");

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

const scale = d3.scaleTime()

  .domain([dates[0], d3.timeDay.offset(dates[1], increase)]);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

const parser = d3.timeParse("%d-%m-%Y");

const percent = 0.1;

const dates = ["17-08-2018", "14-11-2018"].map(parser);

const increase = d3.timeDay.count(dates[0], dates[1]) * percent;

const scale = d3.scaleTime()

  .domain([dates[0], d3.timeDay.offset(dates[1], increase)]);

console.log(scale.domain())

<script src="https://d3js.org/d3.v5.min.js"></script>

edited Nov 17 '18 at 3:58

answered Nov 17 '18 at 2:25

Gerardo Furtado

67.3k65294

edited Nov 17 '18 at 3:58

answered Nov 17 '18 at 2:25

Gerardo Furtado

67.3k65294

answered Nov 17 '18 at 2:25

Gerardo Furtado

67.3k65294

answered Nov 17 '18 at 2:25

Gerardo Furtado

67.3k65294

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky