falcondai · December 19, 2015 21:48
diff --git a/barchart.html b/barchart.html
 <!doctype html>
 <style>

 body {
  font: 10px sans-serif;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 .bar {
  fill: steelblue;
 }

 .x.axis path {
  display: none;
 }

 </style>
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <div></div>
 <div></div>
 <script>
 function barChart() {
  var margin = {top: 20, right: 20, bottom: 30, left: 60},
      width = 900 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  var xScale = d3.time.scale(),
      yScale = d3.scale.linear();

  var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom");

  var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left")
      .tickFormat(d3.format(',d'));

  var d_x, d_y;

  function my(selection) {
    selection.each(function(data) {
      xScale
          .domain(d3.extent(data, d_x))
          .range([0, width]);

      yScale
          .domain([0, d3.max(data, d_y)])
          .range([height, 0]);

      var svg = d3.select(this).selectAll('svg').data([data]);

      // fixtures
      var gEnter = svg.enter().append('svg').append('g');
      gEnter.append("g").attr("class", "x axis");
      gEnter
          .append('g').attr('class', 'y axis')
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("volume");

      // update layout
      svg .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom);

      var g = svg.select('g')
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      // update bar chart
      var bars = g.selectAll(".bar").data(data);
      bars.enter().append("rect")
          .attr("class", "bar");
      bars.exit().remove();
      bars.attr("x", function(d) { return xScale(d_x(d)); })
          .attr("width", .9 * width / data.length)
          .attr("y", function(d) { return yScale(d_y(d)); })
          .attr("height", function(d) { return height - yScale(d_y(d)); });

      // update axes
      g.select('.x.axis')
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
      g.select('.y.axis')
          .call(yAxis);
    });
  }

  my.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return my;
  };

  my.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return my;
  };

  my.margin = function(value) {
    if (!arguments.length) return margin;
    margin = value;
    return my;
  };

  my.x = function(accessor) {
    if (!arguments.length) return d_x;
    d_x = accessor;
    return my;
  };

  my.y = function(accessor) {
    if (!arguments.length) return d_y;
    d_y = accessor;
    return my;
  };

  return my;
 }

 d3.csv("/sample.aapl.csv", function(d) {
  return {
    time: +d.time,
    volume: +d.volume
  };
 }, function(error, data) {
  // data transform
  var t0 = data[0].time * 1000;
  data[0].time = new Date(t0);
  for (var i=1; i<data.length; i++) {
    data[i].time = new Date(data[i].time * 60 * 1000 + t0);
  }

  // create chart
  var chart = barChart()
      .x(function(d) { return d.time; })
      .y(function(d) { return d.volume; });

  d3.selectAll('div')
      .datum(data)
      .call(chart);
 });

 </script>
 </html>
diff --git a/sample.aapl.csv b/sample.aapl.csv
	<!doctype html>
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	fill: steelblue;
	}

	.x.axis path {
	display: none;
	}

	</style>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<div></div>
	<div></div>
	<script>
	function barChart() {
	var margin = {top: 20, right: 20, bottom: 30, left: 60},
	width = 900 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var xScale = d3.time.scale(),
	yScale = d3.scale.linear();

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(d3.format(',d'));

	var d_x, d_y;

	function my(selection) {
	selection.each(function(data) {
	xScale
	.domain(d3.extent(data, d_x))
	.range([0, width]);

	yScale
	.domain([0, d3.max(data, d_y)])
	.range([height, 0]);

	var svg = d3.select(this).selectAll('svg').data([data]);

	// fixtures
	var gEnter = svg.enter().append('svg').append('g');
	gEnter.append("g").attr("class", "x axis");
	gEnter
	.append('g').attr('class', 'y axis')
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("volume");

	// update layout
	svg .attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

	var g = svg.select('g')
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// update bar chart
	var bars = g.selectAll(".bar").data(data);
	bars.enter().append("rect")
	.attr("class", "bar");
	bars.exit().remove();
	bars.attr("x", function(d) { return xScale(d_x(d)); })
	.attr("width", .9 * width / data.length)
	.attr("y", function(d) { return yScale(d_y(d)); })
	.attr("height", function(d) { return height - yScale(d_y(d)); });

	// update axes
	g.select('.x.axis')
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);
	g.select('.y.axis')
	.call(yAxis);
	});
	}

	my.width = function(value) {
	if (!arguments.length) return width;
	width = value;
	return my;
	};

	my.height = function(value) {
	if (!arguments.length) return height;
	height = value;
	return my;
	};

	my.margin = function(value) {
	if (!arguments.length) return margin;
	margin = value;
	return my;
	};

	my.x = function(accessor) {
	if (!arguments.length) return d_x;
	d_x = accessor;
	return my;
	};

	my.y = function(accessor) {
	if (!arguments.length) return d_y;
	d_y = accessor;
	return my;
	};

	return my;
	}

	d3.csv("/sample.aapl.csv", function(d) {
	return {
	time: +d.time,
	volume: +d.volume
	};
	}, function(error, data) {
	// data transform
	var t0 = data[0].time * 1000;
	data[0].time = new Date(t0);
	for (var i=1; i<data.length; i++) {
	data[i].time = new Date(data[i].time * 60 * 1000 + t0);
	}

	// create chart
	var chart = barChart()
	.x(function(d) { return d.time; })
	.y(function(d) { return d.volume; });

	d3.selectAll('div')
	.datum(data)
	.call(chart);
	});

	</script>
	</html>
time	close	volume
1373635800	427.98	61794
1	427.48	109951
2	427.895	59131
3	427.53	40630
4	427.29	46688
5	427.8	51325
6	428.64	96866
7	428.69	96040
8	429.33	105596
9	429.4	105664
10	429.11	40363
11	428.752	44784
12	428.6	70680
13	428.13	74398
14	426.85	110130
15	427.2	62463
16	427.55	37202
17	428.1	79893
18	427.99	58722
19	428.12	41711
20	428.24	41379
21	428.24	51970
22	428.1	27428
23	428.13	30384
24	428	16926
25	427.9053	36082
26	427.65	19429
27	428.3486	63567
28	428.5	68009
29	427.82	46650
30	428.12	39635
31	428.11	22603
32	428.3	24813
33	428.26	21648
34	428.23	15719
35	428.14	24911
36	427.98	10572
37	428.07	11359
38	428.0229	5820
39	428.28	15525
40	428.52	22715
41	428.51	15986
42	428.12	18378
43	428.69	40960
44	428.5	14063
45	428.7	47298
46	428.83	19158
47	428.81	60619
48	429.14	36427
49	429.16	54584
50	429.28	17564
51	429.165	41292
52	428.69	23894
53	429.13	14903
54	429.39	16179
55	429.745	47388
56	429.5404	53896
57	429.63	26458
58	429.31	47015
59	429.25	28200
60	429.415	24100
61	429.1799	23090
62	428.7606	48407
63	428.67	36984
64	428.17	56651
65	428.22	34862
66	427.9899	42980
67	428.34	23578
68	428.598	42273
69	428.59	31521
70	428.43	31039
71	428.69	27774
72	428.41	20153
73	428.34	20191
74	428.55	22828
75	428.6	5410
76	428.5201	19174
77	428.5	13217
78	428.24	14145
79	427.6321	40101
80	427.38	36025
81	427.6299	24335
82	427.51	25797
83	427.2	38992
84	427.2	24340
85	427.56	19459
86	427.47	22498
87	427.43	10597
88	427.41	5650
89	427.66	11625
90	427.56	6905
91	427.922	15881
92	427.97	30457
93	427.64	17873
94	427.69	13996
95	427.451	7219
96	427.49	9638
97	427.39	10064
98	427.39	12143
99	427.32	13963
100	427.4	11259
101	427.65	15071
102	427.65	8268
103	427.57	5300
104	427.61	6176
105	427.644	3240
106	427.7	10722
107	427.58	10000
108	427.542	14486
109	427.36	2655
110	427.46	7835
111	427.43	10146
112	427.36	9362
113	427.53	5636
114	427.41	4828
115	427.42	5867
116	427.261	1965
117	427.356	8487
118	427.3901	7782
119	426.61	54399
120	425.9424	121473
121	426.16	32780
122	426.376	39287
123	426.33	20200
124	426.15	20136
125	425.6	29221
126	425.25	70917
127	425.31	28180
128	425.1101	32463
129	424.65	66392
130	424.91	48321
131	425.03	52177
132	425.3	14968
133	425.46	19077
134	425.45	10981
135	425.89	61047
136	425.77	28083
137	425.24	27246
138	425.45	15045
139	425.538	7492
140	425.47	5830
141	424.98	30214
142	424.92	18524
143	424.9	20035
144	424.86	12243
145	424.95	14075
146	425	18099
147	425.06	8073
148	425.19	11831
149	425.75	73737
150	425.81	19451
151	425.62	9450
152	425.63	8126
153	425.724	7426
154	425.79	7961
155	425.6	5477
156	425.74	8531
157	425.89	6865
158	426.27	19222
159	425.83	8634
160	425.84	9147
161	425.79	6151
162	425.72	4587
163	425.89	7164
164	425.83	1865
165	425.84	4135
166	425.553	26727
167	425.56	8000
168	425.515	4797
169	425.49	13152
170	425.23	40004
171	425.07	14034
172	425.11	12395
173	425.033	9151
174	425.13	2150
175	425.21	7237
176	425.128	6063
177	425.15	4476
178	425.12	7404
179	425	14704
180	424.8	39315
181	424.93	27594
182	424.75	12396
183	423.58	67408
184	423.64	118879
185	424.05	32248
186	423.97	24640
187	423.774	15507
188	423.72	26240
189	423.68	20289
190	424.32	33590
191	424.234	22053
192	424.18	15111
193	424.3	21102
194	424.57	29965
195	424.5	14875
196	424.8	17143
197	424.76	7391
198	424.81	7706
199	424.64	3851
200	424.443	6570
201	424.58	12685
202	424.3001	6853
203	424.44	7991
204	424.3659	4280
205	423.91	22022
206	424.08	10700
207	424.18	15031
208	424.2	12333
209	424.5	26378
210	424.57	19726
211	424.83	15717
212	424.78	12901
213	424.796	10206
214	424.552	17865
215	424.7	9378
216	424.65	6335
217	424.76	4379
218	424.65	8350
219	424.6	9257
220	424.68	9586
221	424.62	6104
222	424.585	5050
223	424.47	13900
224	424.49	9697
225	424.6199	8499
226	424.65	10146
227	424.85	11192
228	425.21	19425
229	425.25	20653
230	425.38	21273
231	425.4	18241
232	425.1	14692
233	424.86	15922
234	424.85	16315
235	425.04	11651
236	424.95	7222
237	424.9	10395
238	424.712	9839
239	424.7	4414
240	424.84	10535
241	424.85	7285
242	424.72	6839
243	424.672	4392
244	424.57	10357
245	424.28	14780
246	424.38	9164
247	424.26	7140
248	424.135	22823
249	424.16	8732
250	424.27	5325
251	424.23	3147
252	424.56	8805
253	424.57	16176
254	424.68	5242
255	424.7699	8496
256	424.75	11403
257	424.68	10176
258	424.78	8209
259	424.92	16789
260	424.99	11666
261	424.94	4532
262	424.74	7000
263	424.84	5470
264	424.8	500
266	424.96	1400
267	425.09	5084
268	424.81	6705
269	424.9	3298
270	424.89	7205
271	424.842	13392
272	424.8	9345
273	424.9	12619
274	424.812	12637
275	424.82	7204
276	424.844	5902
277	424.8692	8854
278	424.8	10780
279	424.52	18658
280	424.46	23329
281	424.4299	5234
282	424.3	9839
283	424.28	8120
284	424.32	6518
285	424.36	3902
286	424.28	15648
287	424.37	2556
288	424.37	2400
289	424.29	6922
290	424.35	6413
291	424.44	3101
292	424.37	11323
293	424.35	4550
294	424	38037
295	423.95	27503
296	423.97	14642
297	424.04	10080
298	424.1101	2282
299	424.071	5387
300	424.112	10155
301	424.21	6391
302	424.13	6173
303	424.21	3974
304	424.1537	6468
305	424.14	9315
306	423.93	10158
307	424.05	7760
308	424.12	7370
309	424	9615
310	423.99	3012
311	423.881	12043
312	423.9899	9351
313	423.99	13601
314	424.38	33314
315	424.4	13759
316	424.5	14420
317	424.364	11958
318	424.57	16562
319	424.99	29749
320	424.84	9467
321	425.031	24933
322	425.05	14618
323	425	16718
324	425	5445
325	424.97	4870
326	424.84	8156
327	424.96	7640
328	424.894	7729
329	424.74	8261
330	424.92	8792
331	424.8	7170
332	424.8	6973
333	424.74	10541
334	424.68	6821
335	424.65	6121
336	424.7	7700
337	424.66	4701
338	424.65	9591
339	424.65	12947
340	424.77	10999
341	424.894	9500
342	424.9243	5930
343	424.82	9167
344	424.83	7651
345	425.01	9711
346	425.03	8077
347	425.11	22159
348	425.13	10632
349	425.13	11385
350	425.19	13035
351	425.14	16258
352	425.2	18830
353	425.3	12631
354	425.26	5442
355	425.22	6713
356	425.01	11916
357	424.92	18961
358	425.02	8280
359	425.05	7843
360	425.09	9881
361	425.08	3930
362	424.99	11242
363	424.98	3955
364	424.93	9004
365	424.96	11796
366	424.91	8288
367	424.91	5795
368	424.95	15024
369	424.86	10913
370	424.75	23457
371	424.836	12670
372	424.9	13105
373	424.85	12230
374	424.84	7231
375	425	30059
376	425.03	23213
377	425.05	27627
378	425.03	21768
379	425.04	78270
380	425.43	66216
381	425.05	95783
382	424.93	48809
383	425.19	81105
384	425.17	45515
385	425.482	66436
386	425.7	89938
387	425.88	138035
388	426.05	116909
389	425.9	137459
390	426.51	0