Skip to content

Instantly share code, notes, and snippets.

@dwnoble

dwnoble/index.html

Last active September 21, 2023 17:54
Show Gist options
  • Save dwnoble/9e3ac88e162248f849dd276ff5895ad0 to your computer and use it in GitHub Desktop.
Save dwnoble/9e3ac88e162248f849dd276ff5895ad0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- https://gist.github.com/dwnoble/9e3ac88e162248f849dd276ff5895ad0 -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.cdnfonts.com/css/museo-sans-rounded"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<script src="https://datacommons.org/datacommons.js"></script>
<script>
window.onload = function () {
// Update web component when text input changes
var onTextInputChange = _.debounce((e) => {
var $el = $(e.currentTarget);
var targetId = $el.data("target-id");
var targetAttr = $el.data("target-attr");
var $webComponent = $("#" + targetId);
$webComponent.attr(targetAttr, $el.val());
if (targetAttr === "variable") {
$webComponent.attr("title", $el.val());
}
}, 400);
$(".map-control").on("input", onTextInputChange);
};
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Datacommons JS Embedded Charts</a>
</div>
</nav>
<div class="container">
<!-- Web component example -->
<h2>Map Web Components</h2>
<div class="row">
<div class="col col-6">
<datacommons-map
id="map1"
header="Count_Person"
parentPlace="country/USA"
childPlaceType="State"
variable="Count_Person"
></datacommons-map>
<form class="mt-3">
<div class="form-group">
<input
type="text"
class="form-control map-control"
data-target-id="map1"
data-target-attr="place"
placeholder="Place DCID"
value="country/USA"
/>
</div>
<div class="form-group">
<input
type="text"
class="form-control map-control"
data-target-id="map1"
data-target-attr="childPlaceType"
placeholder="Enclosed Place Type (e.g., State, EurostatNUTS1)"
value="State"
/>
</div>
<div class="form-group">
<input
type="text"
class="form-control map-control"
data-target-id="map1"
data-target-attr="variable"
placeholder="Statistical Variable DCID"
value="Count_Person"
/>
</div>
</form>
</div>
<div class="col col-6">
<datacommons-map
id="map2"
header="Count_Person_PerArea"
parentPlace="country/USA"
childPlaceType="State"
variable="Count_Person_PerArea"
></datacommons-map>
<form class="mt-3">
<div class="form-group">
<input
type="text"
class="form-control map-control"
data-target-id="map2"
data-target-attr="place"
placeholder="Place DCID"
value="country/USA"
/>
</div>
<div class="form-group">
<input
type="text"
class="form-control map-control"
data-target-id="map2"
data-target-attr="childPlaceType"
placeholder="Enclosed Place Type (e.g., State, EurostatNUTS1)"
value="State"
/>
</div>
<div class="form-group">
<input
type="text"
class="form-control map-control"
data-target-id="map2"
data-target-attr="variable"
placeholder="Statistical Variable DCID"
value="Count_Person_PerArea"
/>
</div>
</form>
</div>
</div>
<div class="row mt-4">
<div class="col col-4">
<h5>Example stat vars</h5>
<ul>
<li>Count_Person</li>
<li>Count_Person_PerArea</li>
<li>LifeExpectancy_Person</li>
</ul>
</div>
<div class="col col-4">
<h5>Example country DCIDs</h5>
<ul>
<li>country/USA</li>
<li>country/GBR</li>
<li>country/FRA</li>
<li>country/DEU</li>
<li>geoId/12 (Florida)</li>
<li>geoId/15 (Hawaii)</li>
<li>Earth</li>
</ul>
</div>
<div class="col col-4">
<h5>Example enclosed place</h5>
<ul>
<li>State</li>
<li>County</li>
<li>City</li>
<li>EurostatNUTS1</li>
<li>EurostatNUTS2</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment