Хотите сделать что-то подобное nytimes: Facebook предлагает в D3

Question

Я хочу сделать что-то похожее на визуализацию NYTimes's facebook offering.

У меня есть CSV-файл с этим заголовком: Org,size,year

Все, что я хочу сделать это, чтобы отобразить 2D диаграмму Org vs year, аналогичную приведенной выше NYTimes визуализации, с радиусом узла и непрозрачности в зависимости от моего size колонки CSV в ,

Answer 1

here Другой пример

function InitChart() {  
    var height = $("#svgVisualize").height(); 
    var width = $("#svgVisualize").width(); 

    var vis = d3.select("#svgVisualize"); 
    var xRange = d3.scale.linear() 
     .range([100, width - 100]) 
     .domain([0, 11]); 

    var x = d3.scale.ordinal() 
     .domain(label) 
     .rangePoints([100, width - 100]); 

    var yRange = d3.scale.linear() 
     .range([400, 40]) 
     .domain([2006, 2015]); 

    var alphaRange = d3.scale.linear() 
     .range([0.2, 1]) 
     .domain(
    [d3.min(data, function (d) { 
     return (d.peso); 
    }), 
    d3.max(data, function (d) { 
     return d.peso; 
    })]); 

    var radioRange = d3.scale.linear() 
     .range([1, 20]) 
     .domain(
    [d3.min(data, function (d) { 
     return (d.peso); 
    }), 
    d3.max(data, function (d) { 
     return (d.peso);; 
    })]); 

    var xAxis = d3.svg.axis() 
     .scale(x); 

    var yAxis = d3.svg.axis() 
     .scale(yRange) 
     .tickFormat(d3.format("d")) 
     .orient("left"); 

    /* Y AXIS */ 

    vis.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .attr("transform", "translate(100,0)"); 

    /* X AXIS */ 

    vis.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + 400 + ")") 
     .call(xAxis) 
     .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", ".15em") 
     .attr("transform", "rotate(-75)"); 

    /* CIRCLES */ 

    var circles = vis.selectAll("circle").data(data); 

    circles.enter() 
     .insert("circle") 
     .attr("class", "circle") 
     .attr("cx", function (d) { 
     return xRange(d.x); 
    }) 
     .attr("cy", function (d) { 
     return yRange(d.anio); 
    }) 
     .attr("r", function (d) { 
     return radioRange(d.peso); 
    }) 
     .style("fill-opacity", function (d) { 
     return alphaRange(d.peso) 
    }) 
     .style("stroke", "#000") 
     .style("fill", "#013E7F"); 
}