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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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$latand$longare 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:Hope that helps you (or whoever else is looking at this page)