menu = $(‘#navigation-menu’) menuToggle = $(‘#js-mobile-menu’) menuToggle.on ‘click’, (e) ->
e.preventDefault() menu.slideToggle () -> menu.removeAttr 'style' if menu.is ':hidden'
displayError = () ->
error = document.createElement 'div' error.classList.add 'error' text = document.createElement 'span' text.innerText = 'An error has occurred. Please try again later.' error.appendChild text document.querySelector('.message-center').appendChild error
drawAverages = (rawData) ->
# Reduce down the data to build averages # hourAgo = new Date() # hourAgo.setHours hourAgo.getHours()-1 # data = rawData.filter (d) -> d.time >= hourAgo # return unless data.length data = rawData totalLevels = data.reduce ((p, c) -> p.moisture += c.moisture p.light += c.light p ), { moisture: 0, light: 0 } averageLevels = { moisture: Math.floor(totalLevels.moisture / data.length) light: Math.floor(totalLevels.light / data.length) } d3.select('#moistureWidget .number').text averageLevels.moisture d3.select('#lightWidget .number').text averageLevels.light
getContainerWidth = (container) ->
$(container).innerWidth()
d3.json(‘/data.json’)
.get (error, data) -> data = data.map (d) -> d.time = new Date(d.time) d.x = d.time d min = time: d3.min data, (d) -> d.time light: d3.min data, (d) -> d.light moisture: d3.min data, (d) -> d.moisture max = time: d3.max data, (d) -> d.time light: d3.max data, (d) -> d.light moisture: d3.max data, (d) -> d.moisture drawAverages(data) width = getContainerWidth('#lineChart') m = [10, 25, 0, 40] # Margins [top w = width - m[1] - m[3] # Width h = 300 - m[0] - m[2] # Height scales = x: d3.time.scale().domain([min.time, max.time]).range([0, w]) y: d3.scale.linear().range([0, h]) if max.light > max.moisture scales.y.domain([max.light, 0]) else scales.y.domain([max.moisture, 0]) chart = d3.select('#lineChart').append('svg') .attr('width', w + m[1] + m[3]).attr('height', h + m[0] + m[1]) .append('g') .attr('transform', "translate(#{m[3]}, #{m[0]})") xAxis = d3.svg.axis().scale(scales.x) yAxis = d3.svg.axis().scale(scales.y).orient('left') chart.append('g').attr('class', 'x axis') .attr('transform', "translate(0, #{h})") .call xAxis chart.append('g').attr('class', 'y axis') .attr('transform', 'translate(0, 0)') .call yAxis moistureLine = d3.svg.line() .x((d) -> scales.x(d.time)) .y((d) -> scales.y(d.moisture)) lightLine = d3.svg.line() .x((d) -> scales.x(d.time)) .y((d) -> scales.y(d.light)) colorScale = d3.scale.category10() chart.append('path').attr('d', moistureLine(data)).style('stroke', colorScale(0)) chart.append('path').attr('d', lightLine(data)).style('stroke', colorScale(1))