Repository files navigation

activemaps

This is a repo that uses D3 and leaflet to animate travel surveys, now for the NYMTC Travel Survey and the new California Household Travel Survey.

sandiego

The survey is visualized in the following way:

  • Each dot represents a person from the survey. The size of the dots are scaled by the age of the person. Because of these scaling, sometimes you can see parents (big dot) moving with their children (small dot).
  • There is a time slider which can move time through a 24 hour period. from 1AM to 12AM the next day. In this way, the travel survey day(s) are visualized moving through time. Moving the time slider uses D3 to animate the positions of the people in the survey.
  • The mode of the most recent trip is used to color the circle representing each person. Note that "home" is also used as a default mode for people that haven't left home yet and so aren't yet assigned a mode.
  • The income classifications and active region can be modified with drop down menus.

bayarea

I strongly encourage setting up a new region for the region you live in and the data you're interested in.

The data format used by activemaps is extremely simple and an example few records is shown below. Simply include household id, person id, age, mode of trip, the arrival hour and the longitude-latitude for the location. Use the correct field names and batsmaps will use it automatically or email if you have trouble.

HHID,PERID,AGE,MODE,ARR_HR,XCORD,YCORD
1037752,1,45,6.0,5,-120.138422606053,39.46786662801739
1037752,1,45,3.0,9,-120.238422606053,38.48786662801739

Note that I name the files with the income category in the file name in order to get the drop down to work. Search for d3.csv in index.html and adjust the filename as needed. Also you might need to change lat-long for the bounding box (search for bounds in index.html) and the map centers for each region (search for centerd in index.html).

Really, if you get the data formatted, I will add the region to the current set of regions.

losangeles

============================

hovermaps.html is used to visualize the travel surveys as aggregate hovermaps - for the Bay Area this uses census tracts.

This map allows you to hover over the home tract and see the distribution of tracts (sum of trips) visited by people in that tract.

http://WEBROOT/activemaps/hovermaps.html

This map allows you to hover over the work tract and see the distribution of tracts (sum of people) that work in that tract.

http://WEBROOT/activemaps/hovermaps.html?file=bayarea_chts_worktractvolume

This map does the same as the first map but for the Mexico City region and survey. It's a bit slugging because there are 4x more tracts in Mexico City than the Bay Area.

http://localhost:63343/activemaps/hovermaps.html?region=mexicocity&file=mexcity_tractvolume

The following two links do the same thing for "superdistrict" geography instead of tracts:

http://localhost:63342/activemaps/hovermaps_sd.htmlhttp://localhost:63342/activemaps/hovermaps_sd.html?file=bayarea_chts_worktractvolume

This link allows you to see a custom created segment in activemaps (in this case the segment is the city of Ecatapec in Mexico city).

http://WEBROOT/activemaps/index.html?region=mexicocity&segment=ecatepec

About

Animated maps of NY regional travel survey (CA too)

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

activemaps

This is a repo that uses D3 and leaflet to animate travel surveys, now for the NYMTC Travel Survey and the new California Household Travel Survey.

sandiego

The survey is visualized in the following way:

  • Each dot represents a person from the survey. The size of the dots are scaled by the age of the person. Because of these scaling, sometimes you can see parents (big dot) moving with their children (small dot).
  • There is a time slider which can move time through a 24 hour period. from 1AM to 12AM the next day. In this way, the travel survey day(s) are visualized moving through time. Moving the time slider uses D3 to animate the positions of the people in the survey.
  • The mode of the most recent trip is used to color the circle representing each person. Note that "home" is also used as a default mode for people that haven't left home yet and so aren't yet assigned a mode.
  • The income classifications and active region can be modified with drop down menus.

bayarea

I strongly encourage setting up a new region for the region you live in and the data you're interested in.

The data format used by activemaps is extremely simple and an example few records is shown below. Simply include household id, person id, age, mode of trip, the arrival hour and the longitude-latitude for the location. Use the correct field names and batsmaps will use it automatically or email if you have trouble.

HHID,PERID,AGE,MODE,ARR_HR,XCORD,YCORD
1037752,1,45,6.0,5,-120.138422606053,39.46786662801739
1037752,1,45,3.0,9,-120.238422606053,38.48786662801739

Note that I name the files with the income category in the file name in order to get the drop down to work. Search for d3.csv in index.html and adjust the filename as needed. Also you might need to change lat-long for the bounding box (search for bounds in index.html) and the map centers for each region (search for centerd in index.html).

Really, if you get the data formatted, I will add the region to the current set of regions.

losangeles

============================

hovermaps.html is used to visualize the travel surveys as aggregate hovermaps - for the Bay Area this uses census tracts.

This map allows you to hover over the home tract and see the distribution of tracts (sum of trips) visited by people in that tract.

http://WEBROOT/activemaps/hovermaps.html

This map allows you to hover over the work tract and see the distribution of tracts (sum of people) that work in that tract.

http://WEBROOT/activemaps/hovermaps.html?file=bayarea_chts_worktractvolume

This map does the same as the first map but for the Mexico City region and survey. It's a bit slugging because there are 4x more tracts in Mexico City than the Bay Area.

http://localhost:63343/activemaps/hovermaps.html?region=mexicocity&file=mexcity_tractvolume

The following two links do the same thing for "superdistrict" geography instead of tracts:

http://localhost:63342/activemaps/hovermaps_sd.htmlhttp://localhost:63342/activemaps/hovermaps_sd.html?file=bayarea_chts_worktractvolume

This link allows you to see a custom created segment in activemaps (in this case the segment is the city of Ecatapec in Mexico city).

http://WEBROOT/activemaps/index.html?region=mexicocity&segment=ecatepec

About

Animated maps of NY regional travel survey (CA too)

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

activemaps

This is a repo that uses D3 and leaflet to animate travel surveys, now for the NYMTC Travel Survey and the new California Household Travel Survey.

sandiego

The survey is visualized in the following way:

  • Each dot represents a person from the survey. The size of the dots are scaled by the age of the person. Because of these scaling, sometimes you can see parents (big dot) moving with their children (small dot).
  • There is a time slider which can move time through a 24 hour period. from 1AM to 12AM the next day. In this way, the travel survey day(s) are visualized moving through time. Moving the time slider uses D3 to animate the positions of the people in the survey.
  • The mode of the most recent trip is used to color the circle representing each person. Note that "home" is also used as a default mode for people that haven't left home yet and so aren't yet assigned a mode.
  • The income classifications and active region can be modified with drop down menus.

bayarea

I strongly encourage setting up a new region for the region you live in and the data you're interested in.

The data format used by activemaps is extremely simple and an example few records is shown below. Simply include household id, person id, age, mode of trip, the arrival hour and the longitude-latitude for the location. Use the correct field names and batsmaps will use it automatically or email if you have trouble.

HHID,PERID,AGE,MODE,ARR_HR,XCORD,YCORD
1037752,1,45,6.0,5,-120.138422606053,39.46786662801739
1037752,1,45,3.0,9,-120.238422606053,38.48786662801739

Note that I name the files with the income category in the file name in order to get the drop down to work. Search for d3.csv in index.html and adjust the filename as needed. Also you might need to change lat-long for the bounding box (search for bounds in index.html) and the map centers for each region (search for centerd in index.html).

Really, if you get the data formatted, I will add the region to the current set of regions.

losangeles

============================

hovermaps.html is used to visualize the travel surveys as aggregate hovermaps - for the Bay Area this uses census tracts.

This map allows you to hover over the home tract and see the distribution of tracts (sum of trips) visited by people in that tract.

http://WEBROOT/activemaps/hovermaps.html

This map allows you to hover over the work tract and see the distribution of tracts (sum of people) that work in that tract.

http://WEBROOT/activemaps/hovermaps.html?file=bayarea_chts_worktractvolume

This map does the same as the first map but for the Mexico City region and survey. It's a bit slugging because there are 4x more tracts in Mexico City than the Bay Area.

http://localhost:63343/activemaps/hovermaps.html?region=mexicocity&file=mexcity_tractvolume

The following two links do the same thing for "superdistrict" geography instead of tracts:

http://localhost:63342/activemaps/hovermaps_sd.htmlhttp://localhost:63342/activemaps/hovermaps_sd.html?file=bayarea_chts_worktractvolume

This link allows you to see a custom created segment in activemaps (in this case the segment is the city of Ecatapec in Mexico city).

http://WEBROOT/activemaps/index.html?region=mexicocity&segment=ecatepec

About

Animated maps of NY regional travel survey (CA too)

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

activemaps

This is a repo that uses D3 and leaflet to animate travel surveys, now for the NYMTC Travel Survey and the new California Household Travel Survey.

sandiego

The survey is visualized in the following way:

  • Each dot represents a person from the survey. The size of the dots are scaled by the age of the person. Because of these scaling, sometimes you can see parents (big dot) moving with their children (small dot).
  • There is a time slider which can move time through a 24 hour period. from 1AM to 12AM the next day. In this way, the travel survey day(s) are visualized moving through time. Moving the time slider uses D3 to animate the positions of the people in the survey.
  • The mode of the most recent trip is used to color the circle representing each person. Note that "home" is also used as a default mode for people that haven't left home yet and so aren't yet assigned a mode.
  • The income classifications and active region can be modified with drop down menus.

bayarea

I strongly encourage setting up a new region for the region you live in and the data you're interested in.

The data format used by activemaps is extremely simple and an example few records is shown below. Simply include household id, person id, age, mode of trip, the arrival hour and the longitude-latitude for the location. Use the correct field names and batsmaps will use it automatically or email if you have trouble.

HHID,PERID,AGE,MODE,ARR_HR,XCORD,YCORD
1037752,1,45,6.0,5,-120.138422606053,39.46786662801739
1037752,1,45,3.0,9,-120.238422606053,38.48786662801739

Note that I name the files with the income category in the file name in order to get the drop down to work. Search for d3.csv in index.html and adjust the filename as needed. Also you might need to change lat-long for the bounding box (search for bounds in index.html) and the map centers for each region (search for centerd in index.html).

Really, if you get the data formatted, I will add the region to the current set of regions.

losangeles

============================

hovermaps.html is used to visualize the travel surveys as aggregate hovermaps - for the Bay Area this uses census tracts.

This map allows you to hover over the home tract and see the distribution of tracts (sum of trips) visited by people in that tract.

http://WEBROOT/activemaps/hovermaps.html

This map allows you to hover over the work tract and see the distribution of tracts (sum of people) that work in that tract.

http://WEBROOT/activemaps/hovermaps.html?file=bayarea_chts_worktractvolume

This map does the same as the first map but for the Mexico City region and survey. It's a bit slugging because there are 4x more tracts in Mexico City than the Bay Area.

http://localhost:63343/activemaps/hovermaps.html?region=mexicocity&file=mexcity_tractvolume

The following two links do the same thing for "superdistrict" geography instead of tracts:

http://localhost:63342/activemaps/hovermaps_sd.htmlhttp://localhost:63342/activemaps/hovermaps_sd.html?file=bayarea_chts_worktractvolume

This link allows you to see a custom created segment in activemaps (in this case the segment is the city of Ecatapec in Mexico city).

http://WEBROOT/activemaps/index.html?region=mexicocity&segment=ecatepec

About

Animated maps of NY regional travel survey (CA too)

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

activemaps

This is a repo that uses D3 and leaflet to animate travel surveys, now for the NYMTC Travel Survey and the new California Household Travel Survey.

sandiego

The survey is visualized in the following way:

  • Each dot represents a person from the survey. The size of the dots are scaled by the age of the person. Because of these scaling, sometimes you can see parents (big dot) moving with their children (small dot).
  • There is a time slider which can move time through a 24 hour period. from 1AM to 12AM the next day. In this way, the travel survey day(s) are visualized moving through time. Moving the time slider uses D3 to animate the positions of the people in the survey.
  • The mode of the most recent trip is used to color the circle representing each person. Note that "home" is also used as a default mode for people that haven't left home yet and so aren't yet assigned a mode.
  • The income classifications and active region can be modified with drop down menus.

bayarea

I strongly encourage setting up a new region for the region you live in and the data you're interested in.

The data format used by activemaps is extremely simple and an example few records is shown below. Simply include household id, person id, age, mode of trip, the arrival hour and the longitude-latitude for the location. Use the correct field names and batsmaps will use it automatically or email if you have trouble.

HHID,PERID,AGE,MODE,ARR_HR,XCORD,YCORD
1037752,1,45,6.0,5,-120.138422606053,39.46786662801739
1037752,1,45,3.0,9,-120.238422606053,38.48786662801739

Note that I name the files with the income category in the file name in order to get the drop down to work. Search for d3.csv in index.html and adjust the filename as needed. Also you might need to change lat-long for the bounding box (search for bounds in index.html) and the map centers for each region (search for centerd in index.html).

Really, if you get the data formatted, I will add the region to the current set of regions.

losangeles

============================

hovermaps.html is used to visualize the travel surveys as aggregate hovermaps - for the Bay Area this uses census tracts.

This map allows you to hover over the home tract and see the distribution of tracts (sum of trips) visited by people in that tract.

http://WEBROOT/activemaps/hovermaps.html

This map allows you to hover over the work tract and see the distribution of tracts (sum of people) that work in that tract.

http://WEBROOT/activemaps/hovermaps.html?file=bayarea_chts_worktractvolume

This map does the same as the first map but for the Mexico City region and survey. It's a bit slugging because there are 4x more tracts in Mexico City than the Bay Area.

http://localhost:63343/activemaps/hovermaps.html?region=mexicocity&file=mexcity_tractvolume

The following two links do the same thing for "superdistrict" geography instead of tracts:

http://localhost:63342/activemaps/hovermaps_sd.htmlhttp://localhost:63342/activemaps/hovermaps_sd.html?file=bayarea_chts_worktractvolume

This link allows you to see a custom created segment in activemaps (in this case the segment is the city of Ecatapec in Mexico city).

http://WEBROOT/activemaps/index.html?region=mexicocity&segment=ecatepec

About

Animated maps of NY regional travel survey (CA too)

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

activemaps

This is a repo that uses D3 and leaflet to animate travel surveys, now for the NYMTC Travel Survey and the new California Household Travel Survey.

sandiego

The survey is visualized in the following way:

  • Each dot represents a person from the survey. The size of the dots are scaled by the age of the person. Because of these scaling, sometimes you can see parents (big dot) moving with their children (small dot).
  • There is a time slider which can move time through a 24 hour period. from 1AM to 12AM the next day. In this way, the travel survey day(s) are visualized moving through time. Moving the time slider uses D3 to animate the positions of the people in the survey.
  • The mode of the most recent trip is used to color the circle representing each person. Note that "home" is also used as a default mode for people that haven't left home yet and so aren't yet assigned a mode.
  • The income classifications and active region can be modified with drop down menus.

bayarea

I strongly encourage setting up a new region for the region you live in and the data you're interested in.

The data format used by activemaps is extremely simple and an example few records is shown below. Simply include household id, person id, age, mode of trip, the arrival hour and the longitude-latitude for the location. Use the correct field names and batsmaps will use it automatically or email if you have trouble.

HHID,PERID,AGE,MODE,ARR_HR,XCORD,YCORD
1037752,1,45,6.0,5,-120.138422606053,39.46786662801739
1037752,1,45,3.0,9,-120.238422606053,38.48786662801739

Note that I name the files with the income category in the file name in order to get the drop down to work. Search for d3.csv in index.html and adjust the filename as needed. Also you might need to change lat-long for the bounding box (search for bounds in index.html) and the map centers for each region (search for centerd in index.html).

Really, if you get the data formatted, I will add the region to the current set of regions.

losangeles

============================

hovermaps.html is used to visualize the travel surveys as aggregate hovermaps - for the Bay Area this uses census tracts.

This map allows you to hover over the home tract and see the distribution of tracts (sum of trips) visited by people in that tract.

http://WEBROOT/activemaps/hovermaps.html

This map allows you to hover over the work tract and see the distribution of tracts (sum of people) that work in that tract.

http://WEBROOT/activemaps/hovermaps.html?file=bayarea_chts_worktractvolume

This map does the same as the first map but for the Mexico City region and survey. It's a bit slugging because there are 4x more tracts in Mexico City than the Bay Area.

http://localhost:63343/activemaps/hovermaps.html?region=mexicocity&file=mexcity_tractvolume

The following two links do the same thing for "superdistrict" geography instead of tracts:

http://localhost:63342/activemaps/hovermaps_sd.htmlhttp://localhost:63342/activemaps/hovermaps_sd.html?file=bayarea_chts_worktractvolume

This link allows you to see a custom created segment in activemaps (in this case the segment is the city of Ecatapec in Mexico city).

http://WEBROOT/activemaps/index.html?region=mexicocity&segment=ecatepec

About

Animated maps of NY regional travel survey (CA too)

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

activemaps

This is a repo that uses D3 and leaflet to animate travel surveys, now for the NYMTC Travel Survey and the new California Household Travel Survey.

sandiego

The survey is visualized in the following way:

  • Each dot represents a person from the survey. The size of the dots are scaled by the age of the person. Because of these scaling, sometimes you can see parents (big dot) moving with their children (small dot).
  • There is a time slider which can move time through a 24 hour period. from 1AM to 12AM the next day. In this way, the travel survey day(s) are visualized moving through time. Moving the time slider uses D3 to animate the positions of the people in the survey.
  • The mode of the most recent trip is used to color the circle representing each person. Note that "home" is also used as a default mode for people that haven't left home yet and so aren't yet assigned a mode.
  • The income classifications and active region can be modified with drop down menus.

bayarea

I strongly encourage setting up a new region for the region you live in and the data you're interested in.

The data format used by activemaps is extremely simple and an example few records is shown below. Simply include household id, person id, age, mode of trip, the arrival hour and the longitude-latitude for the location. Use the correct field names and batsmaps will use it automatically or email if you have trouble.

HHID,PERID,AGE,MODE,ARR_HR,XCORD,YCORD
1037752,1,45,6.0,5,-120.138422606053,39.46786662801739
1037752,1,45,3.0,9,-120.238422606053,38.48786662801739

Note that I name the files with the income category in the file name in order to get the drop down to work. Search for d3.csv in index.html and adjust the filename as needed. Also you might need to change lat-long for the bounding box (search for bounds in index.html) and the map centers for each region (search for centerd in index.html).

Really, if you get the data formatted, I will add the region to the current set of regions.

losangeles

============================

hovermaps.html is used to visualize the travel surveys as aggregate hovermaps - for the Bay Area this uses census tracts.

This map allows you to hover over the home tract and see the distribution of tracts (sum of trips) visited by people in that tract.

http://WEBROOT/activemaps/hovermaps.html

This map allows you to hover over the work tract and see the distribution of tracts (sum of people) that work in that tract.

http://WEBROOT/activemaps/hovermaps.html?file=bayarea_chts_worktractvolume

This map does the same as the first map but for the Mexico City region and survey. It's a bit slugging because there are 4x more tracts in Mexico City than the Bay Area.

http://localhost:63343/activemaps/hovermaps.html?region=mexicocity&file=mexcity_tractvolume

The following two links do the same thing for "superdistrict" geography instead of tracts:

http://localhost:63342/activemaps/hovermaps_sd.htmlhttp://localhost:63342/activemaps/hovermaps_sd.html?file=bayarea_chts_worktractvolume

This link allows you to see a custom created segment in activemaps (in this case the segment is the city of Ecatapec in Mexico city).

http://WEBROOT/activemaps/index.html?region=mexicocity&segment=ecatepec

About

Animated maps of NY regional travel survey (CA too)

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

activemaps

This is a repo that uses D3 and leaflet to animate travel surveys, now for the NYMTC Travel Survey and the new California Household Travel Survey.

sandiego

The survey is visualized in the following way:

  • Each dot represents a person from the survey. The size of the dots are scaled by the age of the person. Because of these scaling, sometimes you can see parents (big dot) moving with their children (small dot).
  • There is a time slider which can move time through a 24 hour period. from 1AM to 12AM the next day. In this way, the travel survey day(s) are visualized moving through time. Moving the time slider uses D3 to animate the positions of the people in the survey.
  • The mode of the most recent trip is used to color the circle representing each person. Note that "home" is also used as a default mode for people that haven't left home yet and so aren't yet assigned a mode.
  • The income classifications and active region can be modified with drop down menus.

bayarea

I strongly encourage setting up a new region for the region you live in and the data you're interested in.

The data format used by activemaps is extremely simple and an example few records is shown below. Simply include household id, person id, age, mode of trip, the arrival hour and the longitude-latitude for the location. Use the correct field names and batsmaps will use it automatically or email if you have trouble.

HHID,PERID,AGE,MODE,ARR_HR,XCORD,YCORD
1037752,1,45,6.0,5,-120.138422606053,39.46786662801739
1037752,1,45,3.0,9,-120.238422606053,38.48786662801739

Note that I name the files with the income category in the file name in order to get the drop down to work. Search for d3.csv in index.html and adjust the filename as needed. Also you might need to change lat-long for the bounding box (search for bounds in index.html) and the map centers for each region (search for centerd in index.html).

Really, if you get the data formatted, I will add the region to the current set of regions.

losangeles

============================

hovermaps.html is used to visualize the travel surveys as aggregate hovermaps - for the Bay Area this uses census tracts.

This map allows you to hover over the home tract and see the distribution of tracts (sum of trips) visited by people in that tract.

http://WEBROOT/activemaps/hovermaps.html

This map allows you to hover over the work tract and see the distribution of tracts (sum of people) that work in that tract.

http://WEBROOT/activemaps/hovermaps.html?file=bayarea_chts_worktractvolume

This map does the same as the first map but for the Mexico City region and survey. It's a bit slugging because there are 4x more tracts in Mexico City than the Bay Area.

http://localhost:63343/activemaps/hovermaps.html?region=mexicocity&file=mexcity_tractvolume

The following two links do the same thing for "superdistrict" geography instead of tracts:

http://localhost:63342/activemaps/hovermaps_sd.htmlhttp://localhost:63342/activemaps/hovermaps_sd.html?file=bayarea_chts_worktractvolume

This link allows you to see a custom created segment in activemaps (in this case the segment is the city of Ecatapec in Mexico city).

http://WEBROOT/activemaps/index.html?region=mexicocity&segment=ecatepec

About

Animated maps of NY regional travel survey (CA too)

Resources

Stars

1 star

Watchers

2 watching

Forks

Releases

Packages

Contributors

Languages