grassrootseconomics/ethstats-server
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

histogram improvements

Browse Source
This commit is contained in:
cubedro 2015-04-23 17:03:14 +03:00
parent 338fe37218
commit 07d0574b4d
3 changed files with 19 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

@ -342,7 +342,7 @@ svg .bar:hover {
svg .line { svg .line {
fill: none; fill: none;
stroke: #ff0000; stroke: #ff0000;
stroke-width: 2px; stroke-width: 1.2px;
shape-rendering: auto; shape-rendering: auto;
} }

27
public/js/directives.js
View File

@ -83,8 +83,8 @@ angular.module('netStatsApp.directives', []).
data: '=' data: '='
}, },
link: function(scope, element, attrs) { link: function(scope, element, attrs) {
var margin = {top: 0, right: 0, bottom: 0, left: 5}; var margin = {top: 0, right: 0, bottom: 0, left: 0};
var width = 285 - margin.left - margin.right, var width = 280 - margin.left - margin.right,
height = 173 - margin.top - margin.bottom; height = 173 - margin.top - margin.bottom;
var TICKS = 40; var TICKS = 40;
@ -107,24 +107,30 @@ angular.module('netStatsApp.directives', []).
var yAxis = d3.svg.axis() var yAxis = d3.svg.axis()
.scale(y) .scale(y)
.orient("left") .orient("left")
.ticks(4); .ticks(4)
.tickFormat(d3.format("%"));
var line = d3.svg.line() var line = d3.svg.line()
.x(function(d) { return x(d.x + d.dx); }) .x(function(d) { return x(d.x + d.dx); })
.y(function(d) { return y(d.y); }) .y(function(d) { return y(d.y); })
.interpolate('basis'); .interpolate('basis');
scope.init = function() { scope.init = function()
{
// Init data
var data = d3.layout.histogram() var data = d3.layout.histogram()
.frequency(true) .frequency(false)
.bins(x.ticks(TICKS)) .bins(x.ticks(TICKS))
(scope.data); (scope.data);
// Adjust y axis
y.domain([0, d3.max(data, function(d) { return d.y; })]); y.domain([0, d3.max(data, function(d) { return d.y; })]);
// y.domain([0, 1]);
// Delete previous histogram
element.empty(); element.empty();
/* Start drawing */
var svg = d3.select(".d3-blockpropagation").append("svg") var svg = d3.select(".d3-blockpropagation").append("svg")
.attr("width", width + margin.left + margin.right) .attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom) .attr("height", height + margin.top + margin.bottom)
@ -134,13 +140,12 @@ angular.module('netStatsApp.directives', []).
svg.append("g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + height + ")") .attr("transform", "translate(0," + height + ")")
// .attr("transform", "translate(0,0)")
.call(xAxis); .call(xAxis);
svg.append("g") svg.append("g")
.attr("class", "y axis") .attr("class", "y axis")
.attr("transform", "translate(0, 0)") // .attr("transform", "translate(0, 0)")
// .attr("transform", "translate(" + width + ", 0)") .attr("transform", "translate(" + width + ", 0)")
.call(yAxis); .call(yAxis);
@ -150,8 +155,8 @@ angular.module('netStatsApp.directives', []).
.attr("class", "bar") .attr("class", "bar")
.attr("x", function(d) { return x(d.x) + 1; }) .attr("x", function(d) { return x(d.x) + 1; })
.attr("y", function(d) { return y(d.y); }) .attr("y", function(d) { return y(d.y); })
.attr("rx", 1.5) .attr("rx", 1)
.attr("ry", 1.5) .attr("ry", 1)
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1) .attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
.attr("height", function(d) { return height - y(d.y); }); .attr("height", function(d) { return height - y(d.y); });

18
public/js/script.js
View File

@ -26,24 +26,6 @@
moment.relativeTimeThreshold('M', 12); moment.relativeTimeThreshold('M', 12);
json = [4292,12436,13141,14268,14650,0,55,774,891,1045,1184,1520,1786,1819,2103,2523,2846,2895,3010,3219,13046,0,284,507,525,1410,1531,1673,1803,1978,2652,2961,4224,4863,5056,12281,0,561,812,903,2161,2210,2312,2450,2559,2725,3273,4559,4727,5868,7777,0,1621,6982,9008,14035,0,1181,2753,2782,3580,3945,5779,7936,21489,0,196,1587,1611,1648,2603,2998,3802,4265,4464,5323,5606,6551,9982,10417,0,884,989,1202,1247,1282,2297,2577,2735,2935,3288,4261,4652,4706,4855,6509];
// var data = lineData = d3.layout.histogram()
// .frequency(true)
// .bins(x.ticks(40))
// (json);
// y.domain([0, d3.max(data, function(d) { return d.y; })]);
/* Start drawing */
// d3.tsv("histogram.tsv", type, function(error, histogram) {
// var n = d3.sum(histogram, function(d) { return d.y = d.a; });
// y.domain([0, d3.max(histogram, function(d) { return d.y; })]);
// var bar = svg.insert("g", ".axis") // var bar = svg.insert("g", ".axis")
// .attr("class", "bar") // .attr("class", "bar")
// .selectAll("g") // .selectAll("g")