[D3] Convert Dates to Numeric Values with Time Scales in D3 v4

Mapping abstract values to visual representations is what data visualization is all about, and that’s exactly what D3 scales do. This is usually done using pretty straightforward algorithms, but nothing is straightforward when you’re working with Date objects in JavaScript. If you’re plotting temporal data, you need to use a time scale.

function scaleTime(){
    var timeScale = d3.scaleTime()
        .domain([new Date(2016,0,1), new Date()])
        .range([0,100]);

    console.log(timeScale(new Date(2016,0,15)));
    console.log(timeScale(new Date(2016,3,15)));
    console.log(timeScale(new Date()));

    console.log(timeScale.invert(50));
}
时间: 2024-07-30 13:50:04

[D3] Convert Dates to Numeric Values with Time Scales in D3 v4的相关文章

[D3] Create Labels from Non-numeric Data with Ordinal Scales in D3 v4

When your data contains discrete, non-numeric property values that you need to format or convert before displaying, d3.scaleOrdinal() is the API you need. Maybe you need to convert a “pass”/”fail” field to “green”/”red” for coloring your bubble chart

【d3.js实践教程特别篇】PornHub发布基于d3的网民观看成人视频时长分布交互式地图

学习d3.js(以下都简称d3)也有一段时间了,运行d3做了几个项目.我发现中文的d3教程很少,国外资料多但要求有一定的英文阅读能力(推荐网址:http://bl.ocks.org/mbostock),于是就萌发了写一个d3实际运用系列文章的想法,现在开始付之行动.在系列中,我会用d3+html5 canvas实现一些实际效果(如统计结果展示,地图数据展示等),希望可以跟大家共同学习交流. 代码我公布在git.cschina.com上,大家可以clone到本地运行,地址是:http://git.

C# Note11:WPF Maskable TextBox for Numeric Values

This article describes how to enhance the WPF TextBox and make it accept just numeric (integer and floating point) values. The second goal is make the TextBox smart enough to make it easier to input numerics. This is an easy means to provide the Text

PHP Returning Numeric Values in JSON

When I wrote about launching a prototype of a new joind.in API, quite a few people started to try it out. My friend David Soria Parra emailed me to point out that many of the numbers in the API were being returned as strings. He said: It's just a sta

(转)Aspone.Cells设置Cell数据格式 Setting Display Formats of Numbers and Dates

Setting Display Formats Using Microsoft Excel: Right-click on any desired cell and select Format Cells option.A dialog appears that allows you to set the display formats of any kind of value. Formatting Cells using Microsoft Excel In the left side of

【D3 API 中文手册】提交记录

[D3 API 中文手册]提交记录 声明:本文仅供学习所用,未经作者允许严禁转载和演绎 <D3 API 中文手册>是D3官方API文档的中文翻译.始于2014-3-23日,基于VisualCrew小组的六次协作任务之上,目前已经大致翻译完毕,将陆续向官网提交D3 API 中文版. 本文主要内容有: 列举初版翻译/校对人员列表 记录中文翻译的官网提交情况 提供校对联系方式 提供D3 API简版翻译 翻译/校对人员列表 翻译人员列表 API项目 文档页数 单词数 翻译 校对 core.select

用D3画简单的力导图

由于10月国庆后,换了新工作,需要做一些可视化的图表,所以在这里整理一下,其中的一部分,今天就先整理力导图. 如上图所以,要完成这么一个力导图,需要的步骤如下: var forceTree3 = function(setting) { var relations = setting.relations, links = setting.links, selector = setting.selector var nodes = {} // 上传到服务器需要修改 var pathUrl = '/'

[D3] 14. Line and Area Charts with D3

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { padding-top: 50px; padding-left: 100px; } #chart { width: 300px; height:

[D3] Build a Line Chart with D3 v4

Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll see how to use D3 APIs to create our own simplified version of the charts seen on Google Finance. var margin = { top: 10, right: 20, bottom: 65, left