jonsadka/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src='https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />

  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {
      position:absolute;
      width: 100%;
      height: 100%;
    }
    canvas {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    function buildUrl(url, queryParams) {
      url += '?';
      queryParams.forEach(function(param){
        url += `${param}&`
      })
      return url.slice(0, -1);
    }
  </script>

  <script>
    //Setup mapbox-gl map
    mapboxgl.accessToken = 'pk.eyJ1Ijoiam9uc2Fka2EiLCJhIjoiY2l4ejkzM3FuMDA0bzMycDl2ZXE0cGw2byJ9.YVf_mtIw3xABynhjwojKQg';
    const map = new mapboxgl.Map({
      container: 'map', // id of the container
      style: 'mapbox://styles/jonsadka/cixzpqzbj003g2srjakw769o5',
      center: [-118.5, 34],
      zoom: 7.5,
      scrollZoom: true
    })
    // map.addControl(new mapboxgl.NavigationControl())

    function project(d) {
      const position = getLatLong(d);
      if (position) {
        return map.project(position);
      }
    }
    function getLatLong(d) {
      const longitude = +d.center_lon || (+d.location_1 || {}).longitude;
      const latitude = +d.center_lat || (+d.location_1 || {}).latitude;
      if (longitude && latitude) {
        return new mapboxgl.LngLat(longitude, latitude);
      }
    }

    const container = map.getCanvasContainer();
    const canvas = d3.select(container).append('canvas').node();
    const boundingBox = document.body.getBoundingClientRect();
    canvas.width = boundingBox.width;
    canvas.height = boundingBox.height;
    const context = canvas.getContext('2d');

    const url06To16 = 'https://data.lacounty.gov/resource/hvzm-fn38.json';

    d3.queue()
        // .defer(d3.json, 'https://data.lacounty.gov/resource/mdji-9cym.json')
        .defer(d3.json, buildUrl(url06To16, [
          '$where=units > 22', '$limit=20000', 'yearbuilt=1989'
        ]))
      .await(initialRender)

    function initialRender(error, propertyData) {
      if (error) return console.warn(error);

      console.log(
        propertyData.length,
        propertyData[0],
        getLatLong(propertyData[0]),
        project(propertyData[0])
      )

      // Initial render
      render(propertyData);

      // re-render our visualization whenever the view changes
      map.on('viewreset', function() {
        context.clearRect(0, 0, boundingBox.width, boundingBox.height);
        render(propertyData);
      })
      map.on('move', function() {
        context.clearRect(0, 0, boundingBox.width, boundingBox.height);
        render(propertyData);
      })
    }

    function render(data) {
      const propertyValues = data.reduce(function(_propertyValues, property){
        if (property.roll_totlandimp) {
          _propertyValues.push(+property.roll_totlandimp);
        }
        return _propertyValues;
      }, []);

      const propertyValueColor = d3.scaleLog()
        .range(['hsl(62,100%,90%)', 'hsl(228,30%,20%)'])
        .domain([d3.quantile(propertyValues, .01), d3.quantile(propertyValues, .99)])
        .interpolate(d3.interpolateHcl);

      context.clearRect(0, 0, boundingBox.width, boundingBox.height);

      data.forEach(function(property, idx) {
        const point = project(property);
        if (point) {
          context.fillStyle = propertyValueColor(+property.roll_totlandimp);
          context.beginPath();
          context.arc(point.x, point.y, 4, 0, Math.PI * 2);
          context.fill();
          // context.stroke();
        }
      })
    }
  </script>
</body>

## la.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              la.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src='https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />

	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	#map {
	position:absolute;
	width: 100%;
	height: 100%;
	}
	canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<script>
	function buildUrl(url, queryParams) {
	url += '?';
	queryParams.forEach(function(param){
	url += `${param}&`
	})
	return url.slice(0, -1);
	}
	</script>

	<script>
	//Setup mapbox-gl map
	mapboxgl.accessToken = 'pk.eyJ1Ijoiam9uc2Fka2EiLCJhIjoiY2l4ejkzM3FuMDA0bzMycDl2ZXE0cGw2byJ9.YVf_mtIw3xABynhjwojKQg';
	const map = new mapboxgl.Map({
	container: 'map', // id of the container
	style: 'mapbox://styles/jonsadka/cixzpqzbj003g2srjakw769o5',
	center: [-118.5, 34],
	zoom: 7.5,
	scrollZoom: true
	})
	// map.addControl(new mapboxgl.NavigationControl())

	function project(d) {
	const position = getLatLong(d);
	if (position) {
	return map.project(position);
	}
	}
	function getLatLong(d) {
	const longitude = +d.center_lon \|\| (+d.location_1 \|\| {}).longitude;
	const latitude = +d.center_lat \|\| (+d.location_1 \|\| {}).latitude;
	if (longitude && latitude) {
	return new mapboxgl.LngLat(longitude, latitude);
	}
	}

	const container = map.getCanvasContainer();
	const canvas = d3.select(container).append('canvas').node();
	const boundingBox = document.body.getBoundingClientRect();
	canvas.width = boundingBox.width;
	canvas.height = boundingBox.height;
	const context = canvas.getContext('2d');

	const url06To16 = 'https://data.lacounty.gov/resource/hvzm-fn38.json';

	d3.queue()
	// .defer(d3.json, 'https://data.lacounty.gov/resource/mdji-9cym.json')
	.defer(d3.json, buildUrl(url06To16, [
	'$where=units > 22', '$limit=20000', 'yearbuilt=1989'
	]))
	.await(initialRender)

	function initialRender(error, propertyData) {
	if (error) return console.warn(error);

	console.log(
	propertyData.length,
	propertyData[0],
	getLatLong(propertyData[0]),
	project(propertyData[0])
	)

	// Initial render
	render(propertyData);

	// re-render our visualization whenever the view changes
	map.on('viewreset', function() {
	context.clearRect(0, 0, boundingBox.width, boundingBox.height);
	render(propertyData);
	})
	map.on('move', function() {
	context.clearRect(0, 0, boundingBox.width, boundingBox.height);
	render(propertyData);
	})
	}

	function render(data) {
	const propertyValues = data.reduce(function(_propertyValues, property){
	if (property.roll_totlandimp) {
	_propertyValues.push(+property.roll_totlandimp);
	}
	return _propertyValues;
	}, []);

	const propertyValueColor = d3.scaleLog()
	.range(['hsl(62,100%,90%)', 'hsl(228,30%,20%)'])
	.domain([d3.quantile(propertyValues, .01), d3.quantile(propertyValues, .99)])
	.interpolate(d3.interpolateHcl);

	context.clearRect(0, 0, boundingBox.width, boundingBox.height);

	data.forEach(function(property, idx) {
	const point = project(property);
	if (point) {
	context.fillStyle = propertyValueColor(+property.roll_totlandimp);
	context.beginPath();
	context.arc(point.x, point.y, 4, 0, Math.PI * 2);
	context.fill();
	// context.stroke();
	}
	})
	}
	</script>
	</body>