FirstScatterPlusInteractionsPlusLinePlusGeneralUpdatePattern

Built with blockbuilder.org

forked from molliemarie's block: FirstScatterComplete

forked from molliemarie's block: FirstScatterPlusInteractionsComplete

forked from molliemarie's block: FirstScatterPlusInteractionsPlusLineComplete

forked from molliemarie's block: FirstScatterPlusInteractionsPlusLine_NewData

<!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;
}
  
.ufoLine {
  fill: none;
}

.ufoLine {
  /*removes black fill*/
  fill: none;
  /*styles line */
  stroke: darkgray;
  stroke-width: 3   ;
}

</style>

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

const thisDataGroup = fullData.filter(function(d) { return d.year == datasetGroup});

console.log(thisDataGroup);

setScales(thisDataGroup);
 
  	setAxes();
    
    svg.selectAll('.ufoLine')
    .transition()
    .ease(d3.easeElastic) //if you use the same ease here as you do with the circles, the line and circles will move together.
    .duration(transitionTime)
    .attr('d', lineGenerator(thisDataGroup));
  
  drawCircles(thisDataGroup)

d3.select('#titleText')
      .text('UFO Sightings in ' + datasetGroup);
  };
  
function drawCircles(thisData) {
  const groups = svg.selectAll('.ufoGroup')
    .data(thisData, function(d) { return d.month })
  
//   groups
//     .enter().append('g')
  
   const enterGroups = groups
    .enter().append('g')
    // will need to assign class and location to incoming data groups
    .attr('class', 'ufoGroup')
    .attr('transform', function(d) { return 'translate(' + xScale(d.parsedDate) + ',' + yScale(d.count) + ')'})
   	.on('mouseenter', function(d) {
        // define hover events
        d3.select(this)
          .select('text')
          .transition()
          .duration(0)
          .style('opacity', 1)

d3.selectAll('circle')
          .style('opacity', 0.5)

d3.select(this)
          .select('circle')
          .transition()
          .ease(d3.easeElastic)
          .duration(transitionTime)
          .attr('r', radius*2)
          .style('opacity', 1)
      })
      .on('mouseleave', function(d) {
        // define mouseleave events
        d3.select(this)
          .select('text')
          .transition()
          .style('opacity', 0)

d3.select(this)
          .select('circle')
          .transition()
          .ease(d3.easeElastic)
          .duration(transitionTime)
          .attr('r', radius)

d3.selectAll('circle')
          .style('opacity', 1)
      })

// add new circles
  enterGroups.append('circle')
    .attr('class', 'ufoCircle')
    .style('fill', 'limegreen')
    .attr('r', radius)

// add new text
  enterGroups.append('text')
    .attr('class', 'ufoText')
    .attr('dx', radius)
    .attr('dy', -radius)
    .text(function(d) { return d.count})
    .style('opacity', 0)
  
  groups
  	.merge(groups)
    .transition()
    .ease(d3.easeElastic)
    .duration(transitionTime)
    .attr('transform', function(d) { return 'translate(' + xScale(d.parsedDate) + ',' + yScale(d.count) + ')'})
  
  groups.exit().remove()
}
  
function setScales(thisData) {
  xScale
    .domain(d3.extent(thisData, function(d) { return d.parsedDate; }));

yScale
    .domain([0, d3.max(thisData, function(d) { return d.count; })]);
};
  
function setAxes() {
  xAxis.scale(xScale);

yAxis.scale(yScale);

xAxisGroup
    .call(xAxis);

yAxisGroup
    .transition()
    .duration(transitionTime)
    .call(yAxis);
}

const parseTime = d3.timeParse("%m/%Y");
  const margin = {top: 20, right: 30, bottom: 20, left: 30};
  const outerWidth = 700;
  const outerHeight = 300;
  const innerWidth = outerWidth - margin.left - margin.right;
  const innerHeight = outerHeight - margin.top - margin.bottom;
  const transitionTime = 1000;
  const radius = 10;
  
  const SVG = d3.select("body").append("svg")
    .attr("width", outerWidth)
    .attr("height", outerHeight);  
  
  const svg = SVG.append('g')
  	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");  
  
  const xScale = d3.scaleTime()
    .range([0, innerWidth]);
  
  const xAxis = d3.axisBottom(xScale)
    .tickSize(-innerHeight);
  
  const yScale = d3.scaleLinear()
    .range([innerHeight, 0])
  
  const yAxis = d3.axisLeft(yScale)
  	.tickSize(-innerWidth);
  
  const lineGenerator = d3.line()
    .curve(d3.curveCardinal);
  
  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);

d3.csv("https://raw.githubusercontent.com/molliemarie/MSIA-D3Course-2019/master/Projects%26Exercises/generalUpdatePattern/data/ufo.csv", function(d) {
    return {
      date: d.date,
      count: +d.count,
      month: +d.date.split('/')[0],
      parsedDate: parseTime(d.date),
      year: parseTime(d.date).getYear() + 1900
    };
  }).then(ready);
  
function ready(fullData) {
  
  const yearList = d3.set(fullData.map(function(d) { return d.year })).values();
  
  
  const startData = fullData.filter(function(d) { return d.year == 2018; });
  
  console.log(startData);
  
  d3.select('#buttonsDiv') 
    .selectAll('button') 
    .data(yearList) 
    .enter().append('button') 
    .text(function(d) { return d; })
    .on('click', function(d) {
      dataSwap(d, fullData)
    });
  
    setScales(startData);
 
  	setAxes();
  
  lineGenerator
    .x(function(d) { return xScale(d.parsedDate)})
    .y(function(d) { return yScale(d.count)})

svg.append('path')
    .attr('class', 'ufoLine')
    .attr('d', lineGenerator(startData));
  
	drawCircles(startData)
}

</script>

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