//Import the data

var data = d3.select('#cars').html().trim();

data = d3.csv.parse(data, function(d) {

  return {

    model: d.Model,

    origin: d.Origin,

    year: +d.Year,

    cylinders: +d.Cylinders,

    horsepower: +d.Horsepower,

    mpg: +d.MPG,

    weight: +d.Weight

  };

});

​

var range = {};

​

//Get the min and max of all of the quantitative variables

range.year = d3.extent(data, function(d) { return d.year; });

range.cylinders = d3.extent(data, function(d) { return d.cylinders; });

range.horsepower = d3.extent(data, function(d) { return d.horsepower; });

range.mpg = d3.extent(data, function(d) { return d.mpg; });

range.weight = d3.extent(data, function(d) { return d.weight; });

​

//Get the model names

range.model = d3.set(data.map(function(d){

  return d.model;

})).values();

​

//Get the origin names

range.origin = d3.set(data.map(function(d){

  return d.origin;

})).values();

​

​

​

​

//Create the SVG element

var width = 500;

var height = 400;

var svg = d3.select('body')

  .append('svg')

  .attr('width', width)

  .attr('height', height);

​

//Add insets for the axes

var margins = {

  top: 20,

  right: 20,

  bottom: 50,

  left: 30

};

var graphWidth = width - margins.right - margins.left;

var graphHeight = height - margins.top - margins.bottom;

​

var chart = svg.append('g')

  .attr('transform', 

        'translate(' + margins.left + ',' + margins.top + ')');

​

​

​

//A helper function to extend the axes by a percentage

var autoextend = function(minmax) {

  var r = minmax[1] - minmax[0];

  var buffer = r * 0.08;

  return [minmax[0] - buffer, minmax[1] + buffer];

};

​

​

​

//Create the axis scales

var y = d3.scale.linear()

  .range([graphHeight, 0])

  .domain(autoextend(range.mpg));

​

var x = d3.scale.linear()

  .range([0, graphWidth])

  .domain(autoextend(range.horsepower));

​

var radius = d3.scale.log()

  .range([5, 10])

  .domain(range.weight);

​

var color = d3.scale.category10();

​

//Create the axis renderers

var yAxis = d3.svg.axis()

    .scale(y)

    .orient("left");

​

var xAxis = d3.svg.axis()

    .scale(x)

    .orient("bottom");

​

//Draw the axes

var yAxisG = chart.append("g")

    .classed("y axis", true)

    .call(yAxis);

​

var xAxisG = chart.append("g")

     .attr("transform", "translate(0, " + graphHeight + ")")

     .classed("x axis", true)

     .call(xAxis);

​

//Add axis labels

xAxisG.append("text")

      .attr("class", "label")

      .attr("x", graphWidth)

      .attr("y", -5)

      .style("text-anchor", "end")

      .text("Horsepower");

​

yAxisG.append("text")

      .attr("class", "label")

      .attr("y", 6)

      .attr("x", 6)

      .attr("dy", ".5em")

      .text("MPG");

​