GPT答: |
7i24.cn
|
標轉換
// 經緯度度分秒轉成10進位
d.lat = parseFloat(d.lat.replace("N",""))
d.lng = parseFloat(d.lng.replace("E",""))
var lat = d.lat/100;
var lng = d.lng/100;
lat = parseFloat(lat.toString().split(".")[0] + "." + parseFloat("0." + lat.toString().split(".")[1])*60);
lng = parseFloat(lng.toString().split(".")[0] + "." + parseFloat("0." + lng.toString().split(".")[1])*60);
d.lat = lat;
d.lng = lng;
// lat, lon
var parseLat = d3.round(d.lat, 3);
var parseLon = d3.round(d.lng, 3);
return "translate(" + projection([parseLon, parseLat]) +")";
});
function transitions() {
//會用到的數字
var hour = 25;
var hour_no_red = 0;
//make sure to reset color back to normal
d3.selectAll('image').style('opacity', 1);
//設定每小時的縮放大小
if (hour > 0 && hour <= 6 || hour > 24 ) {
var scale_dots = 0.8;
} else if (hour > 6 && hour <= 12) {
var scale_dots = 1;
} else if (hour > 12 && hour <= 18) {
var scale_dots = 1.25;
} else if (hour >18 && hour <= 24) {
var scale_dots = 1.1;
}
d3.selectAll('image').transition().duration(800)
.attr('transform', 'scale(' + scale_dots + ')');
if (hour > 24) { //25小時
var hour_no_red = hour - 24; //轉換0-24
} else {
var hour_no_red = hour;
}
//移除所有黃色
d3.selectAll('circle').style('fill', '#ecb753');
// highlight all red dots
d3.selectAll('circle').style('fill', function(d) {
return d.hour == hour_no_red ? '#d3001f' : '#ecb753';
});
//remove all image
d3.selectAll('image').style('opacity', 0);
//highlight all images
d3.selectAll('image').style('opacity', function(d) {
return d.hour == hour_no_red ? 1 : 0;
});
}
//開始接收資料
d3.csv('data.csv', function(data) {
//不用的資料設定為空
data.forEach(function(d) {
d.hour = +d.hour; // make it a number
});
//尋找時間最多的小時
var max_hour = 0;
var num_hour = 0;
d3.entries(data).forEach(function(d) {
if (+d.value.hour>max_hour) {
max_hour = +d.value.hour;
}
num_hour = Math.max( max_hour );
});
//bug fix, 24點應該是0點
num_hour_fixed = num_hour + 1;
//setup the visuals
transitions();
$('.sr-only').html(hour); //update the hour for screen readers
$('#hour').text(hour); //update hour
$('#hour_range').val(hour); //update range
//function for the slider
$(function() {
$( "#hour_range" ).slider({
value: hour,
min: 1,
max: 25,
step: 1,
slide: function( event, ui ) {
hour = ui.value;
transitions();
$('.sr-only').html(hour);
$('#hour').text(hour);
}
});
});
});
|