Skip to content

Instantly share code, notes, and snippets.

@dwnoble
Last active September 21, 2023 17:53
Show Gist options
  • Save dwnoble/719f5d71c2823ac3e58f504cb6ceccd3 to your computer and use it in GitHub Desktop.
Save dwnoble/719f5d71c2823ac3e58f504cb6ceccd3 to your computer and use it in GitHub Desktop.
<html>
<head>
<!-- https://gist.github.com/dwnoble/719f5d71c2823ac3e58f504cb6ceccd3 -->
<script src="https://datacommons.org/datacommons.js"></script>
<style>
#styled-map {
--dc-headings-font-family: monospace;
}
#styled-map::part(container) {
border-radius: 10px;
border: 1px solid #f5f5f5;
box-shadow: 1px 2px 6px rgba(3, 7, 18, 0.04),
5px 8px 25px rgba(3, 7, 18, 0.08);
}
#styled-map::part(legend) {
border: 1px solid #e1e1e1;
padding: 5px 8px;
border-radius: 10px;
}
#styled-map::part(title) {
font-weight: 200;
font-size: 16px;
margin-bottom: 16px;
color: #111a1b;
}
#styled-map::part(place-path) {
fill: #e9e9e9;
}
#styled-map::part(place-path-geoId\/12),
#styled-map::part(place-path-geoId\/13),
#styled-map::part(place-path-geoId\/06) {
fill-opacity: 1;
fill: #e76f51;
stroke: #b72a53;
stroke-width: 2px;
}
</style>
</head>
<body>
<datacommons-map
id="styled-map"
header="Three most populous US states"
parentPlace="country/USA"
childPlaceType="State"
variable="Count_Person"
></datacommons-map>
</body>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment