CARTEEH DATA:HUB - A Web Based Traffic and Emissions Visualization Framework

A Web Based Traffic and Emissions Visualization Framework

Andrew Birt , Cristhopher Nunez

Comments (0) August 12th 2019

<div class="container-fluid">  
		<div class="row">
			<div class="col-xs-12">
			    <p>
                This interactive data tool illustrates an approach to 
                visualizing second-by-second traffic data and emissions using web based tools. 
                Second-by-second vehicle locations and emissions data are stored in a database on the server 
                and queried to bring the data onto the client (web-browser). 
                For every second of real-time or simulation data data, each vehicle is plotted on the canvas object (below).
			    </p>
			    <p>
			        Vehicles are color coded either blue (light duty vehicles) or red (heavy duty vehicles). The small road network is shown by the white lines.
			    </p>
			    <p>
			        The number of vehicles, and emissions generated by all the vehicles in the study area are also plotted on the graphs below (again divided into light- and heavy-duty vehicles). The graphs illustrate the variability of emissions over time, driven by traffic activity and vehicle types. In this case, the vehicles were generated using a traffic microsimulator, but data from GPS monitoring of actual vehicles could easily be used.			        
			    </p>
			    <p>For more information on the modeling approach, <a target="_parent" href="https://carteehdata.org/library/document/variability-in-traffic-emissions-using-simulation-models">read the story</a>.</p>
			</div>
			<div class="col-xs-12 col-sm-6">
                <div><h4 id="sim_time">Simulation Time (s): 0</h4></div>
                <div class="canvas-container" style="width: 500px; height: 500px; position: relative; user-select: none;">
                    <div class="canvas-container" style="width: 500px; height: 500px; position: relative; user-select: none;">
                        <canvas id="c1" width="500" height="500" class="lower-canvas" style="position: absolute; width: 500px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
                        <canvas class="upper-canvas " width="500" height="500" style="position: absolute; width: 500px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
                    </div>
                    <canvas class="upper-canvas " width="500" height="500" style="position: absolute; width: 500px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: default;"></canvas>
                </div>
			</div>
			<div class="col-xs-12 col-sm-6">
			    <div class="mt-10">
			        <strong id="notice">Please wait a few seconds for the data to load then press on the START SIMULATION button<br/></strong>
			        <button id="btn_start" type="button" class="button" onclick ="javascript:StartTimer()">Start Simulation</button>
                    <button id="btn_stop" type="button" class="button" onclick ="javascript:StopTimer()">Stop Simulation</button>
                </div>
				<div class="mt-10">
				    <div id="chart_emissions" style ="height:250px;width:100%"></div>
				    <div id ="chart_vehicles" style ="height:250px;width:100%"></div>
				</div>
			</div>
		</div>
	</div>

var thedata = Array();
var startindex = 0;

var canvas1 = null;
var minx = -500;
var maxx = 300;
var miny = -300;
var maxy = 300;
var maxtime = 2000; 
var mintime = 0;
var currenttime = mintime;
var timer1 = null;
var simspeed = 50;

var totalemissionsdata = Array();
var caremissionsdata = Array();
var truckemissionsdata = Array();

var totalvehicledata = Array();
var carvehicledata = Array();
var truckvehicledata = Array();

var totalemissions = 0;
var car_emissions = 0;
var truck_emissions = 0;

var totaltrucks = 0;
var totalcars = 0;

rainbow = ["rgb(100,100,255)", "rgb(255,100,100)"];

series: [
            {
            name: 'Car Emissions',
            data: caremissionsdata,
            color: "rgb(0,0,255)"
            },
            {
            name: 'Truck Emissions',
            data: truckemissionsdata,
            color: "rgb(255,0,0)"
            },
            {
            name: 'Total Emissions',
            data: totalemissionsdata,
            color: "rgb(0,0,0)"
            }
        ]
    });

$('#chart_vehicles').highcharts({
        chart: {
            type: 'spline',
            //width: null,
            //height: '400px'
        },
        title: {
            text: ''
        },
        xAxis: {
            title: {
                text: 'Time (s)',
                style: {
                    fontSize: '14px'
                }
            },
            labels: {
                style: {
                    fontSize: '10px'
                }
            },
            min: 0,
            max: 60
        },
        yAxis: {
            gridLineWidth: 0,
            title: {
                text: 'Number of Vehicles',
                style: {
                    fontSize: '14px'
                }
            },
            labels: {
                style: {
                    fontSize: '10px'
                }
            },
            
            min: 0,
            max: 25
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled: false
                }
            }
        },
        legend: {
            enabled: true,
            itemStyle: {
                fontSize: '16px'
            },
            borderWidth: 0
            //align: 'bottom',
            //verticalAlign: 'middle'
        },

series: [{
            name: '# Cars',
            data: carvehicledata,
            color: "rgb(0,0,255)"
        },
        {
            name: '# Trucks',
            data: carvehicledata,
            color: "rgb(255,0,0)"
        },
        {
        name: 'Total Vehicles',
        data: totalvehicledata,
        color: "rgb(0,0,0)"
}
        ]
    });
    DrawLanes();
}

function DrawLanes()
{
    pt1 = ScalePoint(0, 0)
    pt2 = ScalePoint(maxx,0)
 
    line1 = makeLine([0, 250, 500, 250]);
    line2 = makeLine([250, 0, 250, 500])
    canvas1.add(line1, line2);
}
function ScalePoint(xpos, ypos) {
    x = (xpos - minx) / (maxx - minx)
    y = (ypos - miny) / (maxy - miny)
    pt.x = x * 500;
    pt.y = y * 500;
    return pt;
}

function makeLine(coords) {
    return new fabric.Line(coords, {
        fill: 'rgb(200,200,200)',
        stroke: 'rgb(200,200,200)',
        strokeWidth: 10,
        selectable: false
    });
}

function GetNextTime()
{
    currenttime++;
    if (currenttime > maxtime) {
        currenttime = mintime;
        clearTimeout(timer1);
    }
    else {

UpdateChart();
        UpdateDisplay();
        PlotTraffic();
        
    }

}

function GetPreviousTime()
{
    currenttime--;
    PlotTraffic();
}

function StartTimer() {
   currenttime = mintime;
   timer1 =  window.setInterval("GetNextTime()", simspeed);
}

function StopTimer() {
    clearTimeout(timer1);
}

function UpdateChart(newemissions)
{
    if (currenttime % 1 == 0)
    {
        var chart = $('#chart_emissions').highcharts();
        chart.series[0].setData(caremissionsdata, false); //car
        chart.series[1].setData(truckemissionsdata, false); //truck
        chart.series[2].setData(totalemissionsdata, true); //total

chart = $('#chart_vehicles').highcharts();
        chart.series[0].setData(carvehicledata, false); //car
        chart.series[1].setData(truckvehicledata, false); //truck
        chart.series[2].setData(totalvehicledata, true); //total
    }
    
}

function ShortenArray(arr) {
    if (arr.length > 60) {
        arr.splice(0, 2)
    }
}

function UpdateDisplay()
{
    var el = document.getElementById("sim_time");
    if (el)
    {
        el.innerText = "Simulation Time (s) = " + currenttime;
    }
}

function GetTrafficData() {

}

function GetTrafficData_Success(v) {
    
    if (v[0] == "1") {
        
        ParseData(v[1])
    }
    else {

}
}

function ParseData(rawdata) {

var arr = rawdata.split("\n");
    if (arr) {
        for (x = 0; x < arr.length; x++)
        {
            //now split into columns
            var arr2 = arr[x].split("\t");
            thedata.push(arr2)
        }
    }
    EnableButtons();
    
}

function EnableButtons() {

//var el = document.getElementById("btnstart")
    //if (el)
    //{
    //    el.disabled = false;
    //}
    //var el = document.getElementById("btnstop")
    //if (el) {
    //    el.disabled = false;
    //}
    $('#btn_start').prop('disabled', false);
    $('#btn_stop').prop('disabled', false);
    $('#notice').hide();
}

//function PlotTraffic_Hard() {

//    getRandomInt = fabric.util.getRandomInt;
//    rainbow = ["#ffcc66", "#ccff66", "#66ccff", "#ff6fcf", "#ff6666"];
//    rainbowEnd = rainbow.length - 1;
//    if (thedata != null) {
//        index = startindex;
//        while (thedata[index][0] == currenttime) {
//            pt = ScalePoint(thedata[index][3], thedata[index][4])
//            dot = new fabric.Circle({
//                left: pt.x,
//                top: pt.y,
//                radius: 2,
//                fill: rainbow[getRandomInt(0, rainbowEnd)],
//                objectCaching: false
//            });
//            canvas1.add(dot);
//            index++;
//        }
//        startindex = index + 1;
//    }

//}

function ClearCanvas1()
{
    var obj = canvas1.getObjects();
    //alert(obj.length)
    for (x=obj.length-1; x > -1; x--)
    {
        canvas1.remove(obj[x]);
    }
}

}
        totalemissionsdata.push(truckemissions + caremissions);
        caremissionsdata.push(caremissions);
        truckemissionsdata.push(truckemissions);
        ////
        totalvehicledata.push(totalcars + totaltrucks);
        carvehicledata.push(totalcars);
        truckvehicledata.push(totaltrucks);

ShortenArray(caremissionsdata);
        ShortenArray(truckemissionsdata);
        ShortenArray(totalemissionsdata);

ShortenArray(carvehicledata);
        ShortenArray(truckvehicledata);
        ShortenArray(totalvehicledata);
    }
    
    canvas1.renderAll();
}

function pt()
{
    pt.x = 0;
    pt.y = 0;
}

document.addEventListener("DOMContentLoaded", function(event) {
Initialize();
});

A Web Based Traffic and Emissions Visualization Framework

Provide Feedback

Or send us an email at [email protected]