Skip to content

[Vis Tools] Add more examples to landing pages #5863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
juliawu wants to merge 12 commits into
base: master
Choose a base branch
from
Open

[Vis Tools] Add more examples to landing pages #5863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f931cab
Add more examples to map, start scatter
juliawu Dec 16, 2025
8e52d37
Add timeline links
juliawu Dec 18, 2025
ca04769
Merge branch 'master' of https://github.com/datacommonsorg/website in…
juliawu Dec 19, 2025
726312b
Remove broken links and improve wording
juliawu Dec 22, 2025
3a43719
Merge branch 'master' of https://github.com/datacommonsorg/website in…
juliawu Dec 22, 2025
d5126e3
lint
juliawu Dec 22, 2025
cf878e9
remove extra comma
juliawu Dec 22, 2025
2856f84
Merge branch 'master' of https://github.com/datacommonsorg/website in…
juliawu Dec 22, 2025
6fc8daa
Update static/js/i18n/i18n_tool_messages.ts
juliawu Jan 13, 2026
43fad05
Update static/js/i18n/i18n_tool_messages.ts
juliawu Jan 13, 2026
4371117
use "quality of life" and remove imperial county example
juliawu Jan 13, 2026
2c07c8e
Remove example with power plant installations, along with ppt param
juliawu Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 30 additions & 4 deletions static/js/i18n/i18n_tool_messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,10 +249,36 @@ export const VisToolExampleChartMessages = defineMessages({
description:
"Title of a line chart plotting the statistical variable 'income' in a set of towns known for having a university",
},
berkeleyAndPiedmontPoverty: {
id: "berkeley_and_piedmont_poverty",
defaultMessage: "Berkeley & Piedmont poverty",
closeButDifferentBerkeleyAndPiedmont: {
id: "close_but_different_berkeley_and_piedmont",
defaultMessage:
"Close but different: Quality of life indicators in Berkeley & Piedmont",
description:
"Title of a timeline showing the differences between Berkeley, USA and Piedmont, USA",
},
projectedTemperatureRiseInUsa: {
Copy link
Contributor

@clincoln8 clincoln8 Jan 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that this chart shows a per capita option which I don't think makes sense -- https://screenshot.googleplex.com/AjXTGCvVRkQ2Rvs

Is this something that could be addressed as a followup?

Copy link
Contributor Author

@juliawu juliawu Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll look into it as a follow-up! There's no built-in logic for when a per capita option is shown right now, and I think figuring out what heuristics we want to use to determine when to allow per-capita needs more discussion as a team.

id: "projected_temperature_rise_in_the_usa",
defaultMessage: "Projected temperature rise in the USA",
description:
"Title of a map plotting the statistical variable 'projected temperature rise' in counties of the USA",
},
medianAgeInUsa: {
id: "median_age_in_the_usa",
defaultMessage: "Median age in the USA",
description:
"Title of a map plotting the statistical variable 'median age' in counties of the USA",
},
noSchoolingCompletedInUsa: {
id: "no_schooling_completed_in_the_usa",
defaultMessage: "Population with no schooling completed in the USA",
description:
"Title of a map plotting the statistical variable 'no schooling completed' in counties of the USA",
},
closeButDifferentPaloAltoAndEastPaloAlto: {
id: "close_but_different_palo_alto_and_east_palo_alto",
defaultMessage:
"Close but different: Quality of life indicators in Palo Alto & East Palo Alto",
description:
"Title of a line chart plotting the statistical variable 'poverty' for both Berkeley, USA and Piedmont, USA",
"Title of a timeline showing the differences between Palo Alto and East Palo Alto",
},
});
8 changes: 2 additions & 6 deletions static/js/tools/map/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const URL_PARAM_DOMAIN_SEPARATOR = ":";
export const URL_PARAM_KEYS = {
SELECTED_PLACE_DCID: "pd",
ENCLOSED_PLACE_TYPE: "ept",
MAP_POINTS_PLACE_TYPE: "ppt",
DEPRECATED_MAP_POINTS_PLACE_TYPE: "ppt", // This param key is deprecated, but we keep it to prevent reusing it for something else.
PER_CAPITA: "pc",
STAT_VAR_DCID: "sv",
DATE: "dt",
Expand Down Expand Up @@ -297,7 +297,6 @@ export function applyHashStatVar(params: URLSearchParams): StatVar {
export function applyHashPlaceInfo(params: URLSearchParams): PlaceInfo {
const selectedPlaceDcid = params.get(URL_PARAM_KEYS.SELECTED_PLACE_DCID);
const enclosedPlaceType = params.get(URL_PARAM_KEYS.ENCLOSED_PLACE_TYPE);
const mapPointPlaceType = params.get(URL_PARAM_KEYS.MAP_POINTS_PLACE_TYPE);
return {
selectedPlace: {
dcid: selectedPlaceDcid ? selectedPlaceDcid : "",
Expand All @@ -310,7 +309,7 @@ export function applyHashPlaceInfo(params: URLSearchParams): PlaceInfo {
},
enclosedPlaceType: enclosedPlaceType ? enclosedPlaceType : "",
parentPlaces: null,
mapPointPlaceType: mapPointPlaceType ? mapPointPlaceType : "",
mapPointPlaceType: "",
};
}

Expand Down Expand Up @@ -390,9 +389,6 @@ export function updateHashPlaceInfo(
if (!_.isEmpty(placeInfo.enclosedPlaceType)) {
params = `${params}&${URL_PARAM_KEYS.ENCLOSED_PLACE_TYPE}=${placeInfo.enclosedPlaceType}`;
}
if (!_.isEmpty(placeInfo.mapPointPlaceType)) {
params = `${params}&${URL_PARAM_KEYS.MAP_POINTS_PLACE_TYPE}=${placeInfo.mapPointPlaceType}`;
}
return hash + params;
}

Expand Down
32 changes: 29 additions & 3 deletions static/js/tools/shared/vis_tools/landing_page_example_links.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,25 @@ export const landingPageLinks: LandingPageLinkConfig = {
),
url: "/tools/map#%26sv%3DCount_Person_EducationalAttainmentBachelorsDegreeOrHigher%26pc%3D1%26denom%3DCount_Person%26pd%3DgeoId%2F08%26ept%3DCounty",
},
{
id: "map_projected_temperature_rise_in_the_usa",
title: intl.formatMessage(
VisToolExampleChartMessages.projectedTemperatureRiseInUsa
),
url: "/tools/map#%26sv%3DDifferenceRelativeToBaseDate2006_Max_Temperature_RCP45%26pc%3D0%26denom%3DCount_Person%26pd%3Dcountry%2FUSA%26ept%3DCounty",
},
{
id: "map_median_age_in_usa",
title: intl.formatMessage(VisToolExampleChartMessages.medianAgeInUsa),
url: "/tools/map#%26sv%3DMedian_Age_Person%26pc%3D0%26denom%3DCount_Person%26pd%3Dcountry%2FUSA%26ept%3DCounty",
},
{
id: "map_no_schooling_completed_in_usa",
title: intl.formatMessage(
VisToolExampleChartMessages.noSchoolingCompletedInUsa
),
url: "/tools/map#%26sv%3DCount_Person_EducationalAttainmentNoSchoolingCompleted%26pc%3D0%26denom%3DCount_Person%26pd%3Dcountry%2FUSA%26ept%3DCounty",
},
],
scatterLinks: [
{
Expand Down Expand Up @@ -91,11 +110,18 @@ export const landingPageLinks: LandingPageLinkConfig = {
url: "/tools/timeline#&place=geoId/0606000,geoId/2511000,geoId/2603000,geoId/1777005,geoId/1225175,geoId/4815976&statsVar=Median_Income_Person",
},
{
id: "timeline_berkeley_and_piedmont_poverty",
id: "timeline_close_but_different_berkeley_and_piedmont",
title: intl.formatMessage(
VisToolExampleChartMessages.closeButDifferentBerkeleyAndPiedmont
),
url: "/tools/timeline#place=geoId%2F0606000%2CgeoId%2F0656938&statsVar=Median_Income_Person__Percent_Person_18OrMoreYears_WithPoorGeneralHealth__Monthly_Median_GrossRent_HousingUnit__Count_CriminalActivities_CombinedCrime&chart=%7B%22count-none%22%3A%7B%22pc%22%3Afalse%2C%22delta%22%3Afalse%7D%2C%22age-none%22%3A%7B%22pc%22%3Afalse%2C%22delta%22%3Afalse%7D%2C%22grossRent-none%22%3A%7B%22pc%22%3Afalse%2C%22delta%22%3Afalse%7D%2C%22unemploymentRate-none%22%3A%7B%22pc%22%3Afalse%2C%22delta%22%3Afalse%7D%7D",
},
{
id: "timeline_close_but_different_palo_alto_and_east_palo_alto",
title: intl.formatMessage(
VisToolExampleChartMessages.berkeleyAndPiedmontPoverty
VisToolExampleChartMessages.closeButDifferentPaloAltoAndEastPaloAlto
),
url: '/tools/timeline#place=geoId%2F0606000%2CgeoId%2F0656938&statsVar=Count_Person_BelowPovertyLevelInThePast12Months&chart=%7B"count"%3A%7B"pc"%3Atrue%2C"denom"%3A"Count_Person"%7D%7D',
url: "/tools/timeline#place=geoId%2F0655282%2CgeoId%2F0620956&statsVar=Median_Income_Person__UnemploymentRate_Person__Count_Person_HispanicOrLatino__Count_Person_AsianAlone__Count_Person_BlackOrAfricanAmericanAlone__Count_Person_WhiteAlone__Percent_Person_18OrMoreYears_WithPoorGeneralHealth__Monthly_Median_GrossRent_HousingUnit&chart=%7B%22count-none%22%3A%7B%22pc%22%3Afalse%2C%22delta%22%3Afalse%7D%2C%22age-none%22%3A%7B%22pc%22%3Afalse%2C%22delta%22%3Afalse%7D%2C%22grossRent-none%22%3A%7B%22pc%22%3Afalse%2C%22delta%22%3Afalse%7D%7D",
},
],
};
Loading