Simple Responsive d3.js Graph

by rusci

HTML

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<div id="graph"></div>

JavaScript

var margin = {top: 10, right: 0, bottom: 0, left: 0}
      , width = 871 - margin.left - margin.right
      , height = 34 - margin.top - margin.bottom;

    var data = [[50,1], [242,1], [390,1], [738,1]];

    var x = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return 0; })])
      .range([ 0, width ]);

    var y = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return 1250; })])
      .range([ height, 0 ]);

    var chart = d3.select('#graph')
      .append('svg:svg')
      .attr('width', width + margin.right + margin.left)
      .attr('height', height + margin.top + margin.bottom)
      .attr('id', 'chart')
      .attr('class', 'chart')
      .attr('viewBox', '0 0 871 34')
      .attr('perserveAspectRatio', 'xMinYMid');

    var main = chart.append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
      .attr('width', width)
      .attr('height', height)
      .attr('class', 'main');

    // draw the x axis
    var xAxis = d3.svg.axis()
      .scale(x)
      .orient('bottom');

    main.append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .attr('class', 'main axis')
      .attr('style','display:none')
      .call(xAxis);

    // draw the y axis
    var yAxis = d3.svg.axis()
      .scale(y)
      .orient('left');

    main.append('g')
      .attr('transform', 'translate(0,0)')
      .attr('class', 'main axis')
      .attr('style','display:none')
      .call(yAxis);

    var g = main.append("svg:g");

    g.selectAll("scatter-dots")
      .data(data)
      .enter().append("rect")
      .attr("x", function (d) { return d[0]; } )
      .attr("y", function (d) { return d[1]; } )
      .attr("width", 6)
      .attr("height", 24)
      .attr('title', '190')
      .attr('rel', 'tooltip');

    var the_chart = $("#chart"),
        aspect = the_chart.width() / the_chart.height(),
        container = the_chart.parent();

    $(window).on("resize", function() {
      var targetWidth =...