Guide.md

Hi there,

For the map 'From where does India shops?'

Stylesheet and Javascript

You need to add these css and js script in the header section of the HTML.

<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>

<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />

Code for the Map

<h3>From where does India shops?</h3>

<div id='customer-map' style="height:400px;"></div>

<script src='https://gist.githack.com/pravj/d4c24e297e5eafeba22f/raw/c8f7541edb7e69dd53ed688ef81d34a34c66f479/customer-location.js'></script>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicHJhdmoiLCJhIjoiNjc1YTVjYTEzMjAyNjU4ZTgwNjQyMDQwNzgxNTc5MGMifQ.bEvQyBRzIuy5S_hmpsPLuA';
    var map = L.mapbox.map('customer-map', 'mapbox.streets')
        .setView([23.548683,79.7800369], 4);

    var markers = new L.MarkerClusterGroup();

    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        var title = a[2];
        var marker = L.marker(new L.LatLng(a[0], a[1]), {
            icon: L.mapbox.marker.icon({'marker-symbol': 'building', 'marker-color': 'DD44FF'}),
            title: title
        });
        marker.bindPopup(title);
        markers.addLayer(marker);
    }

    map.addLayer(markers);
</script>

Make sure to add the div with id customer-map as this is where the map will be inserted.

Interactive Plots

To add the charts you can use easy embedding from plot.ly. I'm listing HTML to plug in for each plots.

Plot.ly Charts

When does India shops?

<div>
    <a href="https://plot.ly/~pravj/51/" target="_blank" title="When does India shops?" style="display: block; text-align: center;"><img src="https://plot.ly/~pravj/51.png" alt="When does India shops?" style="max-width: 100%;width: 600px;"  width="600" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="pravj:51"  src="https://plot.ly/embed.js" async></script>
</div>

How long does it take to deliver your order?

<div>
    <a href="https://plot.ly/~pravj648/16/" target="_blank" title="How long does it take to deliver your order?" style="display: block; text-align: center;"><img src="https://plot.ly/~pravj648/16.png" alt="How long does it take to deliver your order?" style="max-width: 100%;width: 600px;"  width="600" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="pravj648:16"  src="https://plot.ly/embed.js" async></script>
</div>

Shared Logistics

<div>
    <a href="https://plot.ly/~pravj648/145/" target="_blank" title="Shared Logistics" style="display: block; text-align: center;"><img src="https://plot.ly/~pravj648/145.png" alt="Shared Logistics" style="max-width: 100%;width: 1258px;"  width="1258" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="pravj648:145"  src="https://plot.ly/embed.js" async></script>
</div>

Outsourced Logistic Partner Network

<div>
    <a href="https://plot.ly/~pravj648/159/" target="_blank" title="Outsourced Logistic Partner Network" style="display: block; text-align: center;"><img src="https://plot.ly/~pravj648/159.png" alt="Outsourced Logistic Partner Network" style="max-width: 100%;width: 1258px;"  width="1258" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="pravj648:159"  src="https://plot.ly/embed.js" async></script>
</div>

EORS Purchase Behavior

<div>
    <a href="https://plot.ly/~pravj648/166/" target="_blank" title="EORS Purchase Behavior" style="display: block; text-align: center;"><img src="https://plot.ly/~pravj648/166.png" alt="EORS Purchase Behavior" style="max-width: 100%;width: 1258px;"  width="1258" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="pravj648:166"  src="https://plot.ly/embed.js" async></script>
</div>

Gender Segmentation of brands

<div>
    <a href="https://plot.ly/~pravj648/105/" target="_blank" title="Gender Segmentation of brands" style="display: block; text-align: center;"><img src="https://plot.ly/~pravj648/105.png" alt="Gender Segmentation of brands" style="max-width: 100%;width: 600px;"  width="600" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="pravj648:105"  src="https://plot.ly/embed.js" async></script>
</div>

Write me at hackpravj@gmail.com for any query. 😄