lauriemerrell/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from molliemarie's block: FirstScatterPlot_UFOSightings_Starter

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

<script src="https://d3js.org/d3.v5.min.js"></script>

<style type="text/css">

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

/*NEW CSS GOES HERE*/

</style>

<!-- HTML -->
<body>
  <div id='titleDiv'>
  </div>
</body>


<!-- Javascript section -->
<script>

// const data = [
// 	{"date": "12/2018", "count": 233},
// 	{"date": "11/2018", "count": 228},
// 	{"date": "10/2018", "count": 262},
// 	{"date": "09/2018", "count": 293},
// 	{"date": "08/2018", "count": 350},
// 	{"date": "07/2018", "count": 400},
// 	{"date": "06/2018", "count": 225},
// 	{"date": "05/2018", "count": 243},
// 	{"date": "04/2018", "count": 221},
// 	{"date": "03/2018", "count": 235},
// 	{"date": "02/2018", "count": 235},
// 	{"date": "01/2018", "count": 311}
// ];


  const outerWidth = 700;
  const outerHeight = 300;
  const radius = 10;
  const margin = {top: 20, right: 30, bottom: 20, left: 30};
  const innerWidth = outerWidth - margin.left - margin.right;
  const innerHeight = outerHeight - margin.top - margin.bottom;

  const parseTime = d3.timeParse("%m/%Y");


  d3.select('#titleDiv')
  .append('h1')
  .attr('id', 'titleText')
  .text('UFO Sightings in 2018')

  d3.csv("https://raw.githubusercontent.com/molliemarie/MSIA-D3Course-2019/master/Projects%26Exercises/FirstCompleteScatter/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 startData = fullData.filter(function(d) { return d.year == 2018; })

  const SVG = d3.select("body").append("svg") //grabs body and appends an svg
        .attr('width', outerWidth)
        .attr('height', outerHeight);

  const svg = SVG.append('g')
  			.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

  const xScale = d3.scaleTime()
  	.domain(d3.extent(startData, function(d) { return d.parsedDate; }))
  	.range([0,innerWidth]);

  const yScale = d3.scaleLinear()
  	.domain([0,500])
  	.range([innerHeight,0]);

  const xAxis = d3.axisBottom(xScale)
  	.tickSize(-innerHeight);
  const yAxis = d3.axisLeft(yScale)
  	.tickSize(-innerWidth);

  const xAxisGroup =
        svg.append('g')
  			.attr('class', 'x axis')
  			.call(xAxis)
  			.attr("transform", "translate(0," + innerHeight +")");

  const yAxisGroup =
        svg.append('g')
  			.attr('class', 'y axis')
  			.call(yAxis);

  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) + ')'});

  ufoGroup.append('circle')
  	.attr('class', 'ufoCircle')
  	.attr('r', radius)

  ufoGroup.append('text')
  	.text( function (d) { return d.count; })
		.attr('dx', radius) //moves text 10px (right) on the x axis
    .attr('dy', -radius);
  };


//   const circle = svg.selectAll('.ufoCircle')
//   	.data(data)
//   	.enter().append('circle')
//   	.attr('class', 'ufoCircle')
//   	.attr('r', radius)
//   	.attr('cx', function(d) {return xScale(d.month);})
//   	.attr('cy', function(d) {return yScale(d.count);})

// const text = svg.selectAll("text")
//   .data(data)
//   .enter().append("text")
//   .attr("x", function(d) { return xScale(d.month); })
//   .attr("y", function(d) { return yScale(d.count); })
//   .text( function (d) { return d.count; })
//   .attr('dx', 10) //moves text 10px (right) on the x axis
//   .attr('dy', -10);


//    fullData.forEach(function(d) {
//        d.count = +d.count;
//        d.month = +d.date.split('/')[0];
//      })

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

	<script src="https://d3js.org/d3.v5.min.js"></script>

	<style type="text/css">

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

	/NEW CSS GOES HERE/

	</style>

	<!-- HTML -->
	<body>
	<div id='titleDiv'>
	</div>
	</body>


	<!-- Javascript section -->
	<script>

	// const data = [
	// {"date": "12/2018", "count": 233},
	// {"date": "11/2018", "count": 228},
	// {"date": "10/2018", "count": 262},
	// {"date": "09/2018", "count": 293},
	// {"date": "08/2018", "count": 350},
	// {"date": "07/2018", "count": 400},
	// {"date": "06/2018", "count": 225},
	// {"date": "05/2018", "count": 243},
	// {"date": "04/2018", "count": 221},
	// {"date": "03/2018", "count": 235},
	// {"date": "02/2018", "count": 235},
	// {"date": "01/2018", "count": 311}
	// ];




	const outerWidth = 700;
	const outerHeight = 300;
	const radius = 10;
	const margin = {top: 20, right: 30, bottom: 20, left: 30};
	const innerWidth = outerWidth - margin.left - margin.right;
	const innerHeight = outerHeight - margin.top - margin.bottom;

	const parseTime = d3.timeParse("%m/%Y");


	d3.select('#titleDiv')
	.append('h1')
	.attr('id', 'titleText')
	.text('UFO Sightings in 2018')

	d3.csv("https://raw.githubusercontent.com/molliemarie/MSIA-D3Course-2019/master/Projects%26Exercises/FirstCompleteScatter/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 startData = fullData.filter(function(d) { return d.year == 2018; })

	const SVG = d3.select("body").append("svg") //grabs body and appends an svg
	.attr('width', outerWidth)
	.attr('height', outerHeight);

	const svg = SVG.append('g')
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

	const xScale = d3.scaleTime()
	.domain(d3.extent(startData, function(d) { return d.parsedDate; }))
	.range([0,innerWidth]);

	const yScale = d3.scaleLinear()
	.domain([0,500])
	.range([innerHeight,0]);

	const xAxis = d3.axisBottom(xScale)
	.tickSize(-innerHeight);
	const yAxis = d3.axisLeft(yScale)
	.tickSize(-innerWidth);

	const xAxisGroup =
	svg.append('g')
	.attr('class', 'x axis')
	.call(xAxis)
	.attr("transform", "translate(0," + innerHeight +")");

	const yAxisGroup =
	svg.append('g')
	.attr('class', 'y axis')
	.call(yAxis);

	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) + ')'});

	ufoGroup.append('circle')
	.attr('class', 'ufoCircle')
	.attr('r', radius)

	ufoGroup.append('text')
	.text( function (d) { return d.count; })
	.attr('dx', radius) //moves text 10px (right) on the x axis
	.attr('dy', -radius);
	};



	// const circle = svg.selectAll('.ufoCircle')
	// .data(data)
	// .enter().append('circle')
	// .attr('class', 'ufoCircle')
	// .attr('r', radius)
	// .attr('cx', function(d) {return xScale(d.month);})
	// .attr('cy', function(d) {return yScale(d.count);})

	// const text = svg.selectAll("text")
	// .data(data)
	// .enter().append("text")
	// .attr("x", function(d) { return xScale(d.month); })
	// .attr("y", function(d) { return yScale(d.count); })
	// .text( function (d) { return d.count; })
	// .attr('dx', 10) //moves text 10px (right) on the x axis
	// .attr('dy', -10);



	// fullData.forEach(function(d) {
	// d.count = +d.count;
	// d.month = +d.date.split('/')[0];
	// })

	</script>