D3 Examples - Occupation data

xxxxxxxxxx
 
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    
    <script src='https://ramnathv.github.io/rcharts/libraries/widgets/polycharts/js/polychart2.standalone.js' type='text/javascript'></script>
    
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    
    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 400px;
    }
    .bs-docs-example:after {
      content: "";
      background: transparent;
      border: none;
    }
    </style>
    
  </head>
  <body ng-app>
      
    <div class='container' ng-controller="DemoCtrl" ng-init="drawChart()">
  <div class='row'>
    <div class='col-md-3'>
      <form class='well'>
        <label><b>Select  x :</b></label>
            <select class='form-control' ng-model="opts.x.var" 
          ng-options="ctl for ctl in controls.x.values">   
            </select><br>
        <label><b>Select  y :</b></label>
            <select class='form-control' ng-model="opts.y.var" 
          ng-options="ctl for ctl in controls.y.values">   
            </select><br>
        <label><b>Select  color :</b></label>
            <select class='form-control' ng-model="opts.color.var" 
          ng-options="ctl for ctl in controls.color.values">   
            </select><br>
        <label><b>Select  size :</b></label>
            <select class='form-control' ng-model="opts.size.var" 
          ng-options="ctl for ctl in controls.size.values">   
            </select><br>
      </form>
    </div>
    <div class='col-md-9'>
      <div class="bs-docs-example">
        <div id='chart36a43c163bc9' class='rChart '>
          <svg></svg>
        </div>
      </div>
    </div>
  </div>
</div>
<script type='text/javascript'>
function DemoCtrl($scope){
  $scope.chartParams = {
 "dom": "chart36a43c163bc9",
"width":    700,
"height":    400,
"layers": [
 {
 "x": "Replacemententrants",
"y": "Employmentgrowth",
"data": {
 "type": [ "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit", "6digit" ],
"Group": [ "Skilled", "Skilled", "Skilled", "Skilled", "Skilled", "Skilled", "Skilled", "Skilled", "Skilled", "Skilled", "Health", "Health", "Health", "Health", "Health", "Health", "Health", "Health", "Health", "Health", "Health", "Health", "Other", "Other", "Other", "Other", "Other", "Other", "Other", "Other", "Other", "Other", "Other" ],
"Occupation": [ "Water and Wastewater Treatment Plant and System Operators", "Crane and Tower Operators", "Fire Inspectors", "Transportation Inspectors", "Construction and Building Inspectors", "Pest Control Workers", "Elevator Installers and Repairers", "Structural Iron and Steel Workers", "Stationary Engineers and Boiler Operators", "Ambulance Drivers and Attendants, Except Emergency Medical Technicians", "Occupational Therapy Assistants and Aides", "Podiatrists", "Audiologists", "Nurse Practitioners and Nurse Midwives", "Physical Therapists", "Optometrists", "Dental Hygienists", "Licensed Practical and Licensed Vocational Nurses", "Physicians and Surgeons", "Nursing, Psychiatric, and Home Health Aides", "Registered Nurses", "Pharmacists", "Cost Estimators", "Ship and Boat Captains and Operators", "Directors, Religious Activities and Education", "Operations Research Analysts", "Urban and Regional Planners", "Technical Writers", "Education Administrators", "Clergy", "Veterinarians", "Personal Financial Advisors", "Postsecondary Teachers" ],
"Replacemententrants": [ 0.24653, 0.20953, 0.17955, 0.20804, 0.12576, 0.072287, 0.036335, 0.14016, 0.22076, -0.11817, -0.021793, 0.055945, -0.039526, -0.032343, -0.062574, 0.032292, 0.033284, 0.043298, 0.007072, -0.063373, -0.031035, -0.051342, 0.13103, 0.26901, 0.15956, -0.014437, 0.14876, 0.12275, 0.08522, 0.051047, 0.033468, -0.084487, -0.086486 ],
"Employmentgrowth": [ 0.077477, 0.16895, 0.056738, 0.11069, 0.12219, 0.19572, 0.24366, 0.21859, 0.029024, 0.31217, 0.41451, 0.2243, 0.33077, 0.33391, 0.35994, 0.24471, 0.33247, 0.2477, 0.17833, 0.30114, 0.19432, 0.14455, 0.26212, 0.13144, 0.084203, 0.26639, 0.10336, 0.14949, 0.1032, 0.098497, 0.11949, 0.26992, 0.16582 ],
"Index": [ 1.0462, 1.0444, 0.90433, 0.87769, 0.87249, 0.83638, 0.83008, 0.72016, 0.65255, 0.6231, 1.4628, 1.4614, 1.3377, 1.2451, 1.1895, 1.1658,  1.093, 0.91719, 0.88266, 0.60454, 0.52465, 0.32426, 1.1985, 1.1737, 0.91899, 0.85189, 0.83499, 0.82188, 0.80408, 0.80061, 0.72505, 0.63477, 0.34538 ],
"Employmentin2012": [    111,   43.8,   14.1,   26.2,  102.3,   65.4,   19.7,   58.1,   37.9,   18.9,   38.6,   10.7,     13,  116.2,  204.2,   33.1,  192.8,  738.4,  691.4, 2491.5, 2711.5,  286.4,  202.2,   38.8,  134.2,   73.2,   38.7,   49.5,  491.3,  239.6,   70.3,  223.4, 1830.9 ],
"logEmployment": [ 4.7095, 3.7796, 2.6462, 3.2658, 4.6279, 4.1805, 2.9806, 4.0622,  3.635, 2.9392, 3.6533, 2.3702, 2.5649, 4.7553, 5.3191, 3.4995, 5.2617, 6.6045, 6.5387, 7.8206, 7.9053, 5.6574, 5.3093, 3.6584, 4.8993, 4.2932, 3.6558,  3.902, 6.1971,  5.479, 4.2528,  5.409, 7.5126 ] 
},
"facet": null,
"color": "Group",
"type": "point",
"size": "Employmentin2012" 
} 
],
"facet": [],
"guides": [],
"coord": [],
"id": "chart36a43c163bc9" 
}
  _.each($scope.chartParams.layers, function(el){
    el.data = polyjs.data(el.data)
  })
      
  $scope.controls = {
 "x": {
 "name": "x",
"value": "Employmentgrowth",
"values": [ "Replacemententrants", "Employmentgrowth", "Index", "Employmentin2012", "logEmployment", "Group" ],
"label": "Select  x :" 
},
"y": {
 "name": "y",
"value": "Replacemententrants",
"values": [ "Replacemententrants", "Employmentgrowth", "Index", "Employmentin2012", "logEmployment", "Group" ],
"label": "Select  y :" 
},
"color": {
 "name": "color",
"value": "Group",
"values": [ "Replacemententrants", "Employmentgrowth", "Index", "Employmentin2012", "logEmployment", "Group" ],
"label": "Select  color :" 
},
"size": {
 "name": "size",
"value": "Employmentin2012",
"values": [ "Replacemententrants", "Employmentgrowth", "Index", "Employmentin2012", "logEmployment", "Group" ],
"label": "Select  size :" 
} 
}
  $scope.opts = $scope.chartParams.layers[0];
    
  $scope.drawChart = function(){
    $scope.chart = polyjs.chart($scope.chartParams)
    }
​
  $scope.updateChart = function(){
    $scope.chart.make($scope.chartParams)
    }
        
    $scope.$watch('opts', function(){
      $scope.chartParams.layers[0] = $scope.opts;
      $scope.updateChart();
    }, true)
}
</script>
    
  </body>
</html>
    