Skip to content

Commit

Permalink
Molly.
Browse files Browse the repository at this point in the history
  • Loading branch information
mollysrour committed Feb 4, 2019
1 parent e16ef8f commit 212507c
Showing 1 changed file with 197 additions and 102 deletions.
299 changes: 197 additions & 102 deletions Projects&Exercises/FirstCompleteScatter/class1Final.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,132 +9,227 @@
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;
}

/*.ufoCircle {
fill: red;
}*/

/*NEW CSS GOES HERE*/

</style>

<body>
<div id='titleDiv'></div>
<div id='buttonsDiv'></div>
</body>

<script>

var 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}
];
window.data = data;

// var width = 720;
// var height = 400;
var radius = 10;

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

// create svg

// var svg = d3.select('body').append('svg')
// .attr('width', width)
// .attr('height', height);

var margin = {top: 20, right: 10, bottom: 20, left: 30};

var width = 960 - margin.left - margin.right
// var 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}
// ];

d3.csv('data/ufo.csv', ready);

function ready(error, data) {

if (error) return console.warn(error);

function dataSwap(datasetGroup) {

//filters data using new input year
var thisDataGroup = data.filter(function(d) { return d.year == datasetGroup})

console.log(thisDataGroup)

svg.selectAll('.ufoGroup')
.data(thisDataGroup)
.transition()
.attr('transform', function(d) { return 'translate(' + xScale(d.date) + ',' + yScale(d.count) + ')'})

height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// scales
var xScale = d3.scaleLinear()
.domain([1,12])
.range([0, width])

var yScale = d3.scaleLinear()
.domain([0, 400])
.range([height, 0])

// add axes
var xAxis = d3.axisBottom(xScale);

var yAxis = d3.axisLeft(yScale);

svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);

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

var ufoGroup = svg.selectAll('.ufoGroup')
.data(data).enter().append('g')
.attr('class', 'ufoGroup')
.attr('transform', function(d) { return 'translate(' + xScale(d.month) + ',' + yScale(d.count) + ')'})

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

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


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

// // create text
// var text = svg.selectAll('.ufoText')
// .data(data)
// .enter().append('text')
// .attr('class', 'ufoText')
// .attr('x', function(d) { return xScale(d.month) })
// .attr('y', function(d) { return yScale(d.count) })
// .text(function(d) { return d.count;})
// .attr('dx', radius)
// .attr('dy', radius);
}

</script>
window.data = data;

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


var radius = 10;
var parseTime = d3.timeParse("%m/%Y");
var transitionTime = 1000;

// format data
data.forEach(function(d) {
d.count = +d.count;
d.month = d.date.split('/')[0];
d.year = d.date.split('/')[1];
d.date = parseTime(d.date);
// d.year = d.date.getYear() + 1900

});

var yearList = d3.set(data.map(function(d) { return d.year })).values();

d3.select('#buttonsDiv')
.selectAll('button')
.data(yearList)
.enter().append('button')
.text(function(d) { return d})
.on('click', function(d) {
// console.log(d)
dataSwap(d)
});

var startData = data.filter(function(d) { return d.year == 2018});

// create svg
var margin = {top: 20, right: 10, bottom: 20, left: 30};

var width = 960 - margin.left - margin.right

height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// scales
var xScale = d3.scaleTime()
// .domain([1,12])
.domain(d3.extent(startData, function(d) { return d.date; }))
.range([0, width])

var yScale = d3.scaleLinear()
.domain(d3.extent(startData, function(d) { return d.count}))
.range([height, 0])

// add axes
var xAxis = d3.axisBottom(xScale)
.tickSize(-height);

var yAxis = d3.axisLeft(yScale)
.tickSize(-width);

svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);

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

// create groups
var ufoGroup = svg.selectAll('.ufoGroup')
.data(startData).enter().append('g')
.attr('class', 'ufoGroup')
.attr('transform', function(d) { return 'translate(' + xScale(d.date) + ',' + yScale(d.count) + ')'})
.on('mouseenter', function(d) {
// EVERYTHING HERE WILL HAPPEN ON HOVER

// var testThis = d3.select(this)

// console.log(testThis)

var thisThis = d3.select(this)

// d3.select(this)
thisThis
.select('text')
.transition()
// .duration(1000)
.style('opacity', 1)

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


// d3.select(this)
thisThis
.select('circle')
.transition()
.ease(d3.easeElastic)
.duration(transitionTime)
.attr('r', radius*2)
.style('opacity', 1)



})
.on('mouseleave', function(d) {
// EVERYTHING HERE WILL HAPPEN WHEN YOUR MOUSE LEAVES A CIRCLE

var thisThis = d3.select(this)

// d3.select(this)
thisThis
.select('text')
.transition()
.style('opacity', 0)

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

d3.selectAll('.ufoCircle')
.style('opacity', 1)


})

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

// add text to group
ufoGroup.append('text')
.attr('class', 'ufoText')
.attr('dx', radius)
.attr('dy', radius)
.text(function(d) { return d.count;})
.attr('opacity', 0);

console.log(data, startData);


}


</script>

0 comments on commit 212507c

Please sign in to comment.