Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Sep 18th, 2012  |  syntax: None  |  size: 1.81 KB  |  hits: 13  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. var margin = 58;
  2. var width = $('svg').width();
  3. var height = $('svg').height();
  4. var svg = d3.select('svg');
  5.  
  6.  
  7. svg
  8.   .attr('width', width)
  9.   .attr('height', height)
  10.   .selectAll("circle")
  11.     .data(livecoding.json.data)
  12.     .enter()
  13.     .append('circle');
  14.  
  15. var x_extent = d3.extent(livecoding.json.data, function(d){return d.collision_with_injury});
  16. var x_scale = d3.scale.linear()
  17.     .range([margin, width-margin])
  18.             .domain(x_extent);
  19.    
  20. var y_extent = d3.extent(livecoding.json.data, function(d){return d.dist_between_fail});
  21. var y_scale = d3.scale.linear()
  22.             .range([height-margin, margin])
  23.             .domain(y_extent);
  24.  
  25. d3.selectAll("circle")
  26.   .attr("cx", function(d){return x_scale(d.collision_with_injury)})
  27.   .attr("cy", function(d){return y_scale(d.dist_between_fail)});
  28.  
  29. d3.selectAll("circle")
  30.   .attr("r", 5);
  31.  
  32. var x_axis = d3.svg.axis().scale(x_scale);
  33. d3.select("svg")
  34.   .append("g")
  35.         .attr("class", "x axis")
  36.         .attr("transform", "translate(0," + (height-margin) +")")
  37.   .call(x_axis);
  38.  
  39. var y_axis = d3.svg.axis().scale(y_scale).orient('left');
  40. d3.select("svg")
  41.   .append("g")
  42.         .attr("class", "y axis")
  43.         .attr("transform", "translate(" + margin + ",0)")
  44.   .call(y_axis);
  45.  
  46. d3.selectAll('.axis path')
  47.   .attr('fill','none')
  48.   .attr('stroke','black');
  49.  
  50. d3.selectAll('.axis')
  51.   .attr('font-size','8pt')
  52.   .attr('font-family','sans-serif');
  53.  
  54. d3.selectAll('.tick')
  55.   .attr('fill','none')
  56.   .attr('stroke','black');
  57.  
  58. d3.selectAll('circle')
  59.   .attr('fill','RoyalBlue')
  60.   .attr('stroke','black')
  61.   .attr('stroke-width', 2.33)
  62.   .attr('opacity', 0.54);
  63.  
  64. d3.select('.x.axis')
  65.   .append('text')
  66.   .text("collisions with injury")
  67.   .attr('x', (width/2)-margin)
  68.   .attr('y', margin/1.9);
  69.  
  70.   d3.select('.y.axis')
  71.   .append('text')
  72.   .text("mean distances")
  73.     .attr('transform', 'rotate (-90,-43,0)translate(-280)');