Skip to content

Instantly share code, notes, and snippets.

@ymendel

ymendel/data-day.csv

Last active August 29, 2015 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ymendel/b3abedb4e91ee13f53d6 to your computer and use it in GitHub Desktop.
Save ymendel/b3abedb4e91ee13f53d6 to your computer and use it in GitHub Desktop.
Download ZIP
testing d3 candelstick with bl.ocks
Raw
data-day.csv
Date Open High Low Close
22-Sep-14 243 248 242 242
23-Sep-14 242 243 239 239
24-Sep-14 239 243 238 241
25-Sep-14 241 243 240 242
26-Sep-14 242 246 240 245
27-Sep-14 245 245 242 242
28-Sep-14 242 243 242 243
29-Sep-14 243 243 240 242
30-Sep-14 242 243 239 242
01-Oct-14 242 243 241 241
02-Oct-14 241 245 241 243
03-Oct-14 243 245 241 243
04-Oct-14 243 244 242 243
05-Oct-14 243 245 243 245
06-Oct-14 245 246 244 246
07-Oct-14 246 254 246 250
08-Oct-14 250 253 250 251
09-Oct-14 251 251 248 248
10-Oct-14 248 253 248 253
11-Oct-14 253 253 251 251
12-Oct-14 251 251 248 248
13-Oct-14 248 252 248 252
14-Oct-14 252 254 251 254
15-Oct-14 254 256 253 254
16-Oct-14 254 266 254 266
17-Oct-14 266 268 265 265
18-Oct-14 265 265 265 265
19-Oct-14 265 270 265 269
20-Oct-14 269 273 269 270
21-Oct-14 270 276 270 273
22-Oct-14 273 281 273 276
23-Oct-14 276 277 275 275
24-Oct-14 275 278 274 278
25-Oct-14 278 278 278 278
26-Oct-14 278 281 278 281
27-Oct-14 281 286 280 286
28-Oct-14 286 288 284 285
29-Oct-14 285 287 282 282
30-Oct-14 282 286 282 284
31-Oct-14 284 284 272 273
01-Nov-14 273 275 273 274
02-Nov-14 274 274 273 273
03-Nov-14 273 275 272 272
04-Nov-14 272 277 270 276
05-Nov-14 276 280 276 278
06-Nov-14 278 282 278 281
07-Nov-14 281 283 280 280
08-Nov-14 280 281 280 281
09-Nov-14 281 283 281 283
Raw
data-week.csv
Date Open High Low Close
22-Sep-14 243 248 239 243
29-Sep-14 243 246 239 245
06-Oct-14 245 254 244 248
13-Oct-14 248 270 248 269
20-Oct-14 269 281 269 281
27-Oct-14 281 288 272 273
03-Nov-14 273 283 270 283
Raw
data.csv
22-Sep-14 243 248 242 242
23-Sep-14 242 243 239 239
24-Sep-14 239 243 238 241
25-Sep-14 241 243 240 242
26-Sep-14 242 246 240 245
27-Sep-14 245 245 242 242
28-Sep-14 242 243 242 243
29-Sep-14 243 243 240 242
30-Sep-14 242 243 239 242
01-Oct-14 242 243 241 241
02-Oct-14 241 245 241 243
03-Oct-14 243 245 241 243
04-Oct-14 243 244 242 243
05-Oct-14 243 245 243 245
06-Oct-14 245 246 244 246
07-Oct-14 246 254 246 250
08-Oct-14 250 253 250 251
09-Oct-14 251 251 248 248
10-Oct-14 248 253 248 253
11-Oct-14 253 253 251 251
12-Oct-14 251 251 248 248
13-Oct-14 248 252 248 252
14-Oct-14 252 254 251 254
15-Oct-14 254 256 253 254
16-Oct-14 254 266 254 266
17-Oct-14 266 268 265 265
18-Oct-14 265 265 265 265
19-Oct-14 265 270 265 269
20-Oct-14 269 273 269 270
21-Oct-14 270 276 270 273
22-Oct-14 273 281 273 276
23-Oct-14 276 277 275 275
24-Oct-14 275 278 274 278
25-Oct-14 278 278 278 278
26-Oct-14 278 281 278 281
27-Oct-14 281 286 280 286
28-Oct-14 286 288 284 285
29-Oct-14 285 287 282 282
30-Oct-14 282 286 282 284
31-Oct-14 284 284 272 273
01-Nov-14 273 275 273 274
02-Nov-14 274 274 273 273
03-Nov-14 273 275 272 272
04-Nov-14 272 277 270 276
05-Nov-14 276 280 276 278
06-Nov-14 278 282 278 281
07-Nov-14 281 283 280 280
08-Nov-14 280 281 280 281
09-Nov-14 281 283 281 283
Raw
extra data.txt
date open/close high/low metric line
22 Sep 243/243 248/239 242
29 Sep 243/245 246/239 - (fill in)
06 Oct 245/248 254/244 245
13 Oct 248/269 270/248 248
20 Oct 269/281 281/269 269
27 Oct 281/273 288/272 282
03 Nov 273/283 283/270 273
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
path.candle {
stroke: #000000;
}
path.candle.body {
stroke-width: 0;
}
path.candle.wick {
stroke-width: 1;
}
path.candle.up {
fill: #00AA00;
stroke: #00AA00;
}
path.candle.down {
fill: #FF0000;
stroke: #FF0000;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://techanjs.org/techan.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = techan.scale.financetime()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var candlestick = techan.plot.candlestick()
.volumeOpacity(false) // Set to true for volume opacity
.xScale(x)
.yScale(y);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(error, data) {
var accessor = candlestick.accessor();
data = data.slice(0, 200).map(function(d) {
return {
date: parseDate(d.Date),
open: +d.Open,
high: +d.High,
low: +d.Low,
close: +d.Close
};
}).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });
x.domain(data.map(accessor.d));
y.domain(techan.scale.plot.ohlc(data, accessor).domain());
svg.append("g")
.datum(data)
.attr("class", "candlestick")
.call(candlestick);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Bugs");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment