stuartlynn/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>DiviBikes</title>
      <script src="https://cartodb.github.io/carto-vl/dist/carto-vl.js"></script>
      <script src="https://cartodb.github.io/carto-vl/vendor/mapbox-gl-dev.js"></script>
      <link href="https://cartodb.github.io/carto-vl/vendor/mapbox-gl-dev.css" rel="stylesheet" />
      <style type="text/css" media="screen">
        html,body{
          width: 100%;
          height: 100%;
          margin:0px;
          padding:0px;
        }
        #map{
          width:100%;
          height: 100%;
        }
      </style>
  </head>
  <body>
    <div id='map' />
      <script charset="utf-8">
          const map = new mapboxgl.Map({
            container: 'map',
            style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
            center: [-87.67581020137601, 41.895542836306134],
            zoom: 10,
            dragRotate: false
          });

					carto.setDefaultAuth({
						user: 'stuartlynn',
						apiKey: 'cbbc4efb5201efb60996d645f264ef4e7b14495b'
					});
					const stations= new carto.source.Dataset(`
							divvy_stations_2017_q1q2
					`);
					const stationsViz = new carto.Viz(`
            @stationid : $id
						color: ramp( linear($dpcapacity,0,20), tealgrn)
            widthStroke: 1
            colorStroke: white
					`);
          const lines = new carto.source.Dataset(`
            divvy_hourly_with_geom
          `)

          const linesViz = (selection)=>{
            console.log('selection', selection)
            if(selection){
              return new carto.Viz(`
                color: opacity(ramp(linear($no_trips,1,99),[#ff00cc,#00ccff]),0.2)
                filter: eq($from_station_id ,${selection})
                width: 1
              `)
            }
            else{
              return new carto.Viz(`
                filter: 0
              `)
            }
          }

					const layerStations = new carto.Layer('stations', stations, stationsViz);
					const layerLines = new carto.Layer('lines', lines, linesViz(317));
          const interactivity = new carto.Interactivity(layerStations)


					layerLines.addTo(map, 'watername_ocean');
					layerStations.addTo(map, 'lines');

          interactivity.on('featureEnter',(a)=>{
            console.log(a.features[0].variables)
            layerLines.blendToViz(linesViz(a.features[0].variables.stationid.value))
          })
      </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<title>DiviBikes</title>
	<script src="https://cartodb.github.io/carto-vl/dist/carto-vl.js"></script>
	<script src="https://cartodb.github.io/carto-vl/vendor/mapbox-gl-dev.js"></script>
	<link href="https://cartodb.github.io/carto-vl/vendor/mapbox-gl-dev.css" rel="stylesheet" />
	<style type="text/css" media="screen">
	html,body{
	width: 100%;
	height: 100%;
	margin:0px;
	padding:0px;
	}
	#map{
	width:100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id='map' />
	<script charset="utf-8">
	const map = new mapboxgl.Map({
	container: 'map',
	style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
	center: [-87.67581020137601, 41.895542836306134],
	zoom: 10,
	dragRotate: false
	});

	carto.setDefaultAuth({
	user: 'stuartlynn',
	apiKey: 'cbbc4efb5201efb60996d645f264ef4e7b14495b'
	});
	const stations= new carto.source.Dataset(`
	divvy_stations_2017_q1q2
	`);
	const stationsViz = new carto.Viz(`
	@stationid : $id
	color: ramp( linear($dpcapacity,0,20), tealgrn)
	widthStroke: 1
	colorStroke: white
	`);
	const lines = new carto.source.Dataset(`
	divvy_hourly_with_geom
	`)

	const linesViz = (selection)=>{
	console.log('selection', selection)
	if(selection){
	return new carto.Viz(`
	color: opacity(ramp(linear($no_trips,1,99),[#ff00cc,#00ccff]),0.2)
	filter: eq($from_station_id ,${selection})
	width: 1
	`)
	}
	else{
	return new carto.Viz(`
	filter: 0
	`)
	}
	}

	const layerStations = new carto.Layer('stations', stations, stationsViz);
	const layerLines = new carto.Layer('lines', lines, linesViz(317));
	const interactivity = new carto.Interactivity(layerStations)


	layerLines.addTo(map, 'watername_ocean');
	layerStations.addTo(map, 'lines');

	interactivity.on('featureEnter',(a)=>{
	console.log(a.features[0].variables)
	layerLines.blendToViz(linesViz(a.features[0].variables.stationid.value))
	})
	</script>
	</body>
	</html>