Skip to content

Instantly share code, notes, and snippets.

@stuartlynn

stuartlynn/deep_insights_template.html

Last active April 29, 2016 04:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stuartlynn/9c1ca08c97e58347e3953227c13f6bfb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stuartlynn/9c1ca08c97e58347e3953227c13f6bfb to your computer and use it in GitHub Desktop.
Download ZIP
DoGoodData - Working example
Raw
deep_insights_template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Deep-Insights.js – Madrid: Airbnb, nightlife, and public transport</title>
<meta name=viewport content="width=device-width initial-scale=1">
<link href="http://cartodb.com/favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" href="../dist/themes/css/deep-insights.css" />
<script src="../dist/deep-insights.uncompressed.js"></script>
<style type="text/css">
html, body {
position:relative;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="Dashboard-canvas" id="dashboard"></div>
<script>
cartodb.deepInsights.createDashboard('#dashboard', '', {
no_cdn: false
}, function(err, dashboard) {
var map = dashboard.getMap();
params = {
"title": "Population",
"column": "hispanic_population",
"operation": "sun"
}
dashboard.createFormulaWidget(params, map.getLayer(1));
params = {
"title": "% hispanic",
"type": "histogram",
"column": "hispanic_population",
"operation": "count",
"bins": 10
}
dashboard.createHistogramWidget(params, map.getLayer(1));
})
</script>
</body>
</html>
Raw
index.md

Grab the segment for a given point

select *, OBS_Get_Segment_Snapshot->>'segment' as segment from stuartlynn.gardens, OBS_Get_Segment_Snapshot(the_geom)

create column

update  stuartlynn.gardens set segent= s->>'segment'  from  OBS_Get_Segment_Snapshot(the_geom) s

with new_geoms as(
SELECT iso.the_geom g, cartodb_id FROM stuartlynn.gardens, cdb_isochrone(stuartlynn.gardens.the_geom, 'walk', ARRAY[600]::integer[]) as iso
where stuartlynn.gardens.the_geom is not null 
)

update stuartlynn.gardens 
SET the_geom = new_geoms.g
from new_geoms 
where new_geoms.cartodb_id  = stuartlynn.gardens.cartodb_id

Quick styling

/** category visualization */

@1: #7F3C8D;
@2: #11A579;
@3: #3969AC;
@4: #F2B701;
@5: #E73F74;
@6: #80BA5A;
@7: #E68310;
@8: #008695;
@9: #CF1C90;
@10:#f97b72;

#gardens_copy {
   polygon-opacity: 0.7;
   line-width: 0.5;
   line-opacity: 1;
}

#gardens_copy[segment="Histpnic and Young"] {
   polygon-fill: @1;
   line-color: lighten(@1,5);
}
#gardens_copy[segment="Low income and diverse"] {
   polygon-fill: @2;
   line-color: lighten(@2,5);

}
#gardens_copy[segment="Low income, African American"] {
   polygon-fill: @3;
   line-color: lighten(@3,5);

}
#gardens_copy[segment="Low income, mix of minorities"] {
   polygon-fill: @4;
   line-color: lighten(@4,5);

}
#gardens_copy[segment="Middle Income, Single Family Home"] {
   polygon-fill: @5;
   line-color: lighten(@5,5);

}
#gardens_copy[segment="Residential Institutions"] {
   polygon-fill: @6;
   line-color: lighten(@6,5);

}
#gardens_copy[segment="Wealthy Nuclear Families"] {
   line-color: lighten(@7,5);
  polygon-fill: @7;

}
#gardens_copy[segment="Wealthy Old Caucasion "] {
   polygon-fill: @8;
   line-color: lighten(@8,5);

}
#gardens_copy[segment="Wealthy, urban without Kids"] {
   polygon-fill: @9;
   line-color: lighten(@9,5);

}
#gardens_copy[segment=null] {
   polygon-fill: @10;
   line-color: lighten(@10,5);

}

Quick legend

<div class='cartodb-legend category'>	
<ul>
	<li>
		<div class="bullet" style="background: #7F3C8D"></div> Histpnic and Young
	</li>
	<li>
		<div class="bullet" style="background: #11A579"></div> Low income and diverse
	</li>
	<li>
		<div class="bullet" style="background: #3969AC"></div> Low income, African American
	</li>
	<li>
		<div class="bullet" style="background: #F2B701"></div> Low income, mix of minorities
	</li>
	<li>
		<div class="bullet" style="background: #E73F74"></div> Middle Income, Single Family Home
	</li>
	<li>
		<div class="bullet" style="background: #80BA5A"></div> Residential Institutions
	</li>
	<li>
		<div class="bullet" style="background: #E68310"></div> Wealthy Nuclear Families
	</li>
	<li>
		<div class="bullet" style="background: #008695"></div> Wealthy Old Caucasion 
	</li>
	<li>
		<div class="bullet" style="background: #CF1C90"></div> Wealthy, urban without Kids
	</li>

</ul>
</div>

Grab some census variables.

select *,
	demo->>'total_pop' as population, 
	demo->>'hispanic_pop' as hispanic_population,
	demo->>'median_income' as median_income
from stuartlynn.gardens_copy, OBS_Get_Demographic_Snapshot(the_geom) as demo
where the_geom is not null
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment