Outset of a d3 chart

index.html

<div id="box">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Outset of a d3 chart.markdown

Outset of a d3 chart

With rescaling and margins.

A Pen by Ray Lugo, Jr. on CodePen.

License.

script.coffeescript

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"
  .append "g"
  .attr "transform", "translate(" + m.left + "," + m.top + ")"

svg.append "circle"
  .attr
    "cx": w / 2
    "cy": h / 2
    "r": w / 2
  .style
    "fill": "limegreen"
  

style.css

#box {
  max-width: 600px;
}

svg {
  border: 1px solid black;
}