Welcome my friend,
the data made by Pjotr from the CouchDB data base is put in a histogram. I have retrieved the data from the database with an R script which is put in a pipeline with the D3 script. This data is from the tumor values, try and hover over the bars to see some magic.
Cheers! Mehdi Nellen
Here you can find the R script: https://github.com/kroeliebuschie/troep/blob/master/assignment_3/parser.R
| letter | frequency | |
|---|---|---|
| <25 | 0.087701613 | |
| <50 | 0.22983871 | |
| <75 | 0.165322581 | |
| <100 | 0.133064516 | |
| <125 | 0.085685484 | |
| <150 | 0.056451613 | |
| <175 | 0.056451613 | |
| <200 | 0.038306452 | |
| <225 | 0.030241935 | |
| <250 | 0.026209677 | |
| <275 | 0.022177419 | |
| <300 | 0.013104839 | |
| <325 | 0.010080645 | |
| <350 | 0.012096774 | |
| <375 | 0.007056452 | |
| <400 | 0.006048387 | |
| <425 | 0.002016129 | |
| <450 | 0.002016129 | |
| <475 | 0.006048387 | |
| <500 | 0.001008065 | |
| <525 | 0.003024194 | |
| <550 | 0 | |
| <575 | 0.001008065 | |
| <600 | 0 | |
| <625 | 0.002016129 | |
| <650 | 0.003024194 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .bar { | |
| fill: orange; | |
| } | |
| .bar:hover { | |
| fill: orangered ; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| .d3-tip { | |
| line-height: 1; | |
| font-weight: bold; | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: #fff; | |
| border-radius: 2px; | |
| } | |
| // tooltip stuff | |
| .d3-tip:after { | |
| box-sizing: border-box; | |
| display: inline; | |
| font-size: 10px; | |
| width: 100%; | |
| line-height: 1; | |
| color: rgba(0, 0, 0, 0.8); | |
| content: "\25BC"; | |
| position: absolute; | |
| text-align: center; | |
| } | |
| //again tool stuff | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
| <script> | |
| var margin = {top: 40, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var formatPercent = d3.format(".0%"); | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width], .1); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .tickFormat(formatPercent); | |
| var tip = d3.tip() | |
| .attr('class', 'd3-tip') | |
| .offset([-10, 0]) | |
| .html(function(d) { | |
| return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>"; | |
| }) | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| svg.call(tip); | |
| d3.tsv("data.tsv", type, function(error, data) { | |
| x.domain(data.map(function(d) { return d.letter; })); | |
| y.domain([0, d3.max(data, function(d) { return d.frequency; })]); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Frequency"); | |
| svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return x(d.letter); }) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { return y(d.frequency); }) | |
| .attr("height", function(d) { return height - y(d.frequency); }) | |
| .on('mouseover', tip.show) | |
| .on('mouseout', tip.hide) | |
| }); | |
| function type(d) { | |
| d.frequency = +d.frequency; | |
| return d; | |
| } | |
| </script> |