developer at CU Laboratory for Atmospheric and Space Physics
dstLegendScale = d3.scaleLinear()
.domain(dstColor.domain())
.range([0, width/4])
differenceLegendScale = d3.scaleLinear()
.domain(d3.extent(color.domain()))
.range([0, width/4])
differenceLegendAxis = g => g
.attr("class", `x-axis`)
.attr("transform", `translate(0,${recHeight/2})`)
.call(d3.axisBottom(differenceLegendScale)
.ticks(width / 80)
.tickSize(-recHeight/2))
dstLegendAxis = g => g
.attr("class", `x-axis`)
.attr("transform", `translate(0,${recHeight/2})`)
.call(d3.axisBottom(dstLegendScale)
.ticks(width / 80)
.tickSize(-recHeight/2))
// width = Math.ceil(mapColumns * hexRadius * SQRT3 + hexRadius)
width = (recWidth * (mapRows + mapColumns - 1));
// height = Math.ceil(mapRows * 1.5 * hexRadius + 0.5 * hexRadius)
height = recHeight * mapColumns
recWidth = 25
recHeight = 20
margin = ({
left: recWidth * 5,
right: recWidth,
top: recHeight * 5,
bottom: recHeight * 7
})
modelRuns = await Array.from(Array(mapRows).keys()).map( value => moment.utc( mostRecentModelRunData ).clone().subtract( value, 'hours').format('YYYY-MM-DDTHH:00:00'))
mostRecentModelRun = (await fetch('https://livedst-api.dev.swx-trec.com/livedst_latest')).json()
mostRecentModelRunData = mostRecentModelRun.predictions.data[0][0]
last24HoursOfDataRequest = (await fetch('https://livedst-api.prod.swx-trec.com/livedst_hour?time,pred_hr0,pred_hr1,std_hr1,pred_hr2,std_hr2,pred_hr3,std_hr3,pred_hr4,std_hr4,pred_hr5,std_hr5,pred_hr6,std_hr6&time%3E=' + moment.utc().startOf('hour').subtract(24, 'hour').format('YYYY-MM-DDTHH:00:00Z') + '&time%3C=' + moment.utc().startOf( 'hour' ).add( 7, 'hours' ).format('YYYY-MM-DDTHH:00:00Z'))).json()
dataByRows = last24HoursOfData.reduce( (aggregator, data, index) => {
if ( data[2]) {
const t1Object = { [data[0]]: data[2] };
aggregator[index] ? aggregator[index].push(t1Object) : aggregator[index] = [ t1Object ];
}
if ( data[4]) {
const t2Object = { [data[0]]: data[4] };
aggregator[index] ? aggregator[index].push(t2Object) : aggregator[index] = [ t2Object ];
}
if ( data[6] ) {
const t3Object = { [data[0]]: data[6] };
aggregator[index] ? aggregator[index].push(t3Object) : aggregator[index] = [ t3Object ];
}
if ( data[8]) {
const t4Object = { [data[0]]: data[8] };
aggregator[index] ? aggregator[index].push(t4Object) : aggregator[index] = [ t4Object ];
}
if ( data[10]) {
const t5Object = { [data[0]]: data[10] };
aggregator[index] ? aggregator[index].push(t5Object) : aggregator[index] = [ t5Object ];
}
if ( data[12]) {
const t6Object = { [data[0]]: data[12] };
aggregator[index] ? aggregator[index].push(t6Object) : aggregator[index] = [ t6Object ];
}
return aggregator
}, [])
dstData = dstRequest.kyoto_dst_index_service.data.reduce( (aggregator, data ) => {
aggregator[data[0]] = data[1];
return aggregator;
}, {})
dataArray = [ getValuesOnly(thing0), getValuesOnly(thing1), getValuesOnly(thing2),getValuesOnly(thing3), getValuesOnly(thing4), getValuesOnly(thing5), getValuesOnly(thing6), getValuesOnly(thing7), getValuesOnly(thing8), getValuesOnly(thing9), getValuesOnly(thing10), getValuesOnly(thing11), getValuesOnly(thing12), getValuesOnly(thing13), getValuesOnly(thing14), getValuesOnly(thing15), getValuesOnly(thing16), getValuesOnly(thing17), getValuesOnly(thing18), getValuesOnly(thing19), getValuesOnly(thing20), getValuesOnly(thing21), getValuesOnly(thing22), getValuesOnly(thing23) ]
newDataArray = [ getValuesOnly(thing0)]
thing1 = (await dataPromises[1]).json();
thing2 = (await dataPromises[2]).json();
thing3 = (await dataPromises[3]).json();
thing4 = (await dataPromises[4]).json();
thing5 = (await dataPromises[5]).json();
thing6 = (await dataPromises[6]).json();
thing7 = (await dataPromises[7]).json();
thing8 = (await dataPromises[8]).json();
thing9 = (await dataPromises[9]).json();
thing10 = (await dataPromises[10]).json();
thing11 = (await dataPromises[11]).json();
thing12 = (await dataPromises[12]).json();
thing13 = (await dataPromises[13]).json();
thing14 = (await dataPromises[14]).json();
thing15 = (await dataPromises[15]).json();
thing16 = (await dataPromises[16]).json();
thing17 = (await dataPromises[17]).json();
thing18 = (await dataPromises[18]).json();
thing19 = (await dataPromises[19]).json();
thing20 = (await dataPromises[20]).json();
thing21 = (await dataPromises[21]).json();
thing22 = (await dataPromises[22]).json();
thing23 = (await dataPromises[23]).json();
getValuesOnly = (response) => response.predictions.data;
// color = d3.scaleDiverging([-20, 0, 20], t => d3.interpolateRdBu(1 - t))
color = d3.scaleLinear([-20, -10, 0, 10, 20], ['firebrick', 'goldenrod', 'palegreen', 'goldenrod', 'firebrick'])
dstColor = d3.scaleLinear([-150, 50], ['navy', 'white'])
// TODO: Fix this? do I need to take out the earliest date or what this just some glitch? Should be a 29 item array, check back another day
availableDates = Array.from(dataArray.reduce( (aggregator, data, index) => {
if ( data.length ) {
aggregator.add( data[0][0])
if ( index === 0 ) {
data.forEach( element => aggregator.add(element[0]));
}
}
return aggregator;
}, new Set())).sort().reverse();
trimmedAvailableDates = availableDates.length > 29 ? [...availableDates].slice(0, -1) : [...availableDates]
dates = d3.extent(availableDates)
xScale = d3.scaleLinear( d3.extent(availableDates), [0, width])
moment = require('moment');
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
