想在 D3 中做类似 nytimes:Facebook 的事情

Question

我想做一些类似于NYTimes's facebook offering可视化的事情。

我有一个包含此 header 的 CSV 文件：Org,size,year

我想要做的就是显示一个二维图表 Org vs year 类似于上面的 NYtimes 可视化，节点半径和不透明度在我的 CSV 的 size 列中。

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");
}

想在 D3 中做类似 nytimes:Facebook 的事情

Want to do something similar nytimes:Facebook offering in D3

javascript

charts

data-visualization

d3.js