Lottokone1

Lottokone

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .lottoteksti:hover {
    display: none;
  }

</style>
</head>

<body>
  <script>
//tausta-asetukset
var margin = {top: 30, right: 20, bottom: 30, left: 30},
  w = 900 - margin.left - margin.right
  h = 500 - margin.top - margin.bottom;

var padding = 40;

//DATA
var dataset = [ { key: 0, value: 50 },
               { key: 1, value: 22 },
               { key: 2, value: 23 },
               { key: 3, value: 80 },
               { key: 4, value: 33 },
               { key: 5, value: 85 },
               { key: 6, value: 32 },
               { key: 7, value: 18 },
               { key: 8, value: 25 },
               { key: 9, value: 33 },
               { key: 10, value: 91 },
               { key: 11, value: 42 },
               { key: 12, value: 15 },
               { key: 13, value: 40 },
               { key: 14, value: 58 },
               { key: 15, value: 67 },
               { key: 16, value: 76 },
               { key: 17, value: 88 },
               { key: 18, value: 93 },
               { key: 19, value: 8 },
               { key: 20, value: 10 },
               { key: 21, value: 22 },
               { key: 22, value: 48 },
               { key: 23, value: 21 },
               { key: 24, value: 63 },
               { key: 25, value: 29 },
               { key: 26, value: 10 },
               { key: 27, value: 28 },
               { key: 28, value: 39 },
               { key: 29, value: 44 },
               { key: 30, value: 29 },
               { key: 31, value: 10 },
               { key: 32, value: 43 },
               { key: 33, value: 12 },
               { key: 34, value: 32 },
               { key: 35, value: 20 },
               { key: 36, value: 12 },
               { key: 37, value: 29 },
               { key: 38, value: 30 } ];

dataset = [{"value": 3, "key": 0}, {"value": 4, "key": 1}, {"value": 9, "key": 2}, {"value": 9, "key": 3}, {"value": 10, "key": 4}, {"value": 7, "key": 5}, {"value": 7, "key": 6}, {"value": 7, "key": 7}, {"value": 13, "key": 8}, {"value": 17, "key": 9}, {"value": 9, "key": 10}, {"value": 9, "key": 11}, {"value": 12, "key": 12}, {"value": 16, "key": 13}, {"value": 9, "key": 14}, {"value": 8, "key": 15}, {"value": 11, "key": 16}, {"value": 8, "key": 17}, {"value": 11, "key": 18}, {"value": 9, "key": 19}, {"value": 9, "key": 20}, {"value": 6, "key": 21}, {"value": 10, "key": 22}, {"value": 6, "key": 23}, {"value": 9, "key": 24}, {"value": 8, "key": 25}, {"value": 10, "key": 26}, {"value": 12, "key": 27}, {"value": 13, "key": 28}, {"value": 6, "key": 29}, {"value": 10, "key": 30}, {"value": 11, "key": 31}, {"value": 9, "key": 32}, {"value": 8, "key": 33}, {"value": 8, "key": 34}, {"value": 9, "key": 35}, {"value": 9, "key": 36}, {"value": 6, "key": 37}, {"value": 8, "key": 38}]

//luo svg & ruudukko

var svg = d3.select("body")
  .append("svg")
  .attr("width", w + margin.left + margin.right)
  .attr("height", h + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scale.ordinal()
  .domain(d3.range(dataset.length))
  .rangeRoundBands([0, w-250], 0.05);
var yScale = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) { return d.value; })])
  .range([0, h]);

//luo lottoruudukko

svg.selectAll("#lottoruudukko")
  .data(dataset, key)
  .enter()
  .append("rect")
  .attr("x", function (d, i) {
    if (d.key < 6) {
        return d.key * padding;
    } else if (d.key >= (6*1) && d.key < (6*2)) {
        return (d.key - (6*1)) * padding;
    } else if (d.key >= (6*2) && d.key < (6*3)) {
        return (d.key - (6*2)) * padding;
    } else if (d.key >= (6*3) && d.key < (6*4)) {
        return (d.key - (6*3)) * padding;
    } else if (d.key >= (6*4) && d.key < (6*5)) {
        return (d.key - (6*4)) * padding;
    } else if (d.key >= (6*5) && d.key < (6*6)) {
        return (d.key - (6*5)) * padding;
    }
      else {
        return (d.key - (6*6)) * padding;
    }
  })
  .attr("y", function (d) {
    if (d.key > 5 && d.key < 12) {
      return 50;
    } else if (d.key >= (6*2) && d.key < (6*3)) {
      return 100;
    } else if (d.key >= (6*3) && d.key < (6*4)) {
      return 150;
    } else if (d.key >= (6*4) && d.key < (6*5)) {
      return 200;
    } else if (d.key >= (6*5) && d.key < (6*6)) {
      return 250;
    } else if (d.key >= (6*6) && d.key < (6*7)) {
      return 300;
    }
    } )
  .attr("height", 30)
  .attr("width", 30)
  .attr("stroke", "red")
  .attr("stroke-width", "2")
  .attr("fill", function (d) {
    return "rgb(" + scaleRed(d.value) + ", 0, 0)" })
  .attr("id", function(d) { return "numero" + d.key })
  .on("mouseover", function(d) { return d3.selectAll("#numero" + d.key).style("fill", "pink");})
  .on("mouseout", function(d) { return d3.selectAll("#numero" + d.key).style("fill", function (d) {
    return "rgb(" + scaleRed(d.value) + ", 0, 0)" });});

//tekstiosuus ruudukko

svg.selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
  .text (function (d) {
    return d.key+1; })
  .attr("class", "lottoteksti")
  .attr("x", function (d, i) {
    if (d.key < 6) {
        return (d.key * padding) + 14;
    } else if (d.key >= (6*1) && d.key < (6*2)) {
        return (d.key - (6*1)) * padding + 14;
    } else if (d.key >= (6*2) && d.key < (6*3)) {
        return (d.key - (6*2)) * padding + 14;
    } else if (d.key >= (6*3) && d.key < (6*4)) {
        return (d.key - (6*3)) * padding + 14;
    } else if (d.key >= (6*4) && d.key < (6*5)) {
        return (d.key - (6*4)) * padding + 14;
    } else if (d.key >= (6*5) && d.key < (6*6)) {
        return (d.key - (6*5)) * padding + 14;
    }
      else {
        return (d.key - (6*6)) * padding + 14;
    }
  })
  .attr("y", function (d) {
    if (d.key < 6) {
      return 20;
    }  else if (d.key > 5 && d.key < 12) {
      return 50 + 20;
    } else if (d.key >= (6*2) && d.key < (6*3)) {
      return 100 + 20;
    } else if (d.key >= (6*3) && d.key < (6*4)) {
      return 150 + 20;
    } else if (d.key >= (6*4) && d.key < (6*5)) {
      return 200 + 20;
    } else if (d.key >= (6*5) && d.key < (6*6)) {
      return 250 + 20;
    } else if (d.key >= (6*6) && d.key < (6*7)) {
      return 300 + 20;
    }
    } )
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("fill", "white")
  .attr("text-anchor", "middle");

//Create bars
svg.selectAll("#lottopalkit")
  .data(dataset, key)   //Bind data with custom key function
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
      return xScale(i) + 250;
   })
  .attr("y", function(d) {
      return h - yScale(d.value);
   })
  .attr("width", xScale.rangeBand())
  .attr("height", function(d) {
      return yScale(d.value);
   })
   .attr("fill", function(d) {
   return "rgb(" + scaleRed(d.value) + ", 0, 0)"
})
  .attr("id", function(d) { return "numero" + d.key})
  .on("mouseover", function(d) { return d3.selectAll("#numero" + d.key).style("fill", "pink");})
  .on("mouseout", function(d) { return d3.selectAll("#numero" + d.key).style("fill", function (d) {
    return "rgb(" + scaleRed(d.value) + ", 0, 0)" });})
;

//Create value labels for bars
svg.selectAll("#rect2text")
  .data(dataset, key)
  .enter()
  .append("text")
  .text(function(d) { return d.value  })
  .attr("x", function(d, i) {
      return xScale(i) + 256;
   })
  .attr("y", function(d) {
      return h - yScale(d.value) - 5; })
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("text-anchor", "middle");

//Create key labels for bars
svg.selectAll("#rect2text")
  .data(dataset, key)
  .enter()
  .append("text")
  .text(function(d) { return d.key  + 1 })
  .attr("x", function(d, i) {
      return xScale(i) + 250;
   })
  .attr("y", function(d) {
      return h + 10; })
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("font-weight", "bold");

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js