Typica is a free program for professional coffee roasters. https://typica.us
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. // Data access functions
  2. var label = function(d) {return d[0];};
  3. var greenValue = function(d) {return d[1];};
  4. var transactionCount = function(d) {return d[2];};
  5. var roastValue = function(d) {return d[3];};
  6. // Chart parameters
  7. var valueLabelWidth = 0; // Temporary, will be updated when labels are generated
  8. var barHeight = 30;
  9. var barHeight2 = barHeight / 2;
  10. var barLabelWidth = 0;
  11. var barLabelPadding = 5;
  12. var gridLabelHeight = 18;
  13. var gridChartOffset = 3;
  14. var maxBarWidth = 500;
  15. // Scales
  16. var x1s = d3.scale.linear().domain([0, d3.max(data, function(d) { return greenValue(d); })*1.15]).range([0, maxBarWidth]);
  17. var x2s = d3.scale.linear().domain([0, d3.max(data, function(d) { return transactionCount(d); })*1.15]).range([0, maxBarWidth]);
  18. var ys = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
  19. var ytext = function(d, i) {return ys(i) + ys.rangeBand() / 2;};
  20. var ybar = function(d, i) {return ys(i);};
  21. var ybar2 = function(d, i) {return ys(i) + (barHeight2 / 2)};
  22. var ybar3 = function(d, i) {return ys(i);};
  23. var ybar4 = function(d, i) {return ys(i) + barHeight;};
  24. // Chart
  25. var svg = d3.select("#chart").append("svg")
  26. .attr("width", 1000)
  27. .attr("height", gridLabelHeight + gridLabelHeight + gridChartOffset + data.length * barHeight);
  28. // Bar labels
  29. var yxe = svg.append("g")
  30. .attr("class", "y axis left");
  31. yxe.selectAll("text").data(data).enter().append("text")
  32. .attr("y", ytext)
  33. .attr("stroke", "none")
  34. .attr("fill", "black")
  35. .attr("dy", ".35em")
  36. .attr("text-anchor", "end")
  37. .text(label);
  38. // Determine maximum label width
  39. yxe.selectAll("text").each(function() {
  40. if(barLabelWidth < this.getComputedTextLength()) {
  41. barLabelWidth = this.getComputedTextLength();
  42. }
  43. });
  44. barLabelWidth += 10;
  45. yxe.attr("transform", "translate(" + (barLabelWidth - barLabelPadding) + "," + (gridLabelHeight + gridChartOffset) + ")");
  46. // Weight axis
  47. var x1xe = svg.append("g")
  48. .attr("class", "x axis top")
  49. .attr("transform", "translate(" + barLabelWidth + "," + gridLabelHeight + ")");
  50. x1xe.selectAll("text").data(x1s.ticks(10)).enter().append("text")
  51. .attr("x", x1s)
  52. .attr("dy", -3)
  53. .attr("text-anchor", "middle")
  54. .text(String);
  55. // Top ticks extend approximately half way down the chart
  56. x1xe.selectAll("line").data(x1s.ticks(10)).enter().append("line")
  57. .attr("x1", x1s)
  58. .attr("x2", x1s)
  59. .attr("y1", 0)
  60. .attr("y2", ys.rangeExtent()[1] /2)
  61. .style("stroke", "#ccc");
  62. // Transaction count axis
  63. var x2xe = svg.append("g")
  64. .attr("class", "x axis bottom")
  65. .attr("transform", "translate(" + barLabelWidth + "," + (ys.rangeExtent()[1] + gridChartOffset + gridLabelHeight + gridLabelHeight) + ")");
  66. x2xe.selectAll("text").data(x2s.ticks(10)).enter().append("text")
  67. .attr("x", x2s)
  68. .attr("dy", -3)
  69. .attr("text-anchor", "middle")
  70. .text(String);
  71. // Bottom ticks extend approximately half way up the chart
  72. x2xe.selectAll("line").data(x2s.ticks(10)).enter().append("line")
  73. .attr("x1", x2s)
  74. .attr("x2", x2s)
  75. .attr("y1", -gridLabelHeight - (ys.rangeExtent()[1] /2))
  76. .attr("y2", -gridLabelHeight)
  77. .style("stroke", "#ccc");
  78. // Green coffee bars
  79. var gbars = svg.append("g")
  80. .attr("transform", "translate(" + barLabelWidth + "," + (gridLabelHeight + gridChartOffset) + ")");
  81. gbars.selectAll("rect").data(data).enter().append("rect")
  82. .attr("y", ybar)
  83. .attr("height", barHeight)
  84. .attr("width", function(d) {return x1s(greenValue(d));})
  85. .attr("stroke", "white")
  86. .attr("fill", "royalblue");
  87. // Roasted coffee bars
  88. var rbars = svg.append("g")
  89. .attr("transform", "translate(" + barLabelWidth + "," + (gridLabelHeight + gridChartOffset) + ")");
  90. rbars.selectAll("rect").data(data).enter().append("rect")
  91. .attr("y", ybar2)
  92. .attr("height", barHeight2)
  93. .attr("width", function(d) {return x1s(roastValue(d));})
  94. .attr("stroke", "white")
  95. .attr("fill", "orangered");
  96. // Transaction ticks
  97. var tticks = svg.append("g")
  98. .attr("transform", "translate(" + barLabelWidth + "," + (gridLabelHeight + gridChartOffset) + ")");
  99. tticks.selectAll("line").data(data).enter().append("line")
  100. .attr("x1", function(d) {return x2s(transactionCount(d));})
  101. .attr("x2", function(d) {return x2s(transactionCount(d));})
  102. .attr("y1", ybar3)
  103. .attr("y2", ybar4)
  104. .attr("stroke-width", "3")
  105. .style("stroke", "black");