Skip to content

Instantly share code, notes, and snippets.

@judge

judge/app.js

Created December 3, 2012 10:28
Show Gist options
  • Save judge/4194095 to your computer and use it in GitHub Desktop.
Save judge/4194095 to your computer and use it in GitHub Desktop.
Download ZIP
D3JS demo
Raw
app.js
// width and height for the main svg
var w = 960,
h = 400,
margin = 50;
// main svg creation
var svg = d3.select("#chart")
.append("svg")
.attr("width", w - margin)
.attr("height", h);
// define x range, we don't know the domain yet
var x = d3.time.scale()
.range([0 + margin, w - margin]);
// define y range
var y = d3.scale.linear()
.range([h - margin, 0 + margin]);
// X axis (using defined x range)
var xAxis = d3.svg.axis()
.scale(x)
.ticks(d3.time.years, 1)
.tickSize(-h)
.tickSubdivide(true)
.orient("bottom");
// Y axis (using defined y range)
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(h-margin)
.y1(function(d) { return y(d.price); });
// Drawing the line
var line = d3.svg.line()
.x(function(d, i) {
// console.log('data: ' + d.date + ' | index: ' + i + ' | scaled: ' + x(d.date));
return x(d.date);
})
.y(function(d, i) {
// console.log('data: ' + d.price + ' | index: ' + i + ' | scaled: ' + y(d.price));
return y(d.price);
});
// Fetching the json
d3.json("sample.json", function(data) {
data.forEach(function(d) {
d.price = +d.price;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.price; }));
h = h - margin;
// X axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + h + ")")
.call(xAxis);
// Y axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin + ", 0)")
.call(yAxis);
// Line
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("stroke-width", "2")
.attr("d", line);
// Path
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("opacity", ".4")
.attr("d", area)
.attr("fill", "steelblue")
.on("mouseover", onmouseover)
.on("mouseout", onmouseout);
// Circles
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("fill", "white")
.attr("stroke", "steelblue")
.attr("stroke-width", 1)
.attr("r", 2)
.attr("cx", function (d) { return x(d.date) })
.attr("cy", function (d) { return y(d.price) });
function onmouseover(d, i) {
d3.select('.line').transition().duration(800).attr("stroke-width", "4");
d3.selectAll('circle').transition().duration(800)
.attr("fill", "steelblue")
.attr("stroke-width", 0);
}
function onmouseout(d, i) {
d3.select('.line').transition().duration(800).attr("stroke-width", "2");
d3.selectAll('circle').transition().duration(800)
.attr("fill", "white")
.attr("stroke-width", 1);
}
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://d3js.org/d3.v2.js"></script>
<style type="text/css" media="all">
body { margin: 0; padding: 0; font: 10px Arial; }
.axis path,
.axis area,
.axis line { fill: none; stroke: #aaa; shape-rendering: crispEdges; }
.x.axis { stroke-opacity: .4; }
.line { fill: none; stroke: steelblue; padding: 10px; }
</style>
</head>
<body>
<div id="chart"></div>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Raw
sample.json
[{"date": 946681200000.0, "price": "1394.46"}, {"date": 949359600000.0, "price": "1366.42"}, {"date": 951865200000.0, "price": "1498.58"}, {"date": 954540000000.0, "price": "1452.43"}, {"date": 957132000000.0, "price": "1420.6"}, {"date": 959810400000.0, "price": "1454.6"}, {"date": 962402400000.0, "price": "1430.83"}, {"date": 965080800000.0, "price": "1517.68"}, {"date": 967759200000.0, "price": "1436.51"}, {"date": 970351200000.0, "price": "1429.4"}, {"date": 973033200000.0, "price": "1314.95"}, {"date": 975625200000.0, "price": "1320.28"}, {"date": 978303600000.0, "price": "1366.01"}, {"date": 980982000000.0, "price": "1239.94"}, {"date": 983401200000.0, "price": "1160.33"}, {"date": 986076000000.0, "price": "1249.46"}, {"date": 988668000000.0, "price": "1255.82"}, {"date": 991346400000.0, "price": "1224.38"}, {"date": 993938400000.0, "price": "1211.23"}, {"date": 996616800000.0, "price": "1133.58"}, {"date": 999295200000.0, "price": "1040.94"}, {"date": 1001887200000.0, "price": "1059.78"}, {"date": 1004569200000.0, "price": "1139.45"}, {"date": 1007161200000.0, "price": "1148.08"}, {"date": 1009839600000.0, "price": "1130.2"}, {"date": 1012518000000.0, "price": "1106.73"}, {"date": 1014937200000.0, "price": "1147.39"}, {"date": 1017612000000.0, "price": "1076.92"}, {"date": 1020204000000.0, "price": "1067.14"}, {"date": 1022882400000.0, "price": "989.82"}, {"date": 1025474400000.0, "price": "911.62"}, {"date": 1028152800000.0, "price": "916.07"}, {"date": 1030831200000.0, "price": "815.28"}, {"date": 1033423200000.0, "price": "885.76"}, {"date": 1036105200000.0, "price": "936.31"}, {"date": 1038697200000.0, "price": "879.82"}, {"date": 1041375600000.0, "price": "855.7"}, {"date": 1044054000000.0, "price": "841.15"}, {"date": 1046473200000.0, "price": "848.18"}, {"date": 1049148000000.0, "price": "916.92"}, {"date": 1051740000000.0, "price": "963.59"}, {"date": 1054418400000.0, "price": "974.5"}, {"date": 1057010400000.0, "price": "990.31"}, {"date": 1059688800000.0, "price": "1008.01"}, {"date": 1062367200000.0, "price": "995.97"}, {"date": 1064959200000.0, "price": "1050.71"}, {"date": 1067641200000.0, "price": "1058.2"}, {"date": 1070233200000.0, "price": "1111.92"}, {"date": 1072911600000.0, "price": "1131.13"}, {"date": 1075590000000.0, "price": "1144.94"}, {"date": 1078095600000.0, "price": "1126.21"}, {"date": 1080770400000.0, "price": "1107.3"}, {"date": 1083362400000.0, "price": "1120.68"}, {"date": 1086040800000.0, "price": "1140.84"}, {"date": 1088632800000.0, "price": "1101.72"}, {"date": 1091311200000.0, "price": "1104.24"}, {"date": 1093989600000.0, "price": "1114.58"}, {"date": 1096581600000.0, "price": "1130.2"}, {"date": 1099263600000.0, "price": "1173.82"}, {"date": 1101855600000.0, "price": "1211.92"}, {"date": 1104534000000.0, "price": "1181.27"}, {"date": 1107212400000.0, "price": "1203.6"}, {"date": 1109631600000.0, "price": "1180.59"}, {"date": 1112306400000.0, "price": "1156.85"}, {"date": 1114898400000.0, "price": "1191.5"}, {"date": 1117576800000.0, "price": "1191.33"}, {"date": 1120168800000.0, "price": "1234.18"}, {"date": 1122847200000.0, "price": "1220.33"}, {"date": 1125525600000.0, "price": "1228.81"}, {"date": 1128117600000.0, "price": "1207.01"}, {"date": 1130799600000.0, "price": "1249.48"}, {"date": 1133391600000.0, "price": "1248.29"}, {"date": 1136070000000.0, "price": "1280.08"}, {"date": 1138748400000.0, "price": "1280.66"}, {"date": 1141167600000.0, "price": "1294.87"}, {"date": 1143842400000.0, "price": "1310.61"}, {"date": 1146434400000.0, "price": "1270.09"}, {"date": 1149112800000.0, "price": "1270.2"}, {"date": 1151704800000.0, "price": "1276.66"}, {"date": 1154383200000.0, "price": "1303.82"}, {"date": 1157061600000.0, "price": "1335.85"}, {"date": 1159653600000.0, "price": "1377.94"}, {"date": 1162335600000.0, "price": "1400.63"}, {"date": 1164927600000.0, "price": "1418.3"}, {"date": 1167606000000.0, "price": "1438.24"}, {"date": 1170284400000.0, "price": "1406.82"}, {"date": 1172703600000.0, "price": "1420.86"}, {"date": 1175378400000.0, "price": "1482.37"}, {"date": 1177970400000.0, "price": "1530.62"}, {"date": 1180648800000.0, "price": "1503.35"}, {"date": 1183240800000.0, "price": "1455.27"}, {"date": 1185919200000.0, "price": "1473.99"}, {"date": 1188597600000.0, "price": "1526.75"}, {"date": 1191189600000.0, "price": "1549.38"}, {"date": 1193871600000.0, "price": "1481.14"}, {"date": 1196463600000.0, "price": "1468.36"}, {"date": 1199142000000.0, "price": "1378.55"}, {"date": 1201820400000.0, "price": "1330.63"}, {"date": 1204326000000.0, "price": "1322.7"}, {"date": 1207000800000.0, "price": "1385.59"}, {"date": 1209592800000.0, "price": "1400.38"}, {"date": 1212271200000.0, "price": "1280"}, {"date": 1214863200000.0, "price": "1267.38"}, {"date": 1217541600000.0, "price": "1282.83"}, {"date": 1220220000000.0, "price": "1166.36"}, {"date": 1222812000000.0, "price": "968.75"}, {"date": 1225494000000.0, "price": "896.24"}, {"date": 1228086000000.0, "price": "903.25"}, {"date": 1230764400000.0, "price": "825.88"}, {"date": 1233442800000.0, "price": "735.09"}, {"date": 1235862000000.0, "price": "797.87"}, {"date": 1238536800000.0, "price": "872.81"}, {"date": 1241128800000.0, "price": "919.14"}, {"date": 1243807200000.0, "price": "919.32"}, {"date": 1246399200000.0, "price": "987.48"}, {"date": 1249077600000.0, "price": "1020.62"}, {"date": 1251756000000.0, "price": "1057.08"}, {"date": 1254348000000.0, "price": "1036.19"}, {"date": 1257030000000.0, "price": "1095.63"}, {"date": 1259622000000.0, "price": "1115.1"}, {"date": 1262300400000.0, "price": "1073.87"}, {"date": 1264978800000.0, "price": "1104.49"}, {"date": 1267398000000.0, "price": "1140.45"}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment