Kie Ichikawa

Intro to D3.js 🌖 SVG gradients

Intro to D3.js 🥣 Animation and Interactivity

Intro to D3.js 🦋 Data Joining

Intro to D3.js 🎨 SVG Composition Challenge

Intro to D3.js

.text( function(d){
if (d.month == "01"){
return d.year
}
else{
return ""
}
})

Zach Pino

We need to look for something different than '.butterflies' since we made those already, and give the text labels that different name. Here, I'm using '.butterflyLabels' to identify the labels

 svg.selectAll('.butterflyLabels')            
    //load data
    .data(countryDataset)
    .enter() //for loop replacement. each data point that is *not* matched in our SVG code is passed forward
    .append("text")
...
    .attr('class','butterflyLabels')

{  
  //svg variables
  let width = 800;
  let height = 400;
  let margin = 25;
  
  //create SVG artboard
  let svg = d3.create("svg")
    .attr("viewBox", [0, 0, width, height])
    .attr("width",width)
    .attr("height",height)
    .attr("fill","#fff")

  //create SVG background
  let bg = svg.append("rect")
    .attr('x',0)
    .attr('y',0)
    .attr("width",width)
    .attr("height",height)
  
  let key = svg.append("text")
    .attr('x',10)
    .attr('y',10)
    .attr('id','barKey')
    .text('Counts')
    .attr('fill','black')
  
  
  //accessor function to find min and max counts
  let monthMinMax = d3.extent(countryDataset, d => d.count);

  //scales for counts to pixels and parameters
  let monthSizeScale = d3.scaleLinear().domain(monthMinMax).range([margin,height-(margin*2)]);
  let monthParameterScale = d3.scaleLinear().domain(monthMinMax).range([0,1]);

  //how wide should each bar be?
  let barWidth = (width - (margin * 2)) / countryDataset.length;

  // find all the butterfly visualizations (which have not been drawn!)
  svg.selectAll('.butterflies')
    //load data
    .data(countryDataset)
    .enter() //for loop replacement. each data point that is *not* matched in our SVG code is passed forward
    .append("rect")
    .attr("x", (d,i) => (i*barWidth) + margin)
    .attr("y",  d => (height - monthSizeScale(parseFloat(d.count)) - margin))
    .attr('width', barWidth)
    .attr('height', d => monthSizeScale(parseFloat(d.count)))
    .attr('fill', d => d3.interpolateMagma( monthParameterScale(parseFloat(d.count)) ))
    .attr('class','butterflies')
    .on('mouseover',function(d){
      d3.select(this).attr('stroke','#ff0000')
      d3.select('#barKey').text(d.count)
    })
    .on('mouseout',function(d){
      d3.select(this).attr('stroke','none')
          d3.select('#barKey').text('')
     })
  
  
  //add a textlabel   
  svg.selectAll('.butterflyLabels')            
    //load data
    .data(countryDataset)
    .enter() //for loop replacement. each data point that is *not* matched in our SVG code is passed forward
    .append("text")
    .attr("x", (d,i) => (i*barWidth) + (margin*1.2))
    .attr("y", height - (margin*0.8))
    .text( d => d.name )
    .attr('fill','black')
    .attr('font-family','Alegreya Sans')
    .attr('font-size',9)
    .attr('writing-mode','tb')
    .attr('class','butterflyLabels')  
  
   //show visualization in Observable
   return svg.node();
}

{
  let bf = [
    { month: 1, butterfly: [3, 5, 2] },
    { month: 2, bf: [5, 2, 4] },
    { month: 3, bf: [1, 2, 2] }
  ];
  let b = [
    { month: 1, b: [5, 2] },
    { month: 2, b: [5, 7] },
    { month: 3, b: [1, 2] }
  ];

  for (let i = 0; i < bf.length; i++) {
    bf[i].b = b[i].b;
  }

  return bf;
}

{  
  let bfArray = [];
  
  for(let i = 0; i< 12; i++){    
    bfArray.push( 
      {
        month:i+1 , 
        monarchs : monthsMonarchs[i].monarch2019 , 
        swallowtails : monthsSwallowtails[i].swallowtail2019 
      } 
    )      
  }
  return bfArray
}

{
let butterflies = [
{ month: 1, monarch: [3, 5, 2] },
{ month: 2, monarch: [5, 2, 4] },
{ month: 3, monarch: [1, 2, 2] }
];
let swallowtails = [
{ month: 1, st: [5, 2] },
{ month: 2, st: [5, 7] },
{ month: 3, st: [1, 2] }
];

for (let i = 0; i < butterflies.length; i++) {
butterflies[i].swallowtail = swallowtails[i].st;
}
return butterflies
}