Last active
April 19, 2016 06:33
-
-
Save stilist/28dbb76307242e9b5fd7 to your computer and use it in GitHub Desktop.
Aurora map
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'> | |
| <style> | |
| .n0 {fill:#f7fcf5;} | |
| .n1 {fill:#e5f5e0;} | |
| .n2 {fill:#c7e9c0;} | |
| .n3 {fill:#a1d99b;} | |
| .n4 {fill:#74c476;} | |
| .n5 {fill:#41ab5d;} | |
| .n6 {fill:#238b45;} | |
| .n7 {fill:#006d2c;} | |
| .n8 {fill:#00441b;} | |
| .land {fill:#49006a;} | |
| svg {background-color:#faefff;} | |
| </style> | |
| <body> | |
| <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script> | |
| <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js'></script> | |
| <script> | |
| var time_start = new Date() | |
| // **************************************************************************** | |
| var data_url = 'http://services.swpc.noaa.gov/text/aurora-nowcast-map.txt' | |
| var height = 600 | |
| var map_url = '/mbostock/raw/4090846/world-50m.json' | |
| var skip_chars = ['#', '\n'] | |
| var width = 960 | |
| function processData(data) { | |
| var n_cols, n_rows | |
| var rows = data.split(/[\n\r]+/g) | |
| rows = _.reject(rows, function (row) { | |
| return _.contains(skip_chars, row[0]) || row === '' | |
| }) | |
| n_cols = _.first(rows).trim().split(/\s+/).length | |
| n_rows = rows.length | |
| var lat_size = 180 / n_rows | |
| var lng_size = 360 / n_cols | |
| var processed = [] | |
| _.each(rows, function (row, r_idx) { | |
| var columns = row.split(/\s+/) | |
| columns = _.reject(columns, function (c) { return c === '' }) | |
| var points = _.map(columns, function (column, c_idx) { | |
| var value = parseInt(column, 10) | |
| if (value === 0) return null | |
| return { | |
| lat: (r_idx * lat_size) - 90, | |
| lng: (c_idx * lng_size) * -1, | |
| value: value | |
| } | |
| }) | |
| points = _.compact(points) | |
| processed = processed.concat(points) | |
| }) | |
| return processed | |
| } | |
| // **************************************************************************** | |
| var svg = d3.select('body').append('svg'). | |
| attr('width', width). | |
| attr('height', height) | |
| var project = d3.geo.mercator(). | |
| scale((width + 1) / 2 / Math.PI). | |
| translate([width / 2, height / 2]). | |
| precision(.1) | |
| var path = d3.geo.path(). | |
| projection(project) | |
| var quantize = d3.scale.quantize(). | |
| domain([0, 100]). | |
| range(d3.range(8)) | |
| function renderData(data) { | |
| var g = svg.append('g') | |
| g.selectAll('circle'). | |
| data(data). | |
| enter(). | |
| append('circle'). | |
| attr('cx', function (d) { return project([d.lng, d.lat])[0] }). | |
| attr('cy', function (d) { return project([d.lng, d.lat])[1] }). | |
| attr('r', 1). | |
| attr('class', function (d) { return 'n' + quantize(d.value) }) | |
| } | |
| function renderMap() { | |
| var map = svg.append('path') | |
| d3.json(map_url, function (error, world) { | |
| if (error) throw error; | |
| map.datum(topojson.feature(world, world.objects.land)). | |
| attr('class', 'land'). | |
| attr('d', path) | |
| }) | |
| } | |
| function render(data) { | |
| renderMap() | |
| renderData(data) | |
| d3.select(self.frameElement).style('height', height + 'px') | |
| } | |
| // **************************************************************************** | |
| d3.text(data_url, 'text/plain', function (data) { | |
| var cleaned_data = processData(data) | |
| render(cleaned_data) | |
| }) | |
| </script> | |
| </body> |
@n9ds: I'm probably a bit late to this party, and you probably already got it sorted by now, but I was using the nowcast data in my app, and found that I had to do ((180/512) * $lat - 90) to get latitude, and ((360/1024) * $long - 180) to get longitude, where $lat and $long are your coordinates in degrees (so basically offset your data by 90 or 180 so you get a range of -90 to 90, and -180 to 180, for a total of 180 and 360 degrees. So my tests show:
- 512 and 256 in the data = coordinates 0,0
- 1024 and 512 in the data = coordinates 180, 90
- 0 and 0 in the data = coordinates -180, -90
Hope that helps you (or whoever else is looking at this page)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm working with that same data file and don't quite understand. Each row is 0-360 degree, in 360/1024 increments. Where is 0? Comparing the file with the PNG I find on SpaceWeather.com 0 doesn't appear to be the Prime Meridian. And is that clockwise when viewed from the north pole?