diff --git a/public/css/style.css b/public/css/style.css index 6d511fb..f5ede69 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -336,35 +336,28 @@ svg { } svg .bars .bar { - fill: #10a0de; - opacity: 0.8; + opacity: 1; shape-rendering: auto; } svg .bars .handle { - fill: #10a0de; opacity: 0; } svg .bars .highlight { - fill: #fff; opacity: 0; } -svg .bars g:hover .bar { +svg .bars g:hover .highlight { opacity: 1; } svg .line { fill: none; stroke: #ff0000; - opacity: 0.8; - stroke-width: 2px; - shape-rendering: auto; -} - -svg .bar .a { - fill: #aec7e8; + stroke-width: 1.3px; + shape-rendering: geometric-precision; + -webkit-svg-shadow: 0 0 7px #fff; } svg .bar text { @@ -386,4 +379,8 @@ svg .axis text { font-weight: 700; -webkit-font-smoothing: subpixel-antialiased; -moz-font-smoothing: subpixel-antialiased; +} + +svg .y.axis .tick:first-child text { + opacity: 0; } \ No newline at end of file diff --git a/public/js/directives.js b/public/js/directives.js index affeef6..a29a45c 100644 --- a/public/js/directives.js +++ b/public/js/directives.js @@ -98,6 +98,10 @@ angular.module('netStatsApp.directives', []). .range([height, 0]) .interpolate(d3.interpolateRound); + var color = d3.scale.linear() + .domain([1000, 3000, 7000, 10000, 20000]) + .range(["#7bcc3a", "#FFD162", "#ff8a00", "#F74B4B", "#CC0000"]); + var xAxis = d3.svg.axis() .scale(x) .orient("bottom") @@ -112,7 +116,7 @@ angular.module('netStatsApp.directives', []). var line = d3.svg.line() .x(function(d) { return x(d.x + d.dx/2) - 1; }) - .y(function(d) { return y(d.y); }) + .y(function(d) { return y(d.y) - 2; }) .interpolate('basis'); var tip = d3.tip() @@ -156,13 +160,13 @@ angular.module('netStatsApp.directives', []). .call(yAxis); - var bar = svg.insert("g", ".axis") + var bar = svg.append("g") .attr("class", "bars") .selectAll("g") .data(data) .enter().append("g") .attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; }) - .on('mouseover', function(d) { tip.show(d, d3.select(this).select('.bar')[0][0]); }) + .on('mouseover', function(d) { tip.show(d, d3.select(this).select('.bar').node()); }) .on('mouseout', tip.hide); bar.insert("rect") @@ -176,16 +180,18 @@ angular.module('netStatsApp.directives', []). .attr("y", function(d) { return y(d.y); }) .attr("rx", 1.2) .attr("ry", 1.2) + .attr("fill", function(d) { return color(d.x); }) .attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1) .attr("height", function(d) { return height - y(d.y) + 1; }); bar.insert("rect") .attr("class", "highlight") .attr("y", function(d) { return y(d.y); }) + .attr("fill", function(d) { return d3.rgb(color(d.x)).brighter(.7).toString(); }) .attr("rx", 1) .attr("ry", 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) + 1; }); svg.append("path") .attr("class", "line") diff --git a/public/js/script.js b/public/js/script.js index 3f61247..c54bf9d 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -25,33 +25,4 @@ moment.relativeTimeThreshold('d', 28); moment.relativeTimeThreshold('M', 12); - - // var bar = svg.insert("g", ".axis") - // .attr("class", "bar") - // .selectAll("g") - // .data(histogram) - // .enter().append("g") - // .attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; }); - - // bar.append("rect") - // .attr("class", "b") - // .attr("x", 1) - // .attr("y", function(d) { return y(d.b); }) - // .attr("width", x(histogram[0].dx) - 1) - // .attr("height", function(d) { return height - y(d.b); }); - - // bar.append("rect") - // .attr("class", "a") - // .attr("x", 1) - // .attr("y", function(d) { return y(d.y); }) - // .attr("width", x(histogram[0].dx) - 1) - // .attr("height", function(d) { return height - y(d.a); }); - - // bar.filter(function(d) { return d.y / n >= .0095; }).append("text") - // .attr("dy", ".015em") - // .attr("transform", function(d) { return "translate(" + x(histogram[0].dx) / 2 + "," + (y(1000) + 6) + ")rotate(-90)"; }) - // // .attr("transform", function(d) { return "translate(" + x(histogram[0].dx) / 2 + "," + (y(d.y) + 6) + ")rotate(-90)"; }) - // .text(function(d) { return formatPercent(d.y / n); }); - // }); - })(); \ No newline at end of file