molliemarie/.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>

<!-- CSS -->
<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;
    font-size: 11px
  }

  .ufoCircle {
    fill: limegreen
  }

/*NEW CSS GOES HERE*/

</style>

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

<!-- //JavaScript -->
<script>

  //*****defining variables*****
  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 radius = 10;
  const parseTime = d3.timeParse("%m/%Y");

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

  //***** loading data using d3-fetch *****
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);

  //***** After data loaded, calls ready function *****
  function ready(fullData) {

    //***** filter data to look at just 2018 *****
    const startData = fullData.filter(function(d) { return d.year == 2018})

    //***** Define inner and outer SVGs *****
    //***** reference: https://bl.ocks.org/mbostock/3019563 *****
     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 + ")");

    //***** set scales and axes *****
    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')
      .attr("transform", "translate(0," + innerHeight + ")")
      .call(xAxis);

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

    //***** Define 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) + ')'})

    //***** append circles to ufoGroup *****
    ufoGroup.append('circle')
      .attr('class', 'ufoCircle')
      .attr('r', radius)
//     	.style('fill', 'limegreen')

    //***** append text to ufoGroup *****
    ufoGroup.append('text')
      .attr('class', 'ufoText')
      .attr('dx', radius)
      .attr('dy', -radius)
      .text(function(d) { return d.count;})
      }


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

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

	<!-- CSS -->
	<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;
	font-size: 11px
	}

	.ufoCircle {
	fill: limegreen
	}

	/NEW CSS GOES HERE/

	</style>

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

	<!-- //JavaScript -->
	<script>

	//***defining variables***
	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 radius = 10;
	const parseTime = d3.timeParse("%m/%Y");

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

	//*** loading data using d3-fetch ***
	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);

	//*** After data loaded, calls ready function ***
	function ready(fullData) {

	//*** filter data to look at just 2018 ***
	const startData = fullData.filter(function(d) { return d.year == 2018})

	//*** Define inner and outer SVGs ***
	//*** reference: https://bl.ocks.org/mbostock/3019563 ***
	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 + ")");

	//*** set scales and axes ***
	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')
	.attr("transform", "translate(0," + innerHeight + ")")
	.call(xAxis);

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

	//*** Define 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) + ')'})

	//*** append circles to ufoGroup ***
	ufoGroup.append('circle')
	.attr('class', 'ufoCircle')
	.attr('r', radius)
	// .style('fill', 'limegreen')

	//*** append text to ufoGroup ***
	ufoGroup.append('text')
	.attr('class', 'ufoText')
	.attr('dx', radius)
	.attr('dy', -radius)
	.text(function(d) { return d.count;})
	}



	</script>