Built with blockbuilder.org
forked from molliemarie's block: FirstScatterComplete
forked from molliemarie's block: FirstScatterPlusInteractionsComplete
forked from molliemarie's block: FirstScatterPlusInteractionsPlusLineComplete
Created
February 24, 2020 02:18
-
-
Save lauriemerrell/d8dc7333f1bfa4284ff94b13ce38f319 to your computer and use it in GitHub Desktop.
taxis_working
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; | |
| } | |
| .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> | |
| <script> | |
| function dataSwap(datasetGroup, fullData) { | |
| const thisDataGroup = fullData.filter(function(d) { return d.year == datasetGroup}); | |
| console.log(thisDataGroup); | |
| xScale | |
| .domain(d3.extent(thisDataGroup, function(d) { return d.parsedDate; })); | |
| 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() | |
| .ease(d3.easeElastic) | |
| .duration(transitionTime) | |
| .attr('transform', function(d) { return 'translate(' + xScale(d.parsedDate) + ',' + yScale(d.count) + ')'}) | |
| 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)); | |
| d3.select('#titleText') | |
| .text('UFO Sightings in ' + datasetGroup); | |
| }; | |
| 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/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 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) | |
| }); | |
| xScale.domain(d3.extent(startData, function(d) { return d.parsedDate; })); | |
| yScale.domain([0, d3.max(startData, function(d) { return d.count})]); | |
| xAxisGroup.call(xAxis); | |
| yAxisGroup.call(yAxis); | |
| 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)); | |
| 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) { | |
| // 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) | |
| }) | |
| ufoGroup.append('circle') | |
| .attr('class', 'ufoCircle') | |
| .attr('r', 10) | |
| ufoGroup.append('text') | |
| .attr('class', 'ufoText') | |
| .attr('dx', 10) | |
| .attr('dy', -10) | |
| .text(function(d) { return d.count}) | |
| .attr('opacity', 0) | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment