CODEWITHSUNDEEP
javascriptd3.jstransformtransition
Colin
Colin

Reputation: 940

D3.js data groups and transitions

Inspired by Mike Bostock's Wealth of Nations, I'm trying to illustrate infection rates over time. I'm trying to group by Month and transition() a bubble along the x-axis (Month).

I'm stuck on grouping by Month...

I've edited this post significantly following helpful feedback from Lars and Christopher below.

A jsFiddle example here - hhttp://jsfiddle.net/Nyquist212/JSsHL/1/

    <div id="chart"></div>

    <script type="text/javascript">
    var json = 
    [
      {
        "Month":1,
        "VisitCount":894,
        "DiagnosisName":"ACUTE PHARYNGITIS"
      },
      {
        "Month":1,
        "VisitCount":807,
        "DiagnosisName":"PNEUMONIA ORGANISM NOS"
      },
      {
        "Month":2,
        "VisitCount":566,
        "DiagnosisName":"ACUTE PHARYNGITIS"
      },
      {
        "Month":2,
        "VisitCount":456,
        "DiagnosisName":"PNEUMONIA ORGANISM NOS"
      },
      {
        "Month":3,
        "VisitCount":273,
        "DiagnosisName":"ACUTE PHARYNGITIS"
      },
      {
        "Month":3,
        "VisitCount":189,
        "DiagnosisName":"PNEUMONIA ORGANISM NOS"
      }
    ]

   var svgContainer = d3.select("#chart")
            .append("svg")
            .attr("height", 250)
            .attr("width",750);

    var bubbleGroup = svgContainer.append("g");

    var bubble =  bubbleGroup.selectAll("circle")
            .data(json)
            .enter()
            .append("circle");

    var bubbleAttributes = bubble
            .style("stroke", "blue")
            .style("fill", "white")
            .attr("r", function(d){return (d.VisitCount/10);})
            .attr("cy", 150)
            .attr("cx", function(d){return (d.Month * 100);});

    d3.select("Body").selectAll("p")
            .data(json)
            .enter()
            .append("p")
            .text(function(d){return d.Month + " " + d.DiagnosisName + " " + d.VisitCount;})

    </script>

EDIT: Updated with corrections from Christopher Chiche

EDIT: Updated with partially working example as suggested by Lars Kotthoff

Upvotes: 1

Views: 1055

Answers (2)

Lars Kotthoff
Lars Kotthoff

Reputation: 109262

I would use a combination of d3.nest and a transition loop for this. Best illustrated by an example:

svg.selectAll("circle")
    .data(d3.nest()
            .key(function(d) { return d.DiagnosisName; })
            .entries(json))
    .enter().append("circle")
    .style("stroke", "blue")
    .style("fill", "white")
    .attr("cy", 150)
    .attr("cx", 0)
    .attr("r", 0)
    .each(function(d) {
        for(var i = 0; i < d.values.length; i++) {
            d3.select(this).transition().delay(1000 * i).duration(1000)
              .attr("r", function(d){return (d.values[i].VisitCount/10);})
              .attr("cx", function(d){return (d.values[i].Month * 100);});
        }
    });

Complete jsfiddle here.

Upvotes: 1

Christopher Chiche
Christopher Chiche

Reputation: 15345

your problem is that dataset does not contain any data. It is a call to a d3 function that does not return anything. However, you have this csv variable that you pass as an argument to the drawChart function.

You should thus write: 

var circleGroup = svgContainer.append("g")
    .selectAll("circles")
    .data(csv)

Same for every time you use 'dataset' in a data() call.

If you have no data, then d3 does not plot anything. So looking at the data you attach when you have this kind of problem helps most of the times.

Also, interpolateData won't work for the same reason, you should probably pass data as an argument.

Upvotes: 1

Related Questions