FirstScatterWithInteractions_ClassWork

Built with blockbuilder.org

forked from molliemarie's block: FirstScatterComplete

<!DOCTYPE html>
<meta charset="utf-8">

svg {
  border:1px solid #f0f;
}
  
.axis line {
  stroke-width:1px;
  stroke: #ccc;
  stroke-dasharray: 2px 2px;
}

.axis text {
  font-size: 12px;
  fill: #777;
}

.axis path {
  display: none;
}
  
.ufoGroup text {
  fill: #aaa; /*grey out text*/
  font-size: 11px;
}
  
.ufoCircle {
  fill: limegreen;
}

</style>

<body>
  <div id='titleDiv'>
    <text>UFO Sightings in 2018</text>
  </div>
  <div id='buttonsDiv'></div>
</body>

yScale
      .domain([0, d3.max(thisDataGroup, function(d) { return d.count; })]);

xAxis.scale(xScale);

yAxis.scale(yScale);
    
    xAxisGroup.call(xAxis);
    
    yAxisGroup
    	.transition()
    	.duration(transitionTime)
      .call(yAxis);
    
     svg.selectAll('.ufoGroup')
    	.data(thisDataGroup)
    	.transition()
     	.duration(transitionTime)
    	.attr('transform', function(d) { return 'translate(' + xScale(d.parsedDate) + ',' + yScale(d.count) + ')'
    })
  }
  
  d3.select('#buttonsDiv')
  	.selectAll('button')
  	.data(yearList)
  	.enter().append('button')
  	.text(function(d) { return d})
  	.on('click', function(d) {
    	dataSwap(+d)
//       console.log(d)
    })
  
  
  
  //***** filtering to get startData *****
  const startData = fullData.filter(function(d) { return d.year == 2018; })
  
  console.log(startData)
  
  //***** updating scales with data *****
  xScale.domain(d3.extent(startData, function(d) { return d.parsedDate; }))
  
  yScale.domain([0, d3.max(startData, function(d) { return d.count})])
  
  //***** Create axis groups *****
  const xAxisGroup = svg.append("g")
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + innerHeight + ")")
      .call(xAxis);
  
  const yAxisGroup = svg.append("g")
    .attr("class", "y axis") //gives group the classes 'y' and 'axis'
    .call(yAxis);

//***** defining ufoGroup *****
  const ufoGroup = svg.selectAll('.ufoGroup')
    .data(startData).enter().append('g') 
    .attr('class', 'ufoGroup')
    .attr('transform', function(d) { return 'translate(' + xScale(d.parsedDate) + ',' + yScale(d.count) + ')'})
  	.on('mouseenter', function(d) {
      d3.select(this)
      	.select('text')
      	.transition()
      	.duration(transitionTime)
      	.style('opacity', 1)
      
      d3.select(this)
        .select('circle')
        .transition()
      	.ease(d3.easeElastic)
      	.duration(transitionTime)
        .attr('r', radius*2)
      
      d3.selectAll('circle')
      	.style('opacity', 0.5)
      
      d3.select(this)
      	.select('circle')
      	.style('opacity', 1)
    })
  	.on('mouseleave', function(d) {
      d3.select(this)
      	.select('text')
        .transition()
      	.duration(transitionTime)
				.style('opacity', 0)
      
      d3.select(this)
      	.select('circle')
      	.transition()
        .ease(d3.easeElastic)
				.duration(transitionTime)
      	.attr('r', radius)
      
      d3.selectAll('circle')
      	.style('opacity', 1)
      
//       	d3.selectAll(.ufoText)
//         	.select('text')
//         	.transition()
//         	.style('opacity', 0)
      
    	})
  
  //***** appending circles *****
  ufoGroup.append('circle')
    .attr('class', 'ufoCircle')
    .attr('r', 10)

//***** appending text *****
  ufoGroup.append('text')
    .attr('class', 'ufoText')
    .attr('dx', 10)
    .attr('dy', -10)
    .text(function(d) { return d.count})
  	.attr('opacity', 0)
}

</script>

https://d3js.org/d3.v5.min.js