gabrielflorit

svg {
  background: #222;
}

circle {
  fill: none;
  stroke-width: 1.5px;
}

gabrielflorit

svg {
  background: #012;
}

path {
  stroke: #fff;
  stroke-opacity: .5;
}

gabrielflorit

svg {
  border: solid 1px #666;
  overflow: hidden;
}

path {
  fill: yellow;
  stroke: #000;
  stroke-width: .5px;
}

gabrielflorit

var url = 'http://examples.oreilly.com/0636920025429/mikedewar-getting_started_with_d3-bdfc34e/visualisations/data/service_status.json';

// only retrieve above script once
$.ajaxSetup({
  cache: true
});

var postData = {
  'url': url
};

gabrielflorit

.chart rect {
	stroke: white;
	fill: steelblue;
}

gabrielflorit

var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');

svg
  .attr('width', width)
  .attr('height', height);

svg.selectAll('circle')
  .data([18, 57, 112, 323])

gabrielflorit

.chart rect {
	stroke: white;
	fill: steelblue;
}

gabrielflorit

$('svg').css('background', 'black');
 
var g = d3.select('svg')
    .append('g')
    .attr('transform', 'translate(' 
          + $('svg').width()/2 
          + ', ' 
          + 499 
          + ')');

gabrielflorit

{"libraries":["d3"]}

gabrielflorit

svg {
  background: #262626;
}

path {
  stroke: white;
  fill: red;
  stroke-width: 20;
}