histogram——Date slider - histogram legend

README.md

说明

• 图表类型：直方图(混合散点图)
• 原图地址：Date slider - histogram legend
• 修改了原图的部分实现，将滑动条部分的实现从line改为rect

知识点

• d3.histogram - 直方图生成器
• selections.exit() - 选取失去数据的节点
• d3.timeParse - 时间格式化
• d3.timeYears - 生成以年为间隔的时间范围数组
• d3.drag - 创建一个拖曳行为

data.js

const data = [
  {
    id: "15",
    date: "24-Nov-04",
    value: "1"
  },
  {
    id: "160",
    date: "01-Mar-05",
    value: "1"
  },
  {
    id: "333",
    date: "10-Mar-05",
    value: "1"
  },
  {
    id: "497",
    date: "22-Mar-05",
    value: "1"
  },
  {
    id: "83",
    date: "07-May-05",
    value: "1"
  },
  {
    id: "334",
    date: "02-Jun-05",
    value: "1"
  },
  {
    id: "447",
    date: "14-Jun-05",
    value: "1"
  },
  {
    id: "348",
    date: "01-Jul-05",
    value: "1"
  },
  {
    id: "434",
    date: "04-Jul-05",
    value: "1"
  },
  {
    id: "457",
    date: "15-Jul-05",
    value: "1"
  },
  {
    id: "383",
    date: "31-Jul-05",
    value: "1"
  },
  {
    id: "350",
    date: "31-Aug-05",
    value: "1"
  },
  {
    id: "163",
    date: "01-Sep-05",
    value: "1"
  },
  {
    id: "52",
    date: "01-Oct-05",
    value: "1"
  },
  {
    id: "423",
    date: "14-Nov-05",
    value: "1"
  },
  {
    id: "331",
    date: "01-Dec-05",
    value: "1"
  },
  {
    id: "410",
    date: "09-Dec-05",
    value: "1"
  },
  {
    id: "446",
    date: "15-Dec-05",
    value: "1"
  },
  {
    id: "131",
    date: "19-Dec-05",
    value: "1"
  },
  {
    id: "385",
    date: "29-Dec-05",
    value: "1"
  },
  {
    id: "270",
    date: "07-Feb-06",
    value: "1"
  },
  {
    id: "49",
    date: "14-Feb-06",
    value: "1"
  },
  {
    id: "161",
    date: "15-Feb-06",
    value: "1"
  },
  {
    id: "325",
    date: "15-Feb-06",
    value: "1"
  },
  {
    id: "167",
    date: "15-Mar-06",
    value: "1"
  },
  {
    id: "164",
    date: "17-Mar-06",
    value: "1"
  },
  {
    id: "53",
    date: "01-Apr-06",
    value: "1"
  },
  {
    id: "54",
    date: "05-Apr-06",
    value: "1"
  },
  {
    id: "454",
    date: "06-Apr-06",
    value: "1"
  },
  {
    id: "459",
    date: "12-Apr-06",
    value: "1"
  },
  {
    id: "336",
    date: "24-Apr-06",
    value: "1"
  },
  {
    id: "168",
    date: "01-May-06",
    value: "1"
  },
  {
    id: "241",
    date: "10-May-06",
    value: "1"
  },
  {
    id: "101",
    date: "12-May-06",
    value: "1"
  },
  {
    id: "387",
    date: "12-May-06",
    value: "1"
  },
  {
    id: "326",
    date: "26-May-06",
    value: "1"
  },
  {
    id: "414",
    date: "30-May-06",
    value: "1"
  },
  {
    id: "349",
    date: "02-Jun-06",
    value: "1"
  },
  {
    id: "353",
    date: "07-Jun-06",
    value: "1"
  },
  {
    id: "386",
    date: "08-Jun-06",
    value: "1"
  },
  {
    id: "55",
    date: "09-Jun-06",
    value: "1"
  },
  {
    id: "355",
    date: "14-Jun-06",
    value: "1"
  },
  {
    id: "352",
    date: "16-Jun-06",
    value: "1"
  },
  {
    id: "430",
    date: "21-Jun-06",
    value: "1"
  },
  {
    id: "483",
    date: "26-Jun-06",
    value: "1"
  },
  {
    id: "165",
    date: "28-Jun-06",
    value: "1"
  },
  {
    id: "328",
    date: "05-Jul-06",
    value: "1"
  },
  {
    id: "425",
    date: "05-Jul-06",
    value: "1"
  },
  {
    id: "402",
    date: "07-Jul-06",
    value: "1"
  },
  {
    id: "87",
    date: "01-Aug-06",
    value: "1"
  },
  {
    id: "70",
    date: "03-Aug-06",
    value: "1"
  },
  {
    id: "404",
    date: "21-Aug-06",
    value: "1"
  },
  {
    id: "170",
    date: "23-Aug-06",
    value: "1"
  },
  {
    id: "354",
    date: "14-Sep-06",
    value: "1"
  },
  {
    id: "22",
    date: "28-Sep-06",
    value: "1"
  },
  {
    id: "8",
    date: "01-Oct-06",
    value: "1"
  },
  {
    id: "69",
    date: "01-Oct-06",
    value: "1"
  },
  {
    id: "403",
    date: "06-Oct-06",
    value: "1"
  },
  {
    id: "448",
    date: "18-Oct-06",
    value: "1"
  },
  {
    id: "418",
    date: "20-Oct-06",
    value: "1"
  },
  {
    id: "57",
    date: "25-Oct-06",
    value: "1"
  },
  {
    id: "71",
    date: "07-Nov-06",
    value: "1"
  },
  {
    id: "369",
    date: "10-Nov-06",
    value: "1"
  },
  {
    id: "166",
    date: "11-Nov-06",
    value: "1"
  },
  {
    id: "19",
    date: "20-Nov-06",
    value: "1"
  },
  {
    id: "281",
    date: "22-Nov-06",
    value: "1"
  },
  {
    id: "340",
    date: "01-Dec-06",
    value: "1"
  },
  {
    id: "370",
    date: "12-Dec-06",
    value: "1"
  },
  {
    id: "72",
    date: "18-Dec-06",
    value: "1"
  },
  {
    id: "21",
    date: "19-Dec-06",
    value: "1"
  },
  {
    id: "75",
    date: "19-Dec-06",
    value: "1"
  },
  {
    id: "74",
    date: "20-Dec-06",
    value: "1"
  },
  {
    id: "366",
    date: "21-Dec-06",
    value: "1"
  },
  {
    id: "77",
    date: "24-Dec-06",
    value: "1"
  },
  {
    id: "367",
    date: "26-Dec-06",
    value: "1"
  },
  {
    id: "76",
    date: "27-Dec-06",
    value: "1"
  },
  {
    id: "78",
    date: "28-Dec-06",
    value: "1"
  },
  {
    id: "73",
    date: "29-Dec-06",
    value: "1"
  },
  {
    id: "388",
    date: "23-Jan-07",
    value: "1"
  },
  {
    id: "179",
    date: "30-Jan-07",
    value: "1"
  },
  {
    id: "409",
    date: "31-Jan-07",
    value: "1"
  },
  {
    id: "43",
    date: "01-Feb-07",
    value: "1"
  },
  {
    id: "180",
    date: "25-Feb-07",
    value: "1"
  },
  {
    id: "416",
    date: "25-Feb-07",
    value: "1"
  },
  {
    id: "129",
    date: "05-Mar-07",
    value: "1"
  },
  {
    id: "282",
    date: "11-Mar-07",
    value: "1"
  },
  {
    id: "462",
    date: "12-Mar-07",
    value: "1"
  },
  {
    id: "181",
    date: "13-Mar-07",
    value: "1"
  },
  {
    id: "485",
    date: "14-Mar-07",
    value: "1"
  },
  {
    id: "384",
    date: "16-Mar-07",
    value: "1"
  },
  {
    id: "68",
    date: "26-Mar-07",
    value: "1"
  },
  {
    id: "460",
    date: "02-Apr-07",
    value: "1"
  },
  {
    id: "20",
    date: "03-Apr-07",
    value: "1"
  },
  {
    id: "371",
    date: "08-Apr-07",
    value: "1"
  },
  {
    id: "4",
    date: "09-Apr-07",
    value: "1"
  },
  {
    id: "56",
    date: "13-Apr-07",
    value: "1"
  },
  {
    id: "173",
    date: "23-Apr-07",
    value: "1"
  },
  {
    id: "23",
    date: "24-Apr-07",
    value: "1"
  },
  {
    id: "372",
    date: "24-Apr-07",
    value: "1"
  },
  {
    id: "18",
    date: "26-Apr-07",
    value: "1"
  },
  {
    id: "16",
    date: "30-Apr-07",
    value: "1"
  },
  {
    id: "183",
    date: "05-May-07",
    value: "1"
  },
  {
    id: "373",
    date: "15-May-07",
    value: "1"
  },
  {
    id: "178",
    date: "16-May-07",
    value: "1"
  },
  {
    id: "358",
    date: "18-May-07",
    value: "1"
  },
  {
    id: "456",
    date: "24-May-07",
    value: "1"
  },
  {
    id: "426",
    date: "25-May-07",
    value: "1"
  },
  {
    id: "51",
    date: "13-Jun-07",
    value: "1"
  },
  {
    id: "46",
    date: "16-Jun-07",
    value: "1"
  },
  {
    id: "484",
    date: "25-Jun-07",
    value: "1"
  },
  {
    id: "187",
    date: "27-Jun-07",
    value: "1"
  },
  {
    id: "376",
    date: "06-Jul-07",
    value: "1"
  },
  {
    id: "435",
    date: "19-Jul-07",
    value: "1"
  },
  {
    id: "190",
    date: "23-Jul-07",
    value: "1"
  },
  {
    id: "192",
    date: "02-Aug-07",
    value: "1"
  },
  {
    id: "191",
    date: "04-Aug-07",
    value: "1"
  },
  {
    id: "186",
    date: "13-Aug-07",
    value: "1"
  },
  {
    id: "24",
    date: "01-Sep-07",
    value: "1"
  },
  {
    id: "400",
    date: "01-Sep-07",
    value: "1"
  },
  {
    id: "368",
    date: "06-Sep-07",
    value: "1"
  },
  {
    id: "458",
    date: "12-Sep-07",
    value: "1"
  },
  {
    id: "174",
    date: "14-Sep-07",
    value: "1"
  },
  {
    id: "193",
    date: "17-Sep-07",
    value: "1"
  },
  {
    id: "283",
    date: "25-Sep-07",
    value: "1"
  },
  {
    id: "27",
    date: "28-Sep-07",
    value: "1"
  },
  {
    id: "273",
    date: "08-Oct-07",
    value: "1"
  },
  {
    id: "195",
    date: "11-Oct-07",
    value: "1"
  },
  {
    id: "339",
    date: "19-Oct-07",
    value: "1"
  },
  {
    id: "184",
    date: "22-Oct-07",
    value: "1"
  },
  {
    id: "324",
    date: "24-Oct-07",
    value: "1"
  },
  {
    id: "182",
    date: "30-Oct-07",
    value: "1"
  },
  {
    id: "97",
    date: "01-Nov-07",
    value: "1"
  },
  {
    id: "197",
    date: "01-Nov-07",
    value: "1"
  },
  {
    id: "291",
    date: "02-Nov-07",
    value: "1"
  },
  {
    id: "207",
    date: "05-Nov-07",
    value: "1"
  },
  {
    id: "40",
    date: "06-Nov-07",
    value: "1"
  },
  {
    id: "130",
    date: "09-Nov-07",
    value: "1"
  },
  {
    id: "208",
    date: "11-Nov-07",
    value: "1"
  },
  {
    id: "59",
    date: "12-Nov-07",
    value: "1"
  },
  {
    id: "25",
    date: "14-Nov-07",
    value: "1"
  },
  {
    id: "345",
    date: "20-Nov-07",
    value: "1"
  },
  {
    id: "374",
    date: "22-Nov-07",
    value: "1"
  },
  {
    id: "60",
    date: "25-Nov-07",
    value: "1"
  },
  {
    id: "61",
    date: "26-Nov-07",
    value: "1"
  },
  {
    id: "35",
    date: "05-Dec-07",
    value: "1"
  },
  {
    id: "389",
    date: "11-Dec-07",
    value: "1"
  },
  {
    id: "436",
    date: "11-Dec-07",
    value: "1"
  },
  {
    id: "377",
    date: "28-Dec-07",
    value: "1"
  },
  {
    id: "408",
    date: "01-Jan-08",
    value: "1"
  },
  {
    id: "390",
    date: "06-Feb-08",
    value: "1"
  },
  {
    id: "392",
    date: "28-Feb-08",
    value: "1"
  },
  {
    id: "2",
    date: "01-Mar-08",
    value: "1"
  },
  {
    id: "28",
    date: "01-Mar-08",
    value: "1"
  },
  {
    id: "145",
    date: "01-Mar-08",
    value: "1"
  },
  {
    id: "285",
    date: "05-Mar-08",
    value: "1"
  },
  {
    id: "209",
    date: "06-Mar-08",
    value: "1"
  },
  {
    id: "211",
    date: "09-Mar-08",
    value: "1"
  },
  {
    id: "437",
    date: "11-Mar-08",
    value: "1"
  },
  {
    id: "126",
    date: "18-Mar-08",
    value: "1"
  },
  {
    id: "62",
    date: "01-Apr-08",
    value: "1"
  },
  {
    id: "127",
    date: "01-Apr-08",
    value: "1"
  },
  {
    id: "351",
    date: "25-Apr-08",
    value: "1"
  },
  {
    id: "194",
    date: "28-Apr-08",
    value: "1"
  },
  {
    id: "294",
    date: "28-Apr-08",
    value: "1"
  },
  {
    id: "461",
    date: "28-Apr-08",
    value: "1"
  },
  {
    id: "271",
    date: "29-Apr-08",
    value: "1"
  },
  {
    id: "272",
    date: "29-Apr-08",
    value: "1"
  },
  {
    id: "274",
    date: "29-Apr-08",
    value: "1"
  },
  {
    id: "278",
    date: "29-Apr-08",
    value: "1"
  },
  {
    id: "188",
    date: "01-May-08",
    value: "1"
  },
  {
    id: "375",
    date: "01-May-08",
    value: "1"
  },
  {
    id: "275",
    date: "04-May-08",
    value: "1"
  },
  {
    id: "421",
    date: "06-May-08",
    value: "1"
  },
  {
    id: "428",
    date: "03-Jun-08",
    value: "1"
  },
  {
    id: "342",
    date: "14-Jun-08",
    value: "1"
  },
  {
    id: "39",
    date: "15-Jun-08",
    value: "1"
  },
  {
    id: "488",
    date: "17-Jun-08",
    value: "1"
  },
  {
    id: "429",
    date: "23-Jun-08",
    value: "1"
  },
  {
    id: "361",
    date: "01-Jul-08",
    value: "1"
  },
  {
    id: "214",
    date: "03-Jul-08",
    value: "1"
  },
  {
    id: "438",
    date: "18-Jul-08",
    value: "1"
  },
  {
    id: "141",
    date: "20-Aug-08",
    value: "1"
  },
  {
    id: "215",
    date: "28-Aug-08",
    value: "1"
  },
  {
    id: "343",
    date: "01-Sep-08",
    value: "1"
  },
  {
    id: "360",
    date: "01-Sep-08",
    value: "1"
  },
  {
    id: "189",
    date: "18-Sep-08",
    value: "1"
  },
  {
    id: "210",
    date: "19-Sep-08",
    value: "1"
  },
  {
    id: "440",
    date: "22-Sep-08",
    value: "1"
  },
  {
    id: "63",
    date: "01-Oct-08",
    value: "1"
  },
  {
    id: "341",
    date: "08-Oct-08",
    value: "1"
  },
  {
    id: "441",
    date: "08-Oct-08",
    value: "1"
  },
  {
    id: "218",
    date: "30-Oct-08",
    value: "1"
  },
  {
    id: "212",
    date: "03-Nov-08",
    value: "1"
  },
  {
    id: "284",
    date: "12-Nov-08",
    value: "1"
  },
  {
    id: "137",
    date: "13-Nov-08",
    value: "1"
  },
  {
    id: "286",
    date: "19-Nov-08",
    value: "1"
  },
  {
    id: "296",
    date: "26-Nov-08",
    value: "1"
  },
  {
    id: "108",
    date: "28-Nov-08",
    value: "1"
  },
  {
    id: "445",
    date: "05-Dec-08",
    value: "1"
  },
  {
    id: "135",
    date: "18-Dec-08",
    value: "1"
  },
  {
    id: "88",
    date: "01-Jan-09",
    value: "1"
  },
  {
    id: "139",
    date: "01-Jan-09",
    value: "1"
  },
  {
    id: "220",
    date: "20-Jan-09",
    value: "1"
  },
  {
    id: "12",
    date: "01-Feb-09",
    value: "1"
  },
  {
    id: "309",
    date: "13-Feb-09",
    value: "1"
  },
  {
    id: "356",
    date: "17-Feb-09",
    value: "1"
  },
  {
    id: "474",
    date: "22-Feb-09",
    value: "1"
  },
  {
    id: "38",
    date: "23-Feb-09",
    value: "1"
  },
  {
    id: "3",
    date: "25-Feb-09",
    value: "1"
  },
  {
    id: "85",
    date: "26-Feb-09",
    value: "1"
  },
  {
    id: "9",
    date: "28-Feb-09",
    value: "1"
  },
  {
    id: "288",
    date: "20-Mar-09",
    value: "1"
  },
  {
    id: "99",
    date: "01-Apr-09",
    value: "1"
  },
  {
    id: "136",
    date: "01-Apr-09",
    value: "1"
  },
  {
    id: "13",
    date: "04-Apr-09",
    value: "1"
  },
  {
    id: "90",
    date: "09-Apr-09",
    value: "1"
  },
  {
    id: "475",
    date: "10-Apr-09",
    value: "1"
  },
  {
    id: "393",
    date: "13-Apr-09",
    value: "1"
  },
  {
    id: "222",
    date: "16-Apr-09",
    value: "1"
  },
  {
    id: "144",
    date: "01-May-09",
    value: "1"
  },
  {
    id: "295",
    date: "05-May-09",
    value: "1"
  },
  {
    id: "169",
    date: "19-May-09",
    value: "1"
  },
  {
    id: "306",
    date: "27-May-09",
    value: "1"
  },
  {
    id: "128",
    date: "30-May-09",
    value: "1"
  },
  {
    id: "132",
    date: "05-Jun-09",
    value: "1"
  },
  {
    id: "487",
    date: "15-Jun-09",
    value: "1"
  },
  {
    id: "347",
    date: "03-Jul-09",
    value: "1"
  },
  {
    id: "443",
    date: "20-Jul-09",
    value: "1"
  },
  {
    id: "442",
    date: "23-Jul-09",
    value: "1"
  },
  {
    id: "489",
    date: "30-Jul-09",
    value: "1"
  },
  {
    id: "308",
    date: "07-Aug-09",
    value: "1"
  },
  {
    id: "219",
    date: "10-Aug-09",
    value: "1"
  },
  {
    id: "216",
    date: "17-Aug-09",
    value: "1"
  },
  {
    id: "287",
    date: "17-Aug-09",
    value: "1"
  },
  {
    id: "476",
    date: "27-Aug-09",
    value: "1"
  },
  {
    id: "14",
    date: "28-Aug-09",
    value: "1"
  },
  {
    id: "213",
    date: "01-Sep-09",
    value: "1"
  },
  {
    id: "253",
    date: "08-Sep-09",
    value: "1"
  },
  {
    id: "79",
    date: "15-Sep-09",
    value: "1"
  },
  {
    id: "405",
    date: "03-Oct-09",
    value: "1"
  },
  {
    id: "147",
    date: "19-Oct-09",
    value: "1"
  },
  {
    id: "150",
    date: "21-Oct-09",
    value: "1"
  },
  {
    id: "149",
    date: "30-Oct-09",
    value: "1"
  },
  {
    id: "29",
    date: "31-Oct-09",
    value: "1"
  },
  {
    id: "185",
    date: "02-Nov-09",
    value: "1"
  },
  {
    id: "224",
    date: "05-Nov-09",
    value: "1"
  },
  {
    id: "217",
    date: "06-Nov-09",
    value: "1"
  },
  {
    id: "223",
    date: "06-Nov-09",
    value: "1"
  },
  {
    id: "246",
    date: "06-Nov-09",
    value: "1"
  },
  {
    id: "10",
    date: "10-Nov-09",
    value: "1"
  },
  {
    id: "225",
    date: "23-Nov-09",
    value: "1"
  },
  {
    id: "293",
    date: "30-Nov-09",
    value: "1"
  },
  {
    id: "102",
    date: "01-Dec-09",
    value: "1"
  },
  {
    id: "146",
    date: "17-Dec-09",
    value: "1"
  },
  {
    id: "478",
    date: "08-Feb-10",
    value: "1"
  },
  {
    id: "245",
    date: "10-Feb-10",
    value: "1"
  },
  {
    id: "477",
    date: "16-Feb-10",
    value: "1"
  },
  {
    id: "44",
    date: "01-Mar-10",
    value: "1"
  },
  {
    id: "92",
    date: "14-Mar-10",
    value: "1"
  },
  {
    id: "103",
    date: "23-Mar-10",
    value: "1"
  },
  {
    id: "378",
    date: "23-Mar-10",
    value: "1"
  },
  {
    id: "379",
    date: "23-Mar-10",
    value: "1"
  },
  {
    id: "301",
    date: "29-Mar-10",
    value: "1"
  },
  {
    id: "64",
    date: "01-Apr-10",
    value: "1"
  },
  {
    id: "244",
    date: "09-Apr-10",
    value: "1"
  },
  {
    id: "107",
    date: "14-Apr-10",
    value: "1"
  },
  {
    id: "237",
    date: "21-Apr-10",
    value: "1"
  },
  {
    id: "226",
    date: "26-Apr-10",
    value: "1"
  },
  {
    id: "236",
    date: "29-Apr-10",
    value: "1"
  },
  {
    id: "290",
    date: "30-Apr-10",
    value: "1"
  },
  {
    id: "276",
    date: "05-May-10",
    value: "1"
  },
  {
    id: "380",
    date: "05-May-10",
    value: "1"
  },
  {
    id: "397",
    date: "05-May-10",
    value: "1"
  },
  {
    id: "151",
    date: "12-May-10",
    value: "1"
  },
  {
    id: "221",
    date: "19-May-10",
    value: "1"
  },
  {
    id: "230",
    date: "19-May-10",
    value: "1"
  },
  {
    id: "248",
    date: "19-May-10",
    value: "1"
  },
  {
    id: "498",
    date: "27-May-10",
    value: "1"
  },
  {
    id: "327",
    date: "08-Jun-10",
    value: "1"
  },
  {
    id: "499",
    date: "19-Jun-10",
    value: "1"
  },
  {
    id: "490",
    date: "20-Jun-10",
    value: "1"
  },
  {
    id: "381",
    date: "22-Jun-10",
    value: "1"
  },
  {
    id: "140",
    date: "01-Jul-10",
    value: "1"
  },
  {
    id: "111",
    date: "24-Aug-10",
    value: "1"
  },
  {
    id: "153",
    date: "01-Sep-10",
    value: "1"
  },
  {
    id: "252",
    date: "01-Sep-10",
    value: "1"
  },
  {
    id: "307",
    date: "01-Sep-10",
    value: "1"
  },
  {
    id: "171",
    date: "01-Oct-10",
    value: "1"
  },
  {
    id: "175",
    date: "01-Oct-10",
    value: "1"
  },
  {
    id: "420",
    date: "01-Oct-10",
    value: "1"
  },
  {
    id: "196",
    date: "19-Oct-10",
    value: "1"
  },
  {
    id: "250",
    date: "19-Oct-10",
    value: "1"
  },
  {
    id: "466",
    date: "22-Oct-10",
    value: "1"
  },
  {
    id: "382",
    date: "23-Oct-10",
    value: "1"
  },
  {
    id: "240",
    date: "27-Oct-10",
    value: "1"
  },
  {
    id: "249",
    date: "06-Nov-10",
    value: "1"
  },
  {
    id: "427",
    date: "08-Nov-10",
    value: "1"
  },
  {
    id: "289",
    date: "11-Nov-10",
    value: "1"
  },
  {
    id: "486",
    date: "19-Nov-10",
    value: "1"
  },
  {
    id: "106",
    date: "26-Nov-10",
    value: "1"
  },
  {
    id: "242",
    date: "10-Dec-10",
    value: "1"
  },
  {
    id: "318",
    date: "10-Dec-10",
    value: "1"
  },
  {
    id: "401",
    date: "10-Dec-10",
    value: "1"
  },
  {
    id: "310",
    date: "27-Dec-10",
    value: "1"
  },
  {
    id: "104",
    date: "01-Jan-11",
    value: "1"
  },
  {
    id: "93",
    date: "18-Jan-11",
    value: "1"
  },
  {
    id: "172",
    date: "28-Jan-11",
    value: "1"
  },
  {
    id: "96",
    date: "22-Feb-11",
    value: "1"
  },
  {
    id: "444",
    date: "11-Mar-11",
    value: "1"
  },
  {
    id: "112",
    date: "23-Mar-11",
    value: "1"
  },
  {
    id: "455",
    date: "23-Mar-11",
    value: "1"
  },
  {
    id: "36",
    date: "24-Mar-11",
    value: "1"
  },
  {
    id: "406",
    date: "29-Mar-11",
    value: "1"
  },
  {
    id: "30",
    date: "06-Apr-11",
    value: "1"
  },
  {
    id: "233",
    date: "07-Apr-11",
    value: "1"
  },
  {
    id: "463",
    date: "07-Apr-11",
    value: "1"
  },
  {
    id: "495",
    date: "09-Apr-11",
    value: "1"
  },
  {
    id: "321",
    date: "26-Apr-11",
    value: "1"
  },
  {
    id: "491",
    date: "11-May-11",
    value: "1"
  },
  {
    id: "394",
    date: "16-May-11",
    value: "1"
  },
  {
    id: "94",
    date: "19-May-11",
    value: "1"
  },
  {
    id: "424",
    date: "20-May-11",
    value: "1"
  },
  {
    id: "464",
    date: "25-May-11",
    value: "1"
  },
  {
    id: "465",
    date: "14-Jul-11",
    value: "1"
  },
  {
    id: "322",
    date: "27-Jul-11",
    value: "1"
  },
  {
    id: "302",
    date: "01-Sep-11",
    value: "1"
  },
  {
    id: "312",
    date: "03-Sep-11",
    value: "1"
  },
  {
    id: "329",
    date: "19-Sep-11",
    value: "1"
  },
  {
    id: "419",
    date: "28-Sep-11",
    value: "1"
  },
  {
    id: "66",
    date: "01-Oct-11",
    value: "1"
  },
  {
    id: "37",
    date: "01-Nov-11",
    value: "1"
  },
  {
    id: "269",
    date: "04-Nov-11",
    value: "1"
  },
  {
    id: "359",
    date: "07-Nov-11",
    value: "1"
  },
  {
    id: "91",
    date: "09-Nov-11",
    value: "1"
  },
  {
    id: "496",
    date: "16-Nov-11",
    value: "1"
  },
  {
    id: "279",
    date: "24-Nov-11",
    value: "1"
  },
  {
    id: "95",
    date: "26-Nov-11",
    value: "1"
  },
  {
    id: "493",
    date: "28-Nov-11",
    value: "1"
  },
  {
    id: "453",
    date: "28-Dec-11",
    value: "1"
  },
  {
    id: "468",
    date: "17-Feb-12",
    value: "1"
  },
  {
    id: "335",
    date: "20-Feb-12",
    value: "1"
  },
  {
    id: "202",
    date: "20-Mar-12",
    value: "1"
  },
  {
    id: "332",
    date: "28-Mar-12",
    value: "1"
  },
  {
    id: "120",
    date: "16-Apr-12",
    value: "1"
  },
  {
    id: "162",
    date: "16-Apr-12",
    value: "1"
  },
  {
    id: "469",
    date: "17-Apr-12",
    value: "1"
  },
  {
    id: "277",
    date: "19-Apr-12",
    value: "1"
  },
  {
    id: "300",
    date: "25-Apr-12",
    value: "1"
  },
  {
    id: "413",
    date: "04-May-12",
    value: "1"
  },
  {
    id: "431",
    date: "14-May-12",
    value: "1"
  },
  {
    id: "346",
    date: "16-Jun-12",
    value: "1"
  },
  {
    id: "280",
    date: "18-Jun-12",
    value: "1"
  },
  {
    id: "89",
    date: "18-Jul-12",
    value: "1"
  },
  {
    id: "297",
    date: "19-Jul-12",
    value: "1"
  },
  {
    id: "492",
    date: "31-Jul-12",
    value: "1"
  },
  {
    id: "452",
    date: "10-Aug-12",
    value: "1"
  },
  {
    id: "118",
    date: "01-Sep-12",
    value: "1"
  },
  {
    id: "154",
    date: "06-Sep-12",
    value: "1"
  },
  {
    id: "500",
    date: "06-Sep-12",
    value: "1"
  },
  {
    id: "100",
    date: "16-Sep-12",
    value: "1"
  },
  {
    id: "26",
    date: "20-Sep-12",
    value: "1"
  },
  {
    id: "176",
    date: "21-Sep-12",
    value: "1"
  },
  {
    id: "148",
    date: "10-Oct-12",
    value: "1"
  },
  {
    id: "177",
    date: "11-Oct-12",
    value: "1"
  },
  {
    id: "311",
    date: "17-Oct-12",
    value: "1"
  },
  {
    id: "198",
    date: "20-Oct-12",
    value: "1"
  },
  {
    id: "133",
    date: "21-Oct-12",
    value: "1"
  },
  {
    id: "449",
    date: "31-Oct-12",
    value: "1"
  },
  {
    id: "203",
    date: "02-Nov-12",
    value: "1"
  },
  {
    id: "58",
    date: "09-Nov-12",
    value: "1"
  },
  {
    id: "450",
    date: "15-Nov-12",
    value: "1"
  },
  {
    id: "117",
    date: "03-Dec-12",
    value: "1"
  },
  {
    id: "395",
    date: "15-Jan-13",
    value: "1"
  },
  {
    id: "41",
    date: "24-Jan-13",
    value: "1"
  },
  {
    id: "228",
    date: "07-Feb-13",
    value: "1"
  },
  {
    id: "124",
    date: "01-Mar-13",
    value: "1"
  },
  {
    id: "407",
    date: "19-Mar-13",
    value: "1"
  },
  {
    id: "313",
    date: "24-Mar-13",
    value: "1"
  },
  {
    id: "320",
    date: "03-Apr-13",
    value: "1"
  },
  {
    id: "227",
    date: "10-Apr-13",
    value: "1"
  },
  {
    id: "239",
    date: "11-Apr-13",
    value: "1"
  },
  {
    id: "206",
    date: "12-Apr-13",
    value: "1"
  },
  {
    id: "238",
    date: "17-Apr-13",
    value: "1"
  },
  {
    id: "243",
    date: "18-Apr-13",
    value: "1"
  },
  {
    id: "204",
    date: "19-Apr-13",
    value: "1"
  },
  {
    id: "432",
    date: "25-Apr-13",
    value: "1"
  },
  {
    id: "396",
    date: "26-Apr-13",
    value: "1"
  },
  {
    id: "115",
    date: "28-Apr-13",
    value: "1"
  },
  {
    id: "109",
    date: "01-May-13",
    value: "1"
  },
  {
    id: "122",
    date: "01-May-13",
    value: "1"
  },
  {
    id: "292",
    date: "07-May-13",
    value: "1"
  },
  {
    id: "319",
    date: "13-May-13",
    value: "1"
  },
  {
    id: "205",
    date: "20-May-13",
    value: "1"
  },
  {
    id: "323",
    date: "22-May-13",
    value: "1"
  },
  {
    id: "125",
    date: "05-Jun-13",
    value: "1"
  },
  {
    id: "439",
    date: "07-Jun-13",
    value: "1"
  },
  {
    id: "231",
    date: "03-Jul-13",
    value: "1"
  },
  {
    id: "119",
    date: "23-Aug-13",
    value: "1"
  },
  {
    id: "234",
    date: "30-Aug-13",
    value: "1"
  },
  {
    id: "422",
    date: "06-Sep-13",
    value: "1"
  },
  {
    id: "363",
    date: "22-Sep-13",
    value: "1"
  },
  {
    id: "232",
    date: "23-Sep-13",
    value: "1"
  },
  {
    id: "247",
    date: "27-Sep-13",
    value: "1"
  },
  {
    id: "116",
    date: "09-Oct-13",
    value: "1"
  },
  {
    id: "398",
    date: "17-Oct-13",
    value: "1"
  },
  {
    id: "314",
    date: "20-Oct-13",
    value: "1"
  },
  {
    id: "357",
    date: "23-Oct-13",
    value: "1"
  },
  {
    id: "467",
    date: "05-Nov-13",
    value: "1"
  },
  {
    id: "480",
    date: "14-Nov-13",
    value: "1"
  },
  {
    id: "152",
    date: "26-Nov-13",
    value: "1"
  },
  {
    id: "5",
    date: "29-Nov-13",
    value: "1"
  },
  {
    id: "298",
    date: "29-Nov-13",
    value: "1"
  },
  {
    id: "330",
    date: "06-Dec-13",
    value: "1"
  },
  {
    id: "451",
    date: "04-Feb-14",
    value: "1"
  },
  {
    id: "142",
    date: "20-Feb-14",
    value: "1"
  },
  {
    id: "1",
    date: "15-Apr-14",
    value: "1"
  },
  {
    id: "255",
    date: "06-Jun-14",
    value: "1"
  },
  {
    id: "362",
    date: "11-Jun-14",
    value: "1"
  },
  {
    id: "256",
    date: "12-Jun-14",
    value: "1"
  },
  {
    id: "257",
    date: "03-Jul-14",
    value: "1"
  },
  {
    id: "143",
    date: "04-Jul-14",
    value: "1"
  },
  {
    id: "315",
    date: "07-Jul-14",
    value: "1"
  },
  {
    id: "304",
    date: "17-Jul-14",
    value: "1"
  },
  {
    id: "305",
    date: "17-Jul-14",
    value: "1"
  },
  {
    id: "258",
    date: "05-Aug-14",
    value: "1"
  },
  {
    id: "433",
    date: "27-Aug-14",
    value: "1"
  },
  {
    id: "417",
    date: "02-Sep-14",
    value: "1"
  },
  {
    id: "479",
    date: "02-Sep-14",
    value: "1"
  },
  {
    id: "138",
    date: "19-Sep-14",
    value: "1"
  },
  {
    id: "411",
    date: "21-Sep-14",
    value: "1"
  },
  {
    id: "31",
    date: "24-Sep-14",
    value: "1"
  },
  {
    id: "259",
    date: "24-Oct-14",
    value: "1"
  },
  {
    id: "481",
    date: "28-Oct-14",
    value: "1"
  },
  {
    id: "260",
    date: "31-Oct-14",
    value: "1"
  },
  {
    id: "261",
    date: "05-Nov-14",
    value: "1"
  },
  {
    id: "482",
    date: "07-Dec-14",
    value: "1"
  },
  {
    id: "156",
    date: "19-Dec-14",
    value: "1"
  },
  {
    id: "155",
    date: "06-Feb-15",
    value: "1"
  },
  {
    id: "134",
    date: "01-Mar-15",
    value: "1"
  },
  {
    id: "254",
    date: "10-Apr-15",
    value: "1"
  },
  {
    id: "262",
    date: "18-May-15",
    value: "1"
  },
  {
    id: "471",
    date: "22-May-15",
    value: "1"
  },
  {
    id: "263",
    date: "01-Jun-15",
    value: "1"
  },
  {
    id: "337",
    date: "29-Jun-15",
    value: "1"
  },
  {
    id: "86",
    date: "20-Aug-15",
    value: "1"
  },
  {
    id: "316",
    date: "02-Sep-15",
    value: "1"
  },
  {
    id: "48",
    date: "10-Sep-15",
    value: "1"
  },
  {
    id: "473",
    date: "19-Sep-15",
    value: "1"
  },
  {
    id: "344",
    date: "21-Sep-15",
    value: "1"
  },
  {
    id: "11",
    date: "01-Oct-15",
    value: "1"
  },
  {
    id: "364",
    date: "11-Nov-15",
    value: "1"
  },
  {
    id: "494",
    date: "26-Nov-15",
    value: "1"
  },
  {
    id: "105",
    date: "24-Jun-16",
    value: "1"
  },
  {
    id: "123",
    date: "01-Sep-16",
    value: "1"
  },
  {
    id: "365",
    date: "06-Oct-16",
    value: "1"
  },
  {
    id: "82",
    date: "22-Oct-16",
    value: "1"
  },
  {
    id: "399",
    date: "13-Dec-16",
    value: "1"
  },
  {
    id: "42",
    date: "26-Dec-16",
    value: "1"
  },
  {
    id: "317",
    date: "16-Feb-17",
    value: "1"
  },
  {
    id: "34",
    date: "24-Mar-17",
    value: "1"
  }
]

index.html

<!DOCTYPE html>
<head>
    <meta charset='utf-8'>
    <style>
        body {
            font-family:'avenir next', Arial, sans-serif;
            font-size: 12px;
            color: #696969;
        }
        #vis{
            margin: 0 auto;
            width: 960px;
            height: 500px;
        }

        .ticks {
            font-size: 10px;
        }


        .track-overlay {
            pointer-events: stroke;
            stroke-width: 50px;
            stroke: transparent;
            cursor: crosshair;
        }

        .drag-layer {
            cursor: crosshair
        }

        .handle {
            fill: #fff;
            stroke: #000;
            stroke-opacity: 0.5;
            stroke-width: 1.25px;
        }
    </style>
</head>

<body>
<div id='vis'></div>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='./data.js'></script>
<script>
  const margin = {top:50, right:50, bottom:50, left:50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom

  const histHeight = height/5

  const parseDate = d3.timeParse('%d-%b-%y')
  const formatDateIntoYear = d3.timeFormat('%Y')

  const startDate = new Date('2004-11-01')
  const endDate = new Date('2017-04-01')

  const dateArray = d3.timeYears(startDate, d3.timeYear.offset(endDate, 1))

  // 颜色比例尺
  const colours = d3.scaleOrdinal()
    .domain(dateArray)
    .range(['#ffc388','#ffb269','#ffa15e','#fd8f5b','#f97d5a','#f26c58','#e95b56','#e04b51','#d53a4b','#c92c42','#bb1d36','#ac0f29','#9c0418','#8b0000']);

  // x轴比例尺
  const x = d3.scaleTime()
    .domain([startDate, endDate])
    .range([0, width])
    .clamp(true)  // time.clamp - 启用闭合, 意思是如果入参超出定义域，则返回值会直接显示为边界值，查看https://github.com/d3/d3-scale#continuous_clamp

  // 直方图生成器
  const histogram = d3.histogram()  // histogram 将离散样本分成连续的无重叠的间隔
    .value(d => d.date)             // histogram.value - 为每个样本指定一个值访问器
    .domain(x.domain())             // histogram.domain - 指定可观测值的间隔
    .thresholds(x.ticks(d3.timeYear)) // histogram.thresholds - 指定值划分成不同箱的方法

  data.forEach(d => {
    d.date = parseDate(d.date)
  })

  const bins = histogram(data)

  // y轴比例尺
  const y = d3.scaleLinear()
    .domain([0, d3.max(bins, d => d.length)])
    .range([histHeight, 0])




  const svg = d3.select('#vis')
    .append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)

  // 直方图容器g
  const hist = svg.append('g')
    .attr('class', 'histogram')
    .attr('transform', `translate(${margin.left}, ${margin.top})`)

  // 散点图容器g
  const plot = svg.append('g')
    .attr('class', 'plot')
    .attr('transform', `translate(${margin.left}, ${margin.top})`)

  // 滑动条容器g
  const slider = svg.append('g')
    .attr('class', 'slider')
    .attr('transform', `translate(${margin.left}, ${margin.top + histHeight})`)


  drawHistogram() // 绘制直方部分
  drawPlot(data) // 绘制散点部分
  drawSlider() // 绘制滑动条部分


  function drawHistogram() {

    const bar = hist.selectAll('.bar')
      .data(bins)
      .enter()
      .append('g')
      .attr('class', 'bar')
      .attr('transform', d => `translate(${x(d.x0)}, ${y(d.length)})`)

    bar.append('rect')
      .attr('class', 'bar')
      .attr('width', d => x(d.x1) - x(d.x0) - 1) // 1是柱子间的间隔
      .attr('height', d =>  histHeight - y(d.length))
      .attr('fill', d => colours(d.x0))

    bar.append('text')
      .attr('dy', '.75em')
      .attr('y', '6')
      .attr('x', d => (x(d.x1) - x(d.x0))/2)
      .attr('text-anchor', 'middle')
      .text(d => d.length > 15 ? d.length : '')
      .attr('fill', 'white')

  }

  function drawSlider() {
    // 轨迹背景条
    slider.append('rect')
      .attr('class', 'drag-bar')
      .attr('x', 0)
      .attr('y', -5) // 起始位置是0轴的位置
      .attr('width', width)
      .attr('height', 10)
      .attr('fill', '#dcdcdc')
      .attr('rx', 4)
      .attr('ry', 4)

    // 可拖拽区域(时间绑定区域)
    slider.append('rect')
      .attr('class', 'drag-layer')
      .attr('x', 0)
      .attr('y', -35) // 起始位置是0轴的位置
      .attr('width', width)
      .attr('height', 70)
      .attr('fill', 'transparent')
      .call(
        d3.drag().on('start drag', update)
      )


    slider.append('g', '.track-overlay')
      .attr('class', 'ticks')
      .attr('transform', 'translate(0, 18)')
      .selectAll('text')
      .data(x.ticks(10))
      .enter()
      .append('text')
      .attr('x', x)
      .attr('y', 10)
      .attr('text-anchor', 'middle')
      .text(d => formatDateIntoYear(d))

    handle = slider.append('circle', '.track-overlay')
      .attr('class', 'handle')
      .attr('r', 9)
  }

  function drawPlot(data) {
    const locations = plot.selectAll('.location')
      .data(data, d => d.id)

    // 有数据但是无节点，新生成的节点会有动画效果
    locations.enter()
      .append('circle')
      .attr('class', 'location')
      .attr('cx', d => x(d.date))
      .attr('cy', d => Math.random() * ((height / 2 + 50) - (height / 2 - 50)) + (height / 2 - 50))
      .style('fill', d => colours(d3.timeYear(d.date)))
      .style('stroke', d => colours(d3.timeYear(d.date)))
      .style('opacity', 0.3)
      .attr('r', 5)
      .transition()
      .duration(400)
      .attr('r', 15)
      .transition()
      .attr('r', 5)

    // 将失去数据部分的节点删除
    locations.exit().remove()
  }

  function update() {
    const h = x.invert(d3.event.x)
    // 改变拖动条条的位置
    handle.attr('cx', x(h))

    // 删除除当前位置以下的数据
    const newData = data.filter(d => d.date < h)
    // 重汇散点图
    drawPlot(newData)

    // 重新设置颜色, 小于h的还是原来的颜色，大于h的则置灰
    d3.selectAll('.bar')
      .attr('fill', d => d.x0 < h ? colours(d.x0) : '#eaeaea')
  }

</script>
</body>

thumbnail.png