d3axis/demos/demo.html at master · TimeMagazineLabs/d3axis · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html>
	<head>
		<title>D3 Slider Demo</title>
		<style>
body {
	max-width: 750px;
	font-family: Arial, serif;
}

svg {
	border: 1px solid #CCC;
	display: inline-block;
	width: 100%;
}

#xScaleTop line, #xScaleTop path {
	stroke: green;
}

#xScaleTop .tick text {
	fill: red;
}

#svg_demo_1 {
	max-width: 60%;
}

#svg_demo_2 {
	max-width: 38%;
}

#svg_demo_3 {
	max-width: 25%;
}

#svg_demo_4 {
	max-width: 73%;
}


		</style>
	</head>
	<body>
		<svg id="svg_demo_1" height="200"></svg>
		<svg id="svg_demo_2" height="200"></svg>
		<svg id="svg_demo_3" height="400"></svg>
		<svg id="svg_demo_4" height="400"></svg>

		<script src="../dist/d3axis.js"></script>
		<script>

const formatDate = function(date) {
	const months = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.',	'Nov.', 'Dec.'];
	return months[date.getMonth()] + ' ' + date.getDate();
};

// some data we'll need
let today = new Date();
let startDate = new Date(today.getFullYear(), 0, 1);

let letters = "TIME LABS".split('').reverse();

let xScaleBottom = d3axis("#svg_demo_1", {
	id: "xScaleBottom",
	domain: [0, 50],
	label: "linear scale transitioning from 50 to 100",
	tickLength: 30
});

xScaleBottom.setDomain([0, 100], 2500);

/*
this is identical to:
	xScaleBottom.scale.domain([0, 100]);
	xScaleBottom.update(2000);
*/

let xScaleTop = d3axis("#svg_demo_2", {
	id: "xScaleTop",
	type: "time",
	orientation: "top",
	domain: [ startDate, today ],
	label: "Dates with `tickFormat` and `ticks`",
	rules: true,
	ticks: 4,
	tickFormat: function(d) {
		return formatDate(d);
	}
});

let yScaleLeft = d3axis("#svg_demo_3", {
	id: "yScaleLeft",
	type: "log",
	direction: "y",
	domain: [ 2, 32 ],
	base: 2,
	label: "log scale from 2 to 32",
	rules: true,
	tickFormat: function(d) {
		return '2^' + Math.log(d) / Math.log(2);
	}
});

let yScaleRight = d3axis("#svg_demo_4", {
	id: "yScaleRight",
	direction: "y",
	orientation: "right",
	type: "ordinal",
	domain: letters,
	label: "ordinal scale",
	tickLength: -5
});

window.onresize = function() {
	xScaleBottom.resize();
	xScaleTop.resize();
	yScaleLeft.resize();
	yScaleRight.resize();
};
		</script>
	</body>
</html>