Airline Noise
How do I make an airline noise?
After finding noise contour data from the Orlando International and Orlando Executive Airports (for 2003), I wanted to compare those areas with the flight paths of planes nowadays--specifically, a 24-hour block between August 13th and 14th.. What is a airline noise? How do you make a airline noise? This script and codes were developed by Nick Walsh on 06 November 2022, Sunday.
Airline Noise - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Airline Noise</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,
body { overflow: hidden;
}
canvas { background: #222; display: block;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/68727/topojson.js'></script> <script src="js/index.js"></script>
</body>
</html>
Airline Noise - Script Codes CSS Codes
html,
body { overflow: hidden;
}
canvas { background: #222; display: block;
}
Airline Noise - Script Codes JS Codes
// -------------------------------------
// Setup
// -------------------------------------
var height = window.innerHeight;
var width = window.innerWidth;
var canvas = d3.select('body').append('canvas') .attr('height', height) .attr('width', width);
var ctx = canvas.node().getContext('2d');
var pixelRatio = window.devicePixelRatio;
if (pixelRatio > 1) { canvas.attr('height', height * pixelRatio); canvas.attr('width', width * pixelRatio); ctx.scale(pixelRatio, pixelRatio); canvas.attr('style', 'height:' + height + 'px; width:' + width + 'px;');
}
var projection = d3.geo.mercator() .center([-81.3503157, 28.4583811]) .scale(d3.min([width, height]) * 125) .translate([width / 2, height / 2]);
var path = d3.geo.path() .projection(projection) .context(ctx);
// -------------------------------------
// Utility
// -------------------------------------
// http://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas
function drawCurve(ctx, ptsa, numOfSegments) { pts = getCurvePoints(ptsa, numOfSegments); ctx.moveTo(pts[0], pts[1]); for(x = 2; x < pts.length - 1; x += 2) { ctx.lineTo(pts[x], pts[x + 1]); }
}
function getCurvePoints(ptsa, numOfSegments) { var tension = 0.5; var numOfSegments = 25; var _pts = [], res = [], x, y, t1x, t2x, t1y, t2y, c1, c2, c3, c4, st, t, i; _pts = ptsa.slice(0); _pts.unshift(ptsa[1]); _pts.unshift(ptsa[0]); _pts.push(ptsa[ptsa.length - 2]); _pts.push(ptsa[ptsa.length - 1]); for (t = 2; t < (_pts.length - 4); t += 2) { for (tt = 0; tt <= numOfSegments; tt++) { t1x = (_pts[t + 2] - _pts[t - 2]) * tension; t2x = (_pts[t + 4] - _pts[t]) * tension; t1y = (_pts[t + 3] - _pts[t - 1]) * tension; t2y = (_pts[t + 5] - _pts[t + 1]) * tension; st = tt / numOfSegments; c1 = 2 * Math.pow(st, 3) - 3 * Math.pow(st, 2) + 1; c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2); c3 = Math.pow(st, 3) - 2 * Math.pow(st, 2) + st; c4 = Math.pow(st, 3) - Math.pow(st, 2); x = c1 * _pts[t] + c2 * _pts[t+2] + c3 * t1x + c4 * t2x; y = c1 * _pts[t+1] + c2 * _pts[t+3] + c3 * t1y + c4 * t2y; res.push(x); res.push(y); } } return res;
}
// -------------------------------------
// Load
// -------------------------------------
d3.json('//s3-us-west-2.amazonaws.com/s.cdpn.io/68727/features.json', function(error, data) { // ----- Land ----- // ctx.beginPath(); path(topojson.feature(data, data.objects.land)); ctx.fillStyle = '#3f3f3f'; ctx.fill(); // ----- Streets ----- // ctx.beginPath(); path(topojson.feature(data, data.objects.streets)); ctx.lineWidth = '0.5'; ctx.strokeStyle = '#111'; ctx.stroke(); // ----- Contours ----- // ctx.globalCompositeOperation = "lighter"; var contours = topojson.feature(data, data.objects.noise).features; for (i = 0; i < contours.length; i++) { ctx.beginPath(); path(contours[i]); ctx.fillStyle = 'rgba(255, 50, 50, ' + (6 - contours[i].properties.zone) * 0.2 + ')'; ctx.fill(); } // ----- Paths ----- // ctx.fillStyle = 'rgba(100, 150, 255, 0.01)' ctx.lineWidth = '0.75'; ctx.strokeStyle = 'rgba(100, 150, 255, 0.25)'; d3.json('//s3-us-west-2.amazonaws.com/s.cdpn.io/68727/data.json', function(error, data) { var counter = 0; var draw = function() { if (data.data[counter] !== undefined) { var newPath = []; for (i = 0; i < data.data[counter].length; i++) { var coords = projection(data.data[counter][i]); newPath.push(coords[0], coords[1]); } ctx.beginPath(); drawCurve(ctx, newPath); ctx.stroke(); ctx.fill(); counter++; requestAnimationFrame(draw); } } draw(); });
});
Developer | Nick Walsh |
Username | nickawalsh |
Uploaded | November 06, 2022 |
Rating | 3 |
Size | 3,484 Kb |
Views | 20,240 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Radar | 4,953 Kb |
Constellations | 3,361 Kb |
Diagram | 6,735 Kb |
Animations without d3-timer | 2,803 Kb |
Swan | 3,872 Kb |
Mapping - 3 | 2,984 Kb |
Citrus Bowl | 5,981 Kb |
Random Geometries | 2,846 Kb |
Paddle | 3,391 Kb |
Extend Interpolation | 2,493 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
Modal Dialog | Gigaleet | 2,251 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!