javascript - 想要做类似的事情 nytimes :Facebook offering in D3

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

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

我有一个带有此 header 的 CSV 文件:Org,size,year

我想做的就是显示 2D 图表 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");
}