JSFiddle - React, Tailwind, and code Playground

by hrabinowitz

HTML

<script src="http://d3js.org/d3.v2.min.js?2.9.6"></script>

<div 'container'>
  <svg id='sky' height='100' width='1100'>
    <style type="text/css">
          rect{fill:url(#MyGradient)}
    </style>
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
      </linearGradient>
    </defs>
    <rect width="100" height="50"/>
  </svg>
  </div>

CSS

div#container {
        height: 400px;
        width: 400px;
        border:2px solid #000;
        overflow: scroll;
      }
svg#sky {
  height: 100px;
  width: 1100px;
  border:1px dotted #ccc;
  background-color: #ccc;
}

JavaScript

// #d3js by [@s2t2](http://github.com/s2t2)

// div#container
var container = d3.select('body').append('div')
    .attr('id','container')
;

// svg#sky
var sky = container.append('svg')
    //.attr('height', 100)
    //.attr('width', 100)
    .attr('id', 'sky')
;