Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<div id="funnelContainer"></div>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<script type="text/javascript" src="http://smithamilli.com/static/js/d3-funnel-charts.min.js"></script>  
<p> </p>
<script type="text/javascript">
var data = [['Video Views', 1500], ['Comments', 300], ['Video Responses', 150]];
var chart = new FunnelChart(data, 400,400, 1/3);
    chart.draw('#funnelContainer', 0);
  </script> 
​
<h2>Open Opportunities by Geography</h2><p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.usa.min.js"></script>
<div id="container" style="position: relative; width: 1300px; height: 650px;"></div>
<script>
    var map = new Datamap({
        element: document.getElementById('container'),
        scope: 'usa',
        fills: {
defaultFill: '#ebe8da',
'Won' : '90000B',
'High Potential / Negotiating' : 'C4000E',
'Pilot or Quote' : 'F90012',
'Made Cut (2 providers)' : 'FA3644',
'Presentation' : 'FC646F',
'Made Cut (2 or more providers)' : 'FD8D95',
'Stated Need' : 'FEBABF'
},
data: {
        'Won': {fillKey: 'Won'},
        'High Potential / Negotiating': {fillKey: 'High Potential / Negotiating'},
        'Pilot or Quote': {fillKey: 'Pilot or Quote'},
        'Made Cut (2 providers)': {fillKey: 'Made Cut (2 providers)'},
        'Presentation': {fillKey: 'Presentation'},
        'Made Cut (2 or more providers)': {fillKey: 'Made Cut (2 or more providers)'},
        'Stated Need': {fillKey: 'Stated Need'}
    },
geographyConfig: {highlightOnHover: false,
            highlightFillColor: '#ebe8da',
            highlightBorderColor: '#ebe8da',
            highlightBorderWidth: 2,
            borderColor: '#32484c',
        },
bubblesConfig: {
        borderWidth: 2,
        borderColor: '#FFFFFF',
        popupOnHover: true,
        popupTemplate: function(geography, data) {
          return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
        },
        fillOpacity: 0.75,
        highlightOnHover: true,
        highlightFillColor: '#FC8D59',
        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
        highlightBorderWidth: 2,
        highlightFillOpacity: 0.85
    },
    });
  var Opps = [
{
    name: 'test',
    radius: 25,
    latitude: 38,
    longitude: -89.1619,
    fillKey: 'Won'
  }
    ];
map.bubbles(Opps, {
    popupTemplate: function (geo, data) { 
            return ['<div class="hoverinfo">' +  data.name,
            '<br/>Stage: ' +  data.fillKey +  '',
            '<br/>Value: $' +  format(data.value) + '',        
            '</div>'].join('');
    }
});
</script>  
​
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
timmyers15pro
0viewers