d3_meeks

Learning w/ Elijah Meeks

test Elijah's example code d3.append(svg) .append('circle') .attr('r',20) .attr('cx', 50) .attr('cy',50) .style('fill','red')

var smallArray = d3.range(10);

d3.select('svg') .selectAll('circle') .data(smallArray) .enter()

d3.select('svg').selectAll('circle') .on('mousover',function() {

})

• .enter() - if we have more elements in our data array than our selection, .enter() defines what to do. The enter applies to elemetns in our selection that receive data in our binding.

• .exit() - if we have fewer elements in our data array than our selection, .enter() defines what to do. The exit() only applies to elements in our selection that do not get data from our new binding.

• .transition('woot') - we can name transitions to keep them from over righting on each other.

• selection.filter(function(d) {if (d=='bob'){}}) - this

The queue is nice to run the functions only after the data has arrived.

• queue()
  .defer(d3.csv, "data1.csv")
  .defer(d3.csv, "data2.csv")
  .await(function(error, file1, file2) { createChart(file1, file2)});

function packStudents(data) {

// notice how the nesting order is 1st grade, 2nd ethnicity, 3rd gender
    nestedData = d3.nest()
    .key(function (d) {
      return d.grade;
    })
    .key(function (d) {
      return d.ethnicity;
    })
    .key(function (d) {
      return d.gender
    })
    .entries(data);

    nestedData.forEach(function (d) {
      d.leafColor = gradeColor(d.key);
      d.values.forEach(function (d) {
        d.leafColor = ethnicityColor(d.key);
          d.values.forEach(function (d) {
            d.leafColor = genderColor(d.key);
        })

      })
    })

  return packableData = {id: "root", key: "root", values: nestedData}
}

We can use requestAnimationFrame() to continually call a function b/c it leverages the browswers continual refresh rate. Use setTimeout(functionName,delay) to slow the jitter in the following function: jitter