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

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

{ 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 }