Introduction
- What is Trip visualization?
- What are different features we can apply in travel domain
- Code walkthrough for visualization and output
- Technology and Integration concerns.
- Beyond Google APIs
- Conclusion
What is Trip visualization?
There is a lot of buzz going in the world to develop a successful product in the market. We need to showcase the content or context as a picture that is easier and worthy rather than describing in 100’s of words. With the latest trends we can analyze the product data and transform the data into schemas that represent visualizable units that can be represented as nice UI widgets embedded on the Dashboard.
What are different features we can apply in travel domain context
As travel domain is Hugh network we can transform a lot of data coming from travel entities into various visualization units the below are few:
PNR visualization
Representing multiple segments in PNR with travelling points as nodes.
Ex: Air segment showing journey from SFO to EWR or PNQ to DEL on map with named locations and flight icon(markers).
Car Rental Trip
Showing trip navigation path with pickup, drop-off and intermediate stops with customized markers and tooltips with fare and vehicle service class.
Spend Analyzer
Shows history with various charts like Pie, Donut, Bar charts with Expense over time period.
Trip Recommendations
We have lot of in-built options to show recommendations for the trip with various alternatives in animation mode to overcome traffic between source and destinations or flight bookings with airport multi-city (Multilevel Sankeys)
Entity Relations
We can link the entities and visualize them using Word trees to represent and provide better understanding hierarchy.
ChartWrapper
It is a Convenience class which handles loading all appropriate chart libraries and also simplifying sending queries to chart data sources, which we call this as DMT (Data Mapping Transformation).
Data visualization in AR
iPhone X has a feature to interact with heavy data and visualize in Augmented Reality with motion sensor capabilities. Ex: to Visual a cycling trip between San Jose and Auburn over mountain terrain we can visualize the data in 3D view. We have various SDKs like Mapbox for Unity, New Xcode, iPhone X, and ARKit which support in developing “Augmented Reality” apps.
1. Loading Charts library
Loader.Js file from gstatic.com (from google )
<script src="https://www.gstatic.com/charts/loader.js"></script>
2.Loading the charts
<script type="text/javascript" language="javascript">
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(renderPieChart);
function renderPieChart()
{
//draw chart based on configuration
}
</script>
3.Preparing the data
<head>
<meta charset="utf-8" />
<title>Data visualization</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(renderPieChart);
function renderPieChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Element');
data.addColumn('number', 'Percentage');
data.addRows([
['January', 0.73],
['February', 0.21],
['March', 0.05],
['April', 0.01]
]);
var chart = new google.visualization.PieChart(document.getElementById('dvSpendChart'));
chart.draw(data, null);
}
</script>
</head>
<body>
<div id="dvSpendChart" />
</body>
4.Customizing
We can customize the content and display the data in a more effective manner.
Ex: we can provide a 3D look to the pie chart for better user experience by changing the above code slightly.
PNR Trip visualization with Google maps
The right side image depicts a PNR segment having flight connectivity with multiple places.
Integration of Maps API
Google Maps platform is set of multiple API’s and SDK for different platforms managed by Google Cloud Platform console (GCP) , all you need is :
1. Create a billing account
On a need basis creating an account (individual or company) and mentioning a billing model.
2. Create a project
Create a project and organize the keys for consuming over different Apps.
3. Enable required API’s and SDKs
Enabling and disabling services as and when needed to reduce billing.
4. Customizing
Billing will impact if we share the API key . The following is a key place on GCP to configure billing.
Technology and Integration concerns
Developers are always passionate about creating new frameworks and more customizations due to business needs, there are always better techniques emerging with new technologies and frameworks which will improve the user experience of the product. The only key factor is identifying the need, and choosing the right thing at the right time based on resources.
Factors to consider
Product demand
- Features development
- VOC & SLA
- Resource availability
- Infrastructure Support( Migration, Scalability, Backup & recovery plans)
As a product owner, we need to commit the features to customers based on planning by balancing new features as well as addressing VOC-Voice Of Customer reported bugs and also efficiently planning the resources in each sprint and ability to Support infrastructure for scaling which can be latest development tools (VS-2013 to 2015/2019) or Firewalls and antivirus, web servers and data servers for load balancing, migrating to cloud and so on.
Technical resource skills
Need to prepare a checklist whether the team has required skill sets to improve the feature. Ex Who has proper knowledge in Angularjs or ReactJs if we start converting the project then it will be a challenge for successful deliverables with committed deadlines. In business to be successful “Promise” is a key factor.
Agile methodology and roadmap
It is always important to do annual planning for multiple quarters with a well-defined roadmap and buffer in quarter to re-assess new features to address customer needs. Maintaining scrum masters and capturing sprint reviews and retrospective meetings make the product team aware of team velocity in deciding work to be committed over the releases.
Investment and Assessment
It is a must to rethink while doing investment and compare where to invest which will give visibility and revenue, ex if we are upgrading visual studio to 2019 we will get advantage code refactoring, automatic unit test generator, dynamic test execution, performance of each code block which will give better experience to end-user than identifying performance and avoid bugs in production post-release and rolling back few features.
Identify migration impact with R & D
Most enterprise applications will not frequently keep on changing the frameworks which are popular in the market rather the R & D team will analyze the features and incorporate the same using new code branches and get it well tested and once QA certifies then push the releases to production. It also depends on using third party libraries like telerik, kendo, DevExpress and their support in fixing the issues.
Beyond chart
It is not only a chart we use or plug in representing data for visualization we need to identify and implement the right usage of each kind of chart to best fit for data. Like below
Charts
Pie chart: when we have data to compare among each ex: which GDS is most popular and have % of market share or what is spent over each quarter for travel, which vehicle class is mostly in demand by city.
Bar chart: different channels revenue over multiple time periods.
Calendar chart: deliverable features over time with resources.
Sankey charts: To show multi-city connectivity like airports and so on.
Tree maps: example if we want to show our service availability over different places , ex showing maps with corona red , green, orange zones to decide cab drivers to accept or reject rides.
Trendlines: when we want to show different events over the same time period, ex No of accidents occurred , customer rides, fuel usage and so on on a single chart.
Word Trees: A new way of providing hierarchical data ex: different countries having different providers and each provider having different vehicle classes and each vehicle with amenities and rates.
Apart from we have so many other services we can develop the trip visualization using google libraries like:
Maps Static API
A powerful map api which can be used for showing trips with pickup, drop-off and stops and markers with different vehicle classes and live traffic and directions. It provides a way to render our own layer with an overlay showing navigation path for providing safety tracking to customers( each overlay layer representing an event feature).
Place Library
Give detailed information in json format for any searched place , Auto complete integration gives flexibility to end-users in inputting addresses with less keystrokes.
Augmented Reality
There are so many popular SDKs and ARKits available in the market for integrating data and transforming into Augmented Reality for Iphone and Unity for web browsers.
Conclusion
Software development and product life cycle are never-ending and we need to keep on updating based on the business needs. Based on the size of the Product, we need to address and incorporate various frameworks and client-side libraries like Google APIs, Knockout for MVVM, React of component reusability and rendering performance, Angular to bring MVC to the client-side with WebApi as data providers. Various Micro ORMs to fetch the data faster. Caching techniques to reduce load and improve user experience and last but not least simplifying production release with less downtime using DevOps.
