My first Mapsense by maptastik

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="//d3js.org/topojson.v1.min.js" charset="utf-8"></script>
    <script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script>
    <link type="text/css"  href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>


<style>
    html, body, #myMap{
        height: 100%;
        width: 100%;
        margin: 0; padding: 0;
    }
    .map {
        background-color: white;
        width: 100%;
        height: 100%;
    }
    .mapFeatures {
        vector-effect: non-scaling-stroke;
        stroke: grey;
        fill : none;
    }
    .tile-background {
        fill: #158F00;
    }
    .blockgroup{
        fill: rgba(57,215,29,0.5);
        stroke: rgba(23,44,58,1); 
        stroke-width: 5px;
    }
    .blockgroup:hover{
        fill: rgba(23,44,58,1); 
        cursor: pointer;
    }
</style>

</head>
<body>

    <div id="myMap"></div>

<script>

    var sf = [
        {lon: -84.739998, lat: 38.113182},
        {lon: -84.401825, lat: 38.49279}
    ];

    var map = mapsense.map("#myMap"); //tell it where to go 
    map.add(
        mapsense.basemap()
            .apiKey("key-b4bc5affdce44f7d86e3efdf72f5d0d4")
            .style("tron")
        )
        .extent(sf);
    
    d3.json("popACS13.geojson", function(data){
        map.add(mapsense.geoJson()
            .features(data.features)
            .selection(function(d){
                d.attr("class","blockgroup")
            })
        );
    });

</script>
</body>
</html>