Точки прозрачные

by Kate Mokhova

JavaScript

data=[
    {'a': 1, b: 2},
    {'a': 42, b: 3},
    {'a': 15, b: 4},
    {'a': 32, b: 8},
    {'a': 26, b: 8},
    {'a': 18, b: 5} 
]



 var margin = {top: 20, right: 10, bottom: 20, left: 10};
 var fullWidth=700, fullHeight=700; 
 var width = fullWidth - margin.left - margin.right,
     height = fullHeight - margin.top - margin.bottom;


 var x=d3.scale.linear()   
    .domain([0,5])
    .range([0,100]);

 var y=d3.scale.linear()   
    .domain([0, 5])
    .range([0, 50]);

 var color=d3.scale.linear()   
    .domain([0, 10])
    .range(['#500', '#f00'])


d3.select('body')
    .append('svg')
    .attr('width', fullWidth)
    .attr('height', fullHeight)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    .selectAll('circle')
    .data(data).enter()
    .append('circle')
    .attr('r', 8)
    .attr('cx', function (d, i) {return x(i)          })
    .attr('cy', function (d, i) {return y(d.a)        })
    .attr('fill', function (d, i) { return color(d.b) })
    .attr('opacity', 1)
    .on('mouseover', function (d, i) {
        d3.select(this)
       .transition()
       .duration(500)
       .attr('opacity', 0.3)
    } )
    
    .on('mouseout', function (d, i) {
        d3.select(this)
       .transition()
       .attr('opacity', 1)
    })