Skip to content

Instantly share code, notes, and snippets.

@RandomEtc
Created January 29, 2015 19:37
Show Gist options
  • Save RandomEtc/a3f514b984975eaee180 to your computer and use it in GitHub Desktop.
Save RandomEtc/a3f514b984975eaee180 to your computer and use it in GitHub Desktop.
Line graph noodling
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body { margin: 0; }
.line {
fill: none;
stroke-width: 2.0;
}
.axis .tick line, .axis path.domain {
fill: none;
stroke: black;
}
.axis .tick text {
font-family: sans-serif;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="sales-generator.js"></script>
<script>
var itemBuckets = salesGenerator.itemBuckets;
// d3 margin conventions.start()
var margin = {
left: 50,
top: 10,
bottom: 30,
right: 10
};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
var container = svg.append('g').attr('transform', 'translate('+[margin.left,margin.top]+')')
// d3 margin conventions.end()
var xScale = d3.scale.linear()
.domain([0,23])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, d3.max(itemBuckets, function(d) { return d.maxSales; })])
.range([height, 0]);
var line = d3.svg.line()
.x(function(d, i) { return xScale(i); })
.y(function(d) { return yScale(d); });
var xAxis = d3.svg.axis().scale(xScale);
var yAxis = d3.svg.axis().scale(yScale).orient('left');
container.append('g')
.attr('class','x axis')
.attr('transform','translate(0,'+height+')')
.call(xAxis);
container.append('g')
.attr('class','y axis')
.call(yAxis);
var lineLayer = container.append('g');
function update(data) {
var lines = lineLayer.selectAll('.line')
.data(data);
lines.enter().append('path')
.attr('d', function(d) { return line(d.buckets) })
.attr('class', 'line')
.style('stroke', function(d) { return d.color; })
}
update(itemBuckets);
</script>
var salesGenerator = (function() {
var items = [
{
name: "A",
cost: 2,
color: 'steelblue'
},
{
name: "B",
cost: 2.5,
color: 'tomato'
},
{
name: "C",
cost: 1,
color: 'mediumturquoise'
},
{
name: "D",
cost: 3,
color: 'plum'
}
]
var newItem = function () {
var index = Math.floor(Math.random() * (items.length));
var time = Math.floor(Math.random() * (23));
return {
itemName: items[index].name,
cost: items[index].cost,
hour: time
};
}
var data = []
for (var i = 0; i < 1000; i++) {
data.push(newItem());
}
var itemBuckets = [];
fillBuckets = function (item) {
var bucketData = [];
var totalSales = 0;
for (var i = 0; i < 24; i++) {
bucketData[i] = 0;
}
data.filter(function(d) { return d.itemName === item.name; })
.forEach(function(itemSale){
bucketData[itemSale.hour]++;
totalSales += itemSale.cost;
});
var maxSales = d3.max(bucketData);
itemBuckets.push({
name: item.name,
totalSales: totalSales,
maxSales: maxSales,
buckets: bucketData,
color: item.color
})
};
items.forEach(function(item){
fillBuckets(item);
});
return {
itemBuckets: itemBuckets
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment