D3 Examples

xxxxxxxxxx
 
​
<!DOCTYPE html>
<html lang="en">
<head>
  <title>CS590DV Final Project Visualization Template</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" />
  <link rel="stylesheet" type="text/css" href="pca.css" />
  <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <script src="https://www.lactame.com/lib/ml/2.0.0/ml.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("a").on('click', function(event) {
                    if(this.hash !== "") {
                        event.preventDefault();
                        var hash = this.hash;
                        $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; });
                    }
                });
            });
   </script>
   <style> .dc-chart g.row text {fill: black;} 
    body, html, .container {
                height: 100%;
            }
    body {
                background-image: url(bgi.jpg);
                background-size: cover;
                background-attachment: fixed;
            }
    #ch1{
      width:425px;
      height:415px;
      margin: 1%;
      padding:0;
      border:0;
      align:center;
      float:left;
    }
    #ch2{
      width:425px;
      height:415px;
      margin: 1%;
      padding:0;
      border:0;
      float:left;    
    }
    #opt {
      width: 8em;
      font-size: 10px;
      margin: 2px;
      padding: 0px;
    }
    #sec {
      width: 30%;
      height:60px;
      float:left;
      font-size: 10px;
    }
    #annotate{
      width:100%;
      font-size:10px;
      color:black ;
      overflow:scroll; 
      height:120px
    }
    h1{
      font-size: 50px;
      align:center;
      color:crimson;
    }
    h3{
      font-size: 40px;
      align:left;
      color:magenta;  
    }
    h5{
      font-size: 10px;
      margin: 2px;
      padding: 0px;      
    }
     .dc-chart g.row text {
  fill: black;
} 
    .dropdown {
      border: 1px solid #ccc;
      width: 8em;
      font-size: 10px;
      border-radius: 3px;
      overflow: visible;
    }
     .container{
  width:800px;
}
    input{
      width: 4.5em;
      font-size: 10px;
    }
    .form{
      width:10%;
    }
    #nav {
                padding: 0;
                margin-left: auto;
                margin-right: auto;
                margin-top: 15px;
                text-align: right;
            }
 #logo {
               padding: 0;
               margin-left: auto;
               margin-right: auto;
               margin-top: 20px;
               text-align: center;
            }
            #logo img {
               height: 125px;
               width: 125px;
               vertical-align: middle;
     }
   #nav img {
                vertical-align: bottom;
            }
    .axis .label {
        font-size: 10pt;
      }
​
      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      .y.axis path, .y.axis line {
        stroke: none;
      }
      h6 span {
                font-size:14px;
                font-weight:normal;
            }
            h2 {
                float: right;
            }
            h4 span {
                font-size:14px;
                font-weight:normal;
            }
  
​
  </style>
</head>
​
<body>
<div id="introduction" class="container" style="width:1000">
  <div align="center"><h1 style="h1">Bank Marketing Analysis</h1></div>
  <div align="center">
            <img id="Marketing" src="Marketing.jpg" width="600">
        </div>
  <p style="color:black">Banking has become too competitive to market by instinct our haphazard advertising. This is why we toured the industry to find what metrics the most effective banks were using to gauge effectiveness and hopefully success. Successful banks separate marketing programs that have a goal of brand support versus those that focus on sales. While branding is hard to benchmark, sales is more straightforward and is the place that most banks start. In fact, many banks won’t commit resources to marketing unless it can be measured. 
   </p>  
  <p style="color:black">
    Marketing selling campaigns constitute a typical strategy to enhance
business. Companies use direct marketing when targeting segments of
customers by contacting them to meet a specific goal, like offering the new products to their customers. Centralizing customer
remote interactions in a contact center eases operational management
of campaigns. Such centers allow communicating with
customers through various channels,
 such as email, post, or phone. Among all these channels,  telephone (fixed-line or mobile)
being one of the most widely used.  However, the increasingly vast number of marketing campaigns over time has highly reduced its successful rate, and economical pressures and competition has led marketing managers to invest on directed campaigns with a strict and rigorous selection of contacts. 
So, my study is to find a model for bank telemarketing that can explain success of a contact, i.e. if the client subscribes the deposit. Such model can increase campaign efficiency by identifying the main characteristics that affect success, helping in a better management of the available resources (e.g. human effort, phone calls, time) and selection of a high quality and affordable set of potential buying customers.
This project is mainly focusing on two parts:   
</p>   
<p>
<a href="visual.html"><h3>Data Visualization </h3> </a>
</p>  
<p>
<a href="feature.html"><h3>Feature Analysis and Selection </h3> </a>
</p>
</div>      
</body>
</html>
    