Skip to content

Instantly share code, notes, and snippets.

@stormpython

stormpython/index.html

Created March 24, 2014 19:45
Show Gist options
  • Save stormpython/9747605 to your computer and use it in GitHub Desktop.
Save stormpython/9747605 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.col {
display: inline-block;
}
</style>
</head>
<body>
<div id="element"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data = {
"rows": [
{
"label": "row 1",
"columns": [
{
"label": "200 requests",
"xAxisLabel": "Request Country",
"yAxisLabel": "Average Request Size in Bytes",
"serieses": [
{
"label": "html",
"color": "#333",
"children": [
[
"CN",
50830572802408990
],
[
"IN",
83992894216226400
],
[
"US",
65704677406495110
],
[
"BR",
6155.021222153057
],
[
"BD",
179375157893615260
]
]
},
{
"label": "php",
"children": [
[
"CN",
64953193801031280
],
[
"IN",
76095144080391900
],
[
"US",
81096828472477900
],
[
"ID",
137083250345573250
],
[
"BR",
6073.241383816046
]
]
},
{
"label": "png",
"children": [
[
"CN",
67589017429708296
],
[
"IN",
37923407822066680
],
[
"US",
4728.517248891383
],
[
"ID",
5836.477783153213
],
[
"BR",
5950.653162474434
]
]
},
{
"label": "css",
"children": [
[
"CN",
85465683106502140
],
[
"IN",
5524.459621033661
],
[
"ID",
274072172760005150
],
[
"US",
5176.109045901934
],
[
"BR",
4868.3383382341235
]
]
},
{
"label": "gif",
"children": [
[
"CN",
5780.219640299088
],
[
"IN",
222108382159824260
],
[
"ID",
3996.619774690406
],
[
"US",
5374.763236477319
],
[
"DE",
4369.288017861545
]
]
}
]
},// chart0,
{
"label": "200 requests",
"xAxisLabel": "Request Country",
"yAxisLabel": "Average Request Size in Bytes",
"serieses": [
{
"label": "html",
"color": "#333",
"children": [
[
"CN",
50830572802408990
],
[
"IN",
83992894216226400
],
[
"US",
65704677406495110
],
[
"BR",
6155.021222153057
],
[
"BD",
179375157893615260
]
]
},
{
"label": "php",
"children": [
[
"CN",
64953193801031280
],
[
"IN",
76095144080391900
],
[
"US",
81096828472477900
],
[
"ID",
137083250345573250
],
[
"BR",
6073.241383816046
]
]
},
{
"label": "png",
"children": [
[
"CN",
67589017429708296
],
[
"IN",
37923407822066680
],
[
"US",
4728.517248891383
],
[
"ID",
5836.477783153213
],
[
"BR",
5950.653162474434
]
]
},
{
"label": "css",
"children": [
[
"CN",
85465683106502140
],
[
"IN",
5524.459621033661
],
[
"ID",
274072172760005150
],
[
"US",
5176.109045901934
],
[
"BR",
4868.3383382341235
]
]
},
{
"label": "gif",
"children": [
[
"CN",
5780.219640299088
],
[
"IN",
222108382159824260
],
[
"ID",
3996.619774690406
],
[
"US",
5374.763236477319
],
[
"DE",
4369.288017861545
]
]
}
]
}
]
}
]
},
elem = "#element";
function getSvg(elem, data) {
var rows = d3.select(elem).selectAll("div")
.data(data.rows)
.enter().append("div")
.attr("class", "row")
.style("height", 50)
.style("width", 50);
var cols = rows.selectAll("div")
.data(function(d) { return d.columns; })
.enter().append("div")
.attr("class", "col")
.style("width", "50%");
var svg = cols.append("svg")
.attr("width", 500)
.attr("height", 500);
return svg;
}
var svg = getSvg(elem, data);
var g = svg.append("g")
.attr("transform", "translate(20,20)");
var stack = d3.layout.stack()
.x(function(d) { return d[0]; })
.y(function(d) { return d[1]; })
.values(function(d) { return d; });
var xScale = d3.scale.ordinal(),
yScale = d3.scale.linear(),
colorScale = d3.scale.linear(),
xAxis = d3.svg.axis().scale(xScale).orient('bottom').tickSize(0).tickPadding(6),
yAxis = d3.svg.axis().scale(yScale).orient('left').tickSize(0).tickPadding(6);
var obj = {};
count = svg.data().map(function(d) {
return d.serieses.map(function(e) {
return e.children.map(function(f) {
if (!obj[f[0]]) { obj[f[0]] = []; }
var i = f[0].length;
return obj[f[0]].push({ x: i + 1, y: f[1]});
});
});
});
console.log(obj);
var color = d3.scale.category10();
var stacked = stack(count);
var n = count[0].length,
m = count[0][0].length;
xScale.domain(d3.range(m)).rangeRoundBands([0, 300], 0.1);
yStackMax = d3.max(stacked, function(layer) {
return d3.max(layer, function(d) {
return d.y0 + d.y[1];
})
});
yScale.domain([0, yStackMax]).nice().range([300, 0]);
var rectg = g.selectAll(".layers").append("g")
.data(function(d) {
return stack(d.serieses.map(function(e) { return e.children; }));
})
.enter().append("g")
.style("fill", function(d) { return color(d[0]); });
//.attr("class", function(d, i) { console.log(d3.set(d).values()); });
rectg.selectAll(".rect").append("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d, i) { return xScale(i); })
.attr("y", function(d) { return yScale(d.y0 + d.y); })
.attr("height", function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); })
.attr("width", xScale.rangeBand())
.append("text")
.text(function(d) { return d[0]; });
</script>
</body>
</html>
Raw
piechart.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
font: 10px sans-serif;
fill: #444;
background: #f4f4f4;
}
.arc path {
stroke: #fff;
/* stroke-width: 3px; */
}
</style>
</head>
<body>
<div id="element" style="height: 500; width: 500;"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var k4 = { version: '0.0.0' };
k4.Chart = function(elem, args) {
if (typeof(k4[args.type]) !== 'function') { throw args.type + " is not a supported k4 function."; }
var type = args.type,
chartFunc = k4[type](elem, args);
return chartFunc;
}
k4.Pie = function(elem, args) {
var width = args.width || 500,
height = args.height || 500,
radius = args.radius || Math.min(width, height)/ 2,
sort = args.sort || null,
label = args.label || function(d) { return d[0]; },
value = args.value || function(d) { return d[1]; },
outerRadius = args.outerRadius || radius - 10,
innerRadius = args.innerRadius || 0,
color = args.color || d3.scale.category10(),
arc = d3.svg.arc(),
pie = d3.layout.pie(),
chart = {};
chart.render = function(data) {
arc.outerRadius(outerRadius)
.innerRadius(innerRadius);
pie.sort(sort).value(function(d) { return d.value; });
var svg = d3.select(elem).append('svg');
svg.attr('width', width).attr('height', height);
var gEnter = svg.append('g')
.attr('transform', 'translate(' + width/2 + ', ' + height/2 + ')');
var g = gEnter.selectAll('.arc')
.data(pie(data))
.enter().append('g')
.attr('class', 'arc')
.style('stroke-width', 2);
g.append('path')
.attr('d', arc)
.style('fill', function(d) {
return color(d.data[0]);
});
g.append('text')
.attr('transform', function(d) {
return 'translate(' + arc.centroid(d) + ')';
})
.attr('dy', '.35em')
.style('text-anchor', 'middle')
.style('fill', 'white')
.text(function(d) { return d.data.label; });
}
chart.width = function() {
if (!args.width) { return width; }
width = args.width;
return width;
};
chart.height = function() {
if (!args.height) { return height; }
height = args.height;
return height;
};
chart.radius = function() {
if (!args.radius) { return radius; }
radius = args.radius;
return radius;
}
chart.sort = function() {
if (!args.sort) { return sort; }
sort = args.sort;
return sort;
};
chart.label = function(_) {
if (!args.label) { return label; }
label = args.label;
return label;
};
chart.value = function(_) {
if (!args.value) { return value; }
value = args.value;
return value;
};
chart.outerRadius = function() {
if (!args.outerRadius) { return outerRadius; }
outerRadius = args.outerRadius;
return outerRadius;
};
chart.innerRadius = function() {
if (!args.innerRadius) { return innerRadius; }
innerRadius = args.innerRadius;
return innerRadius;
};
chart.color = function() {
if (!args.color) { return color; }
color = args.color;
return color;
};
chart.data = function() {
if (!arguments.length) { return data; }
data = _;
return data;
}
return chart;
}
var data = [
{label: "DEN", value: 256},
{label: "SEA", value: 770},
{label: "SF", value: 159},
{label: "NE", value: 106}
];
var myChart = new k4.Chart("#element", { type: 'Pie', width: 300, height: 300 });
console.log(myChart.radius());
myChart.render(data);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment