power distribution

index.html

<div id="box">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://raw.githubusercontent.com/riccardoscalco/textures/master/textures.min.js"></script>

power distribution .markdown

power distribution

A Pen by Riccardo Scalco on CodePen.

License.

script.js

coords_tr = (r, a) ->
  [
    r * Math.sin(a),
    r * Math.cos(a)
  ]

width = 100
height = 100
m =
  top: 10
  bottom: 10
  right: 10
  left: 10
w = width - m.left - m.right
h = height - m.top - m.bottom

# https://css-tricks.com/scale-svg/
# padding-bottom Hack on an Inline <svg> Element
svg = d3.select "#box"
  .append "svg"
  .attr
    "viewBox": "0 0 " + width + " " + height
    "preserveAspectRatio": "xMidYMin slice"
    "width": "100%"
  .style
    "padding-bottom": (100 * height / width) + "%"
    "height": "1px"
    "overflow": "visible"
 
t = textures.circles()
  .complement()
  .size 3
  .radius 0.3
  .fill "black"
svg.call t
    
g = svg.append "g"
  .attr "transform", "translate(" + m.left + "," + m.top + ")"

g.append "circle"
  .attr
    "cx": w / 2
    "cy": h / 2
    "r": w / 2
  .style
    "fill": "black"
    #"stroke": t.url()
    "stroke-width": 0

helper = (r) ->
  if r > 0 then r else 0

# http://www.reddit.com/r/javascript/comments/170hm0/fun_with_mathrandom_and_probability_distributions    
for i in [1..2000]
  a = Math.random() * 2 * Math.PI
  r = w / 2 + 5 * Math.pow(Math.random(),2)
  [x,y] = coords_tr r, a
  g.append "circle"
    .attr
      "cx": x + w / 2
      "cy": y + w / 2
      "r": helper( -0.2 * (r - w / 2) + 1.1)
    .style 
      "fill": "black"
      #"stroke": t.url()
      "stroke-width": 0
  
  

style.css

#box {
  max-width: 300px;
}

svg {
  border: 1px solid black;
}