d3 - scatter plot

by ordette

CSS

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override this later */
    background-color: teal;
    margin-right: 2px;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

JavaScript

//var dataset = [5,10,15,20,25];
//d3.selectAll("div").data(dataset).enter().append("div").attr("class","bar").style("height", function(d) {var barHeight = d*5; return barHeight+"px"});
var w = 500;
var h = 300;
var barPadding = 1;
var radius = 3;
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
/*
svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d,i) { return i*w/dataset.length;})
.attr("y", function(d) {return h-d*5})
.attr("width", function(d){ return w/dataset.length-1;})
.attr("height", function(d){ return d*5+"px";})
.attr("fill", "teal");

var scale = d3.scale.linear()
                    .domain([100, 500])
                    .range([10, 350]);
                    */
var padding = 30;
/* var dataset = [
                [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
              ]; */
var dataset = [
	{
  	"title": "A Walk to Remember",
    "length": 455,
    "rating": 4.2,
  },
  	{
  	"title": "Anatasia",
    "length": 200,
    "rating": 2.2,
  },
  	{
  	"title": "Where the Wildfern Grows",
    "length": 932,
    "rating": 2.2,
  },
  	{
  	"title": "Call Me Anne of Green Cables",
    "length": 270,
    "rating": 5,
  }
];
var scaleX = d3.scale.linear().domain([0, d3.max(dataset, function (d) { return d.length;} )]).range([padding, w - padding * 2]);
var scaleY = d3.scale.linear().domain([0, d3.max(dataset, function (d) { return d.rating;} )]).range([h - padding, padding]);

/* svg.selectAll("svg:image")
  .data(dataset)
  .attr('x', function (d) { return scaleX(d.length) + radius; })
  .attr('y', function (d) { return scaleY(d.rating); })
  .attr('width', 20)
  .attr('height', 24)
   .append("svg:image")
  .attr("xlink:href", "rhttps://image.shutterstock.com/image-photo/men-shorts-swimming-260nw-490638430.jpg") */

 svg.selectAll("circle")
    .data(dataset)
   ...