🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 163 (from laksa101)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa163.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://andrewmarsh.com/apps/staging/sunpath3d.html\')), getAhrefsUnparsedNoserviceFromURL(\'https://andrewmarsh.com/apps/staging/sunpath3d.html\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/andrewmarsh.com\/apps\/staging\/sunpath3d.html","crawl_time":1775512285,"first_indexed_time":1584711790,"http_code":200,"src_unparsed":"com,andrewmarsh!\/apps\/staging\/sunpath3d.html s443","src_root_hash":"1761964565450435363","history_drop_reason":null,"meta_title":"PD: 3D Sun-Path","meta_descriptions":["A dynamic 3D Sun-path experiment."],"attrs_boilerpipe_text":"Overview The aim of this app is to demonstrate the relationship between geographic\n                            location and solar position throughout the year. You can use the map to drag the location around\n                            and interactively see how the Sun-path diagram and shadow projections change. You can also directly\n                            relate the 3D Sun-path and day-length, as well as a range of different 2D Sun-path projections.\n                         Background This started out as an experiment to see just how responsive I could make\n                            the generation and display of 3D Sun-path diagrams and shadow projections using JavaScript and WebGL.\n                            I'm actually quite stunned as, even before any optimisation whatsoever, I found that I could build and\n                            rebuild the entire Sun-path mesh on every change in pretty well real time. Sure this was on an i7\n                            processor, but it meant that the core technologies were not going to be the kind of bottleneck\n                            that I thought they'd be.\n                         As it turned out, there was scope for some pretty fundamental optimisations, so now it's even quick\n                            enough on an iPad as well as most of my old Android tablets.\n                         SVG and WebGL The marriage of WebGL for 3D visualisation and SVG for 2D data presentation also turns out to be\n                            a pretty happy one. The core ideas when working in both are actually pretty similar - building up\n                            a set of visual components that are cached and rendered separately (OpenGL vertex buffer objects and\n                            SVG elements respectively). Any complex calculations in Javascript need only be done once to build\n                            up each visual component, or to rebuild if it physically changes. The actual rendering of that cached\n                            element is then done by a much faster lower-level process (OpenGL\/GPU and the SVG engine respectively).\n                         Optimsation Potential Thus, for the kinds of animated 2D charts I need, SVG seems to have much more optimisation potential\n                            than using a HTML5 canvas element. As the canvas element is pixel-based, any content change usually\n                            requires a full redraw of all chart components, each being re-described and\/or re-generated in\n                            your own Javascript code. If any components require complex calculation or involve detailed curves,\n                            you have to devise your own caching system as this all has to be redone for every redraw.\n                         With SVG charts, you only need to re-describe and\/or re-generate those components that actually\n                            change on each redraw. All other previously defined components are automatically re-rendered by\n                            the SVG engine, which is a core part of the browser itself (running as native code) so is\n                            significantly faster than working in Javascript.\n                         Thus, the key to fast animations is to offload as much work as possible onto the SVG engine, or\n                            even the browser rendering engine. This can be done by, for example, transforming components instead\n                            of regenerating them, using CSS3 animations and transitions, interpolating between pre-built elements\n                            instead of regenerating new elements each time, etc. For me, this is the really fun bit as you often\n                            have to completely rethink how to do things before you finally get that vital Eureka moment.\n                         © Dr. Andrew J. Marsh, 2014. View Manipulation You can interactively adjust the 3D view of the model using a  mouse ,\n                             pen  or  stylus , or by  touch  on a tablet or phone.\n                            You can also use the items in the  3D View Settings  popup. Rotation: Drag with the  left\/right button  or a  single finger ,\n                                 or use the  arrow  keys. Panning: Drag with the  middle button  or  two\/three fingers ,\n                                 or use the  A  and  D  keys. Zooming: Use the  scroll wheel  or  pinch with two fingers ,\n                                 or use the  W  and  S  keys. NOTE: You can use the  Shift  and  Ctrl\/Meta  keys to adjust the increment\n                            of each scroll event or key press. Keyboard Modifiers The  Shift  and  Ctrl\/Meta  keys are used pretty extensively\n                            to modify interactive data entry. This applies to all increment buttons, scroll wheel motion,\n                            slider controls and input elements. Shift Key: Increases input to larger values, usually by ten times or significantly larger increments\n                                such as 1 month for dates and 1 hour for times. Ctrl or Meta Key: Decreases input to smaller values, usually by one tenth or the smallest reasonable increment\n                                such as 1 day for dates or 1 minute for times. NOTE: You can use the  scroll wheel  to edit a data value when hovering over any slider,\n                            numeric input or even table rows that indicate their editibility.","attrs_markdown":"![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/3\/2.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/3\/1.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/2\/2.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/4\/2.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/3\/3.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/2\/1.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/4\/1.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/2\/3.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/4\/3.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/3\/0.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/3\/4.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/2\/0.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/4\/0.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/2\/4.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/4\/4.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/3\/5.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/2\/5.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/4\/5.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/3\/6.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/2\/6.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/4\/6.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/3\/7.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/2\/7.png)![](https:\/\/maps.wikimedia.org\/osm-intl\/3\/4\/7.png)\n\n![](https:\/\/unpkg.com\/leaflet@1.4.0\/dist\/images\/marker-shadow.png)\n\n![](https:\/\/unpkg.com\/leaflet@1.4.0\/dist\/images\/marker-icon.png)\n\n[\\+](https:\/\/andrewmarsh.com\/apps\/staging\/sunpath3d.html \"Zoom in\")[−](https:\/\/andrewmarsh.com\/apps\/staging\/sunpath3d.html \"Zoom out\")\n\nNothing found.\n\n[Leaflet](http:\/\/leafletjs.com\/ \"A JS library for interactive maps\") \\| [Wikimedia maps](https:\/\/foundation.wikimedia.org\/wiki\/Maps_Terms_of_Use) \\| Map data © [OpenStreetMap contributors](https:\/\/www.openstreetmap.org\/copyright)\n\n54\\.15197000°, -4.48524000°\n\n00\n\n01\n\n02\n\n03\n\n04\n\n05\n\n06\n\n07\n\n08\n\n09\n\n10\n\n11\n\n12\n\n13\n\n14\n\n15\n\n16\n\n17\n\n18\n\n19\n\n20\n\n21\n\n22\n\n23\n\nFeb\n\nMar\n\nApr\n\nMay\n\nJun\n\nJul\n\nAug\n\nSep\n\nOct\n\nNov\n\nDec\n\n06:18\n\n18:33\n\n**GEOGRAPHIC LOCATION**\n\n|   |\n|---|\n| Latitude: 54\\.15197° |\n| Longitude: \\-4.48524° |\n| Timezone: GMT+00:00 |\n\n**DATE AND TIME**\n\n|   |\n|---|\n| Date: 21 Mar 2025 |\n| Time: 10:30 |\n\n**SOLAR INFORMATION**\n\n|   |   |\n|---|---|\n| Azi \/ Alt: | 145\\.66° \/ 31\\.21° |\n| Rise \/ Set: | 06:18 \/ 18:33 |\n| Daylight: | 12:15 Hrs |\n\n**TWILIGHT TIMES**\n\n|   |   |\n|---|---|\n| Civil: | 05:42 \/ 19:08 |\n| Nautical: | 05:00 \/ 19:51 |\n| Astronom.: | 04:16 \/ 20:35 |\n\nDAY-LENGTH\n\n- [Day-Length Chart]()\n- [Analemma Chart]()\n- [Cartesian Sun-Path]()\n- [Stereographic Sun-Path]()\n- [Equidistant Sun-Path]()\n- [Spherical Sun-Path]()\n\n## ANIMATION×\nAnimate Time\n\nAnimate Date\n***\nAnimate Latitude\n\nAnimate Longitude\n***\n##### Speed 10\\.0\n***\nDaytime Only\n\n## 3D VIEW SETTINGS×\n|   |   |   |\n|---|---|---|\n| Projection (Shortcut keys: 1 to 6) |   |   |\n|   | Fit to Canvas |   |\n\n|   |\n|---|\n| Eye Azimuth (CCW from +X Axis) |\n\n|   |\n|---|\n| Eye Altitude (Up from the horizontal) |\n\n|   |\n|---|\n| Field of View |\n\n## DISPLAY SETTINGS×\n|   |\n|---|\n| Surface Opacity |\n\n|   |\n|---|\n| Outline Opacity |\n\n|   |\n|---|\n| Material Shininess |\n\n|   |\n|---|\n| Ambient Light |\n\n## SUN-PATH SETTINGS×\n#### Indicators\nSun Position\n\nSun Direction\n\nSun Angles\n\nShadows\n\n#### Path Lines\nCurrent Day\n\nAnnual Lines\n\nAnnual Area\n\nBase Axis\n***\n|   |\n|---|\n| North Offset (CW from +Y Axis) |\n\n|   |\n|---|\n| Diagram Size (Relative to model) |\n\n## DATE AND TIME×\n|   |   |\n|---|---|\n| Useful Dates [Summer Solstice]() [Autumn\/Fall Equinox]() [Winter Solstice]() [Spring\/Vernal Equinox]() | Useful Times [Astronomical Twilight at Dawn]() [Nautical Twilight at Dawn]() [Civil Twilight at Dawn]() [Sunrise 06:18]() [Local Noon 12:00]() [Solar Noon 12:25]() [Sunset 18:33]() [Civil Twilight at Dusk]() [Nautical Twilight at Dusk]() [Astronomical Twilight at Dusk]() |\n***\n|   |\n|---|\n| Day of the Year |\n\nOrdinal day of the year: 79\n\n|   |\n|---|\n| Time of Day |\n\nSunrise: 06:18, Sunset: 18:33\n\n## GEOGRAPHIC LOCATION×\n***\n|   |\n|---|\n| Latitude |\n\n|   |\n|---|\n| Longitude |\n#### Time Zone\n\n## INFORMATION×\n- [About](https:\/\/andrewmarsh.com\/apps\/staging\/sunpath3d.html#tab-about)\n- [3D View](https:\/\/andrewmarsh.com\/apps\/staging\/sunpath3d.html#tab-model)\n- [Data Entry](https:\/\/andrewmarsh.com\/apps\/staging\/sunpath3d.html#tab-data)\n- [Credits](https:\/\/andrewmarsh.com\/apps\/staging\/sunpath3d.html#tab-credits)\n\n### Overview\nThe aim of this app is to demonstrate the relationship between geographic location and solar position throughout the year. You can use the map to drag the location around and interactively see how the Sun-path diagram and shadow projections change. You can also directly relate the 3D Sun-path and day-length, as well as a range of different 2D Sun-path projections.\n\n### Background\nThis started out as an experiment to see just how responsive I could make the generation and display of 3D Sun-path diagrams and shadow projections using JavaScript and WebGL. I'm actually quite stunned as, even before any optimisation whatsoever, I found that I could build and rebuild the entire Sun-path mesh on every change in pretty well real time. Sure this was on an i7 processor, but it meant that the core technologies were not going to be the kind of bottleneck that I thought they'd be.\n\nAs it turned out, there was scope for some pretty fundamental optimisations, so now it's even quick enough on an iPad as well as most of my old Android tablets.\n\n### SVG and WebGL\nThe marriage of WebGL for 3D visualisation and SVG for 2D data presentation also turns out to be a pretty happy one. The core ideas when working in both are actually pretty similar - building up a set of visual components that are cached and rendered separately (OpenGL vertex buffer objects and SVG elements respectively). Any complex calculations in Javascript need only be done once to build up each visual component, or to rebuild if it physically changes. The actual rendering of that cached element is then done by a much faster lower-level process (OpenGL\/GPU and the SVG engine respectively).\n\n#### Optimsation Potential\nThus, for the kinds of animated 2D charts I need, SVG seems to have much more optimisation potential than using a HTML5 canvas element. As the canvas element is pixel-based, any content change usually requires a full redraw of all chart components, each being re-described and\/or re-generated in your own Javascript code. If any components require complex calculation or involve detailed curves, you have to devise your own caching system as this all has to be redone for every redraw.\n\nWith SVG charts, you only need to re-describe and\/or re-generate those components that actually change on each redraw. All other previously defined components are automatically re-rendered by the SVG engine, which is a core part of the browser itself (running as native code) so is significantly faster than working in Javascript.\n\nThus, the key to fast animations is to offload as much work as possible onto the SVG engine, or even the browser rendering engine. This can be done by, for example, transforming components instead of regenerating them, using CSS3 animations and transitions, interpolating between pre-built elements instead of regenerating new elements each time, etc. For me, this is the really fun bit as you often have to completely rethink how to do things before you finally get that vital Eureka moment.\n\n[© Dr. Andrew J. Marsh, 2014.](http:\/\/andrewmarsh.com\/about)\n\n### View Manipulation\nYou can interactively adjust the 3D view of the model using a **mouse**, **pen** or **stylus**, or by **touch** on a tablet or phone. You can also use the items in the **3D View Settings** popup.\n\nRotation:\n\nDrag with the `left\/right button` or a `single finger`,   \nor use the `arrow` keys.\n\nPanning:\n\nDrag with the `middle button` or `two\/three fingers`,   \nor use the `A` and `D` keys.\n\nZooming:\n\nUse the `scroll wheel` or `pinch with two fingers`,   \nor use the `W` and `S` keys.\n***\nNOTE: You can use the `Shift` and `Ctrl\/Meta` keys to adjust the increment of each scroll event or key press.\n\n### Keyboard Modifiers\nThe `Shift` and `Ctrl\/Meta` keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.\n\nShift Key:\n\nIncreases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.\n\nCtrl or Meta Key:\n\nDecreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.\n***\nNOTE: You can use the `scroll wheel` to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.\n\n### Credits\nThis page uses the following frameworks\/components:\n\n**Bootstrap**  v3.3.2   \nCopyright © 2011-2015 Twitter, Inc. - github.com\/twbs,   \n<http:\/\/getbootstrap.com\/> ([LICENSE](https:\/\/github.com\/twbs\/bootstrap\/blob\/master\/LICENSE))\n\n**Bootstrap-popover-x** v1.4.0   \nCopyright © 2014, Kartik Visweswaran, Krajee.com,   \n<https:\/\/github.com\/kartik-v\/bootstrap-popover-x> ([LICENSE](https:\/\/github.com\/kartik-v\/bootstrap-popover-x\/blob\/master\/LICENSE.md))\n\n**D3.js**   \nCopyright © 2010-2015, Michael Bostock   \n<http:\/\/d3js.org> ([LICENSE](https:\/\/github.com\/mbostock\/d3\/blob\/master\/LICENSE))\n\n**jQuery** v1.11.2   \nCopyright © [jQuery Foundation](https:\/\/jquery.org\/) and other contributors,   \n<https:\/\/jquery.com\/> ([LICENSE](https:\/\/github.com\/jquery\/jquery\/blob\/master\/LICENSE.txt))\n\n**JSON Editor**   \nCopyright © 2015 Jos de Jong - github.com\/josdejong   \n<https:\/\/github.com\/josdejong\/jsoneditor\/> ([LICENSE](https:\/\/github.com\/josdejong\/jsoneditor\/blob\/master\/LICENSE))\n\n**JSURL**   \nCopyright © 2011 Bruno Jouhier - github.com\/Sage   \n<https:\/\/github.com\/Sage\/jsurl\/> ([LICENSE](https:\/\/en.wikipedia.org\/wiki\/MIT_License))\n\n**KnockoutJS** v3.2.0   \nCopyright © Steven Sanderson and the Knockout.js team,   \n<http:\/\/knockoutjs.com\/> ([LICENSE](https:\/\/github.com\/knockout\/knockout\/blob\/master\/LICENSE))\n\n**Knockstrap** v1.2.0   \nCopyright © 2013 Artem Stepanyuk - github.com\/faulknercs,   \n<http:\/\/faulknercs.github.io\/Knockstrap\/> ([LICENSE](https:\/\/github.com\/faulknercs\/Knockstrap\/blob\/master\/LICENSE.txt))\n\n**Leaflet Maps API** v1.4.0   \nCopyright © Cloudmade, Vladimir Agafonkin - github.com\/Leaflet,   \n<https:\/\/leafletjs.com\/> ([LICENSE](https:\/\/github.com\/Leaflet\/Leaflet\/blob\/master\/LICENSE))\n\n**OpenStreetMap Map Data**   \nCopyright © OpenStreetMap contributors - openstreetmap.org,   \n<https:\/\/www.openstreetmap.org\/about> ([LICENSE](https:\/\/www.openstreetmap.org\/copyright))\n\n**SnackbarJS**   \nCopyright © 2014 Federico Zivolo - github.com\/FezVrasta   \n<http:\/\/fezvrasta.github.io\/snackbarjs\/> ([LICENSE](https:\/\/github.com\/FezVrasta\/snackbarjs\/blob\/master\/LICENSE.md))\n\n**split-pane.js**   \nCopyright © 2014 Simon Hagström - github.com\/shagstrom   \n[https:\/\/github.com\/shagstrom\/split-pane\/](https:\/\/github.com\/shagstrom\/split-pane) ([LICENSE](https:\/\/github.com\/shagstrom\/split-pane\/blob\/master\/LICENSE))\n\n×\n\n#### Edit Settings as JSON\n```\n\n```\nText\n\nShare\n\nCancel\n\nRead Data\n\n×\n\n####\n\nAzimuth angles are calculated in a clockwise direction from due North.  \n Horizonal angles are taken anti-clockwise from the positive X-axis of the model.  \n Created by Sunpath3D v1.0 (andrewmarsh.com).\n\nClose\n\nSave as CSV...","attrs_readable_markdown":null,"meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

2 hours ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://andrewmarsh.com/apps/staging/sunpath3d.html
Last Crawled	2026-04-06 21:51:25 (2 hours ago)
First Indexed	2020-03-20 13:43:10 (6 years ago)
HTTP Status Code	200
Meta Title	PD: 3D Sun-Path
Meta Description	A dynamic 3D Sun-path experiment.
Meta Canonical	null
Boilerpipe Text	Overview The aim of this app is to demonstrate the relationship between geographic location and solar position throughout the year. You can use the map to drag the location around and interactively see how the Sun-path diagram and shadow projections change. You can also directly relate the 3D Sun-path and day-length, as well as a range of different 2D Sun-path projections. Background This started out as an experiment to see just how responsive I could make the generation and display of 3D Sun-path diagrams and shadow projections using JavaScript and WebGL. I'm actually quite stunned as, even before any optimisation whatsoever, I found that I could build and rebuild the entire Sun-path mesh on every change in pretty well real time. Sure this was on an i7 processor, but it meant that the core technologies were not going to be the kind of bottleneck that I thought they'd be. As it turned out, there was scope for some pretty fundamental optimisations, so now it's even quick enough on an iPad as well as most of my old Android tablets. SVG and WebGL The marriage of WebGL for 3D visualisation and SVG for 2D data presentation also turns out to be a pretty happy one. The core ideas when working in both are actually pretty similar - building up a set of visual components that are cached and rendered separately (OpenGL vertex buffer objects and SVG elements respectively). Any complex calculations in Javascript need only be done once to build up each visual component, or to rebuild if it physically changes. The actual rendering of that cached element is then done by a much faster lower-level process (OpenGL/GPU and the SVG engine respectively). Optimsation Potential Thus, for the kinds of animated 2D charts I need, SVG seems to have much more optimisation potential than using a HTML5 canvas element. As the canvas element is pixel-based, any content change usually requires a full redraw of all chart components, each being re-described and/or re-generated in your own Javascript code. If any components require complex calculation or involve detailed curves, you have to devise your own caching system as this all has to be redone for every redraw. With SVG charts, you only need to re-describe and/or re-generate those components that actually change on each redraw. All other previously defined components are automatically re-rendered by the SVG engine, which is a core part of the browser itself (running as native code) so is significantly faster than working in Javascript. Thus, the key to fast animations is to offload as much work as possible onto the SVG engine, or even the browser rendering engine. This can be done by, for example, transforming components instead of regenerating them, using CSS3 animations and transitions, interpolating between pre-built elements instead of regenerating new elements each time, etc. For me, this is the really fun bit as you often have to completely rethink how to do things before you finally get that vital Eureka moment. © Dr. Andrew J. Marsh, 2014. View Manipulation You can interactively adjust the 3D view of the model using a mouse , pen or stylus , or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup. Rotation: Drag with the left/right button or a single finger , or use the arrow keys. Panning: Drag with the middle button or two/three fingers , or use the A and D keys. Zooming: Use the scroll wheel or pinch with two fingers , or use the W and S keys. NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press. Keyboard Modifiers The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements. Shift Key: Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times. Ctrl or Meta Key: Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times. NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.
Markdown	![](https://maps.wikimedia.org/osm-intl/3/3/2.png)![](https://maps.wikimedia.org/osm-intl/3/3/1.png)![](https://maps.wikimedia.org/osm-intl/3/2/2.png)![](https://maps.wikimedia.org/osm-intl/3/4/2.png)![](https://maps.wikimedia.org/osm-intl/3/3/3.png)![](https://maps.wikimedia.org/osm-intl/3/2/1.png)![](https://maps.wikimedia.org/osm-intl/3/4/1.png)![](https://maps.wikimedia.org/osm-intl/3/2/3.png)![](https://maps.wikimedia.org/osm-intl/3/4/3.png)![](https://maps.wikimedia.org/osm-intl/3/3/0.png)![](https://maps.wikimedia.org/osm-intl/3/3/4.png)![](https://maps.wikimedia.org/osm-intl/3/2/0.png)![](https://maps.wikimedia.org/osm-intl/3/4/0.png)![](https://maps.wikimedia.org/osm-intl/3/2/4.png)![](https://maps.wikimedia.org/osm-intl/3/4/4.png)![](https://maps.wikimedia.org/osm-intl/3/3/5.png)![](https://maps.wikimedia.org/osm-intl/3/2/5.png)![](https://maps.wikimedia.org/osm-intl/3/4/5.png)![](https://maps.wikimedia.org/osm-intl/3/3/6.png)![](https://maps.wikimedia.org/osm-intl/3/2/6.png)![](https://maps.wikimedia.org/osm-intl/3/4/6.png)![](https://maps.wikimedia.org/osm-intl/3/3/7.png)![](https://maps.wikimedia.org/osm-intl/3/2/7.png)![](https://maps.wikimedia.org/osm-intl/3/4/7.png) ![](https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png) ![](https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png) [\+](https://andrewmarsh.com/apps/staging/sunpath3d.html "Zoom in")[−](https://andrewmarsh.com/apps/staging/sunpath3d.html "Zoom out") Nothing found. [Leaflet](http://leafletjs.com/ "A JS library for interactive maps") \\| [Wikimedia maps](https://foundation.wikimedia.org/wiki/Maps_Terms_of_Use) \\| Map data © [OpenStreetMap contributors](https://www.openstreetmap.org/copyright) 54\.15197000°, -4.48524000° 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 06:18 18:33 GEOGRAPHIC LOCATION \| \| \|---\| \| Latitude: 54\.15197° \| \| Longitude: \-4.48524° \| \| Timezone: GMT+00:00 \| DATE AND TIME \| \| \|---\| \| Date: 21 Mar 2025 \| \| Time: 10:30 \| SOLAR INFORMATION \| \| \| \|---\|---\| \| Azi / Alt: \| 145\.66° / 31\.21° \| \| Rise / Set: \| 06:18 / 18:33 \| \| Daylight: \| 12:15 Hrs \| TWILIGHT TIMES \| \| \| \|---\|---\| \| Civil: \| 05:42 / 19:08 \| \| Nautical: \| 05:00 / 19:51 \| \| Astronom.: \| 04:16 / 20:35 \| DAY-LENGTH - [Day-Length Chart]() - [Analemma Chart]() - [Cartesian Sun-Path]() - [Stereographic Sun-Path]() - [Equidistant Sun-Path]() - [Spherical Sun-Path]() ## ANIMATION× Animate Time Animate Date * Animate Latitude Animate Longitude * ##### Speed 10\.0 * Daytime Only ## 3D VIEW SETTINGS× \| \| \| \| \|---\|---\|---\| \| Projection (Shortcut keys: 1 to 6) \| \| \| \| \| Fit to Canvas \| \| \| \| \|---\| \| Eye Azimuth (CCW from +X Axis) \| \| \| \|---\| \| Eye Altitude (Up from the horizontal) \| \| \| \|---\| \| Field of View \| ## DISPLAY SETTINGS× \| \| \|---\| \| Surface Opacity \| \| \| \|---\| \| Outline Opacity \| \| \| \|---\| \| Material Shininess \| \| \| \|---\| \| Ambient Light \| ## SUN-PATH SETTINGS× #### Indicators Sun Position Sun Direction Sun Angles Shadows #### Path Lines Current Day Annual Lines Annual Area Base Axis * \| \| \|---\| \| North Offset (CW from +Y Axis) \| \| \| \|---\| \| Diagram Size (Relative to model) \| ## DATE AND TIME× \| \| \| \|---\|---\| \| Useful Dates [Summer Solstice]() [Autumn/Fall Equinox]() [Winter Solstice]() [Spring/Vernal Equinox]() \| Useful Times [Astronomical Twilight at Dawn]() [Nautical Twilight at Dawn]() [Civil Twilight at Dawn]() [Sunrise 06:18]() [Local Noon 12:00]() [Solar Noon 12:25]() [Sunset 18:33]() [Civil Twilight at Dusk]() [Nautical Twilight at Dusk]() [Astronomical Twilight at Dusk]() \| * \| \| \|---\| \| Day of the Year \| Ordinal day of the year: 79 \| \| \|---\| \| Time of Day \| Sunrise: 06:18, Sunset: 18:33 ## GEOGRAPHIC LOCATION× * \| \| \|---\| \| Latitude \| \| \| \|---\| \| Longitude \| #### Time Zone ## INFORMATION× - [About](https://andrewmarsh.com/apps/staging/sunpath3d.html#tab-about) - [3D View](https://andrewmarsh.com/apps/staging/sunpath3d.html#tab-model) - [Data Entry](https://andrewmarsh.com/apps/staging/sunpath3d.html#tab-data) - [Credits](https://andrewmarsh.com/apps/staging/sunpath3d.html#tab-credits) ### Overview The aim of this app is to demonstrate the relationship between geographic location and solar position throughout the year. You can use the map to drag the location around and interactively see how the Sun-path diagram and shadow projections change. You can also directly relate the 3D Sun-path and day-length, as well as a range of different 2D Sun-path projections. ### Background This started out as an experiment to see just how responsive I could make the generation and display of 3D Sun-path diagrams and shadow projections using JavaScript and WebGL. I'm actually quite stunned as, even before any optimisation whatsoever, I found that I could build and rebuild the entire Sun-path mesh on every change in pretty well real time. Sure this was on an i7 processor, but it meant that the core technologies were not going to be the kind of bottleneck that I thought they'd be. As it turned out, there was scope for some pretty fundamental optimisations, so now it's even quick enough on an iPad as well as most of my old Android tablets. ### SVG and WebGL The marriage of WebGL for 3D visualisation and SVG for 2D data presentation also turns out to be a pretty happy one. The core ideas when working in both are actually pretty similar - building up a set of visual components that are cached and rendered separately (OpenGL vertex buffer objects and SVG elements respectively). Any complex calculations in Javascript need only be done once to build up each visual component, or to rebuild if it physically changes. The actual rendering of that cached element is then done by a much faster lower-level process (OpenGL/GPU and the SVG engine respectively). #### Optimsation Potential Thus, for the kinds of animated 2D charts I need, SVG seems to have much more optimisation potential than using a HTML5 canvas element. As the canvas element is pixel-based, any content change usually requires a full redraw of all chart components, each being re-described and/or re-generated in your own Javascript code. If any components require complex calculation or involve detailed curves, you have to devise your own caching system as this all has to be redone for every redraw. With SVG charts, you only need to re-describe and/or re-generate those components that actually change on each redraw. All other previously defined components are automatically re-rendered by the SVG engine, which is a core part of the browser itself (running as native code) so is significantly faster than working in Javascript. Thus, the key to fast animations is to offload as much work as possible onto the SVG engine, or even the browser rendering engine. This can be done by, for example, transforming components instead of regenerating them, using CSS3 animations and transitions, interpolating between pre-built elements instead of regenerating new elements each time, etc. For me, this is the really fun bit as you often have to completely rethink how to do things before you finally get that vital Eureka moment. [© Dr. Andrew J. Marsh, 2014.](http://andrewmarsh.com/about) ### View Manipulation You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup. Rotation: Drag with the `left/right button` or a `single finger`, or use the `arrow` keys. Panning: Drag with the `middle button` or `two/three fingers`, or use the `A` and `D` keys. Zooming: Use the `scroll wheel` or `pinch with two fingers`, or use the `W` and `S` keys. * NOTE: You can use the `Shift` and `Ctrl/Meta` keys to adjust the increment of each scroll event or key press. ### Keyboard Modifiers The `Shift` and `Ctrl/Meta` keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements. Shift Key: Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times. Ctrl or Meta Key: Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times. * NOTE: You can use the `scroll wheel` to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility. ### Credits This page uses the following frameworks/components: Bootstrap v3.3.2 Copyright © 2011-2015 Twitter, Inc. - github.com/twbs, <http://getbootstrap.com/> ([LICENSE](https://github.com/twbs/bootstrap/blob/master/LICENSE)) Bootstrap-popover-x v1.4.0 Copyright © 2014, Kartik Visweswaran, Krajee.com, <https://github.com/kartik-v/bootstrap-popover-x> ([LICENSE](https://github.com/kartik-v/bootstrap-popover-x/blob/master/LICENSE.md)) D3.js Copyright © 2010-2015, Michael Bostock <http://d3js.org> ([LICENSE](https://github.com/mbostock/d3/blob/master/LICENSE)) jQuery v1.11.2 Copyright © [jQuery Foundation](https://jquery.org/) and other contributors, <https://jquery.com/> ([LICENSE](https://github.com/jquery/jquery/blob/master/LICENSE.txt)) JSON Editor Copyright © 2015 Jos de Jong - github.com/josdejong <https://github.com/josdejong/jsoneditor/> ([LICENSE](https://github.com/josdejong/jsoneditor/blob/master/LICENSE)) JSURL Copyright © 2011 Bruno Jouhier - github.com/Sage <https://github.com/Sage/jsurl/> ([LICENSE](https://en.wikipedia.org/wiki/MIT_License)) KnockoutJS v3.2.0 Copyright © Steven Sanderson and the Knockout.js team, <http://knockoutjs.com/> ([LICENSE](https://github.com/knockout/knockout/blob/master/LICENSE)) Knockstrap v1.2.0 Copyright © 2013 Artem Stepanyuk - github.com/faulknercs, <http://faulknercs.github.io/Knockstrap/> ([LICENSE](https://github.com/faulknercs/Knockstrap/blob/master/LICENSE.txt)) Leaflet Maps API v1.4.0 Copyright © Cloudmade, Vladimir Agafonkin - github.com/Leaflet, <https://leafletjs.com/> ([LICENSE](https://github.com/Leaflet/Leaflet/blob/master/LICENSE)) OpenStreetMap Map Data Copyright © OpenStreetMap contributors - openstreetmap.org, <https://www.openstreetmap.org/about> ([LICENSE](https://www.openstreetmap.org/copyright)) SnackbarJS Copyright © 2014 Federico Zivolo - github.com/FezVrasta <http://fezvrasta.github.io/snackbarjs/> ([LICENSE](https://github.com/FezVrasta/snackbarjs/blob/master/LICENSE.md)) split-pane.js Copyright © 2014 Simon Hagström - github.com/shagstrom [https://github.com/shagstrom/split-pane/](https://github.com/shagstrom/split-pane) ([LICENSE](https://github.com/shagstrom/split-pane/blob/master/LICENSE)) × #### Edit Settings as JSON ``` ``` Text Share Cancel Read Data × #### Azimuth angles are calculated in a clockwise direction from due North. Horizonal angles are taken anti-clockwise from the positive X-axis of the model. Created by Sunpath3D v1.0 (andrewmarsh.com). Close Save as CSV...
Readable Markdown	null
Shard	163 (laksa)
Root Hash	1761964565450435363
Unparsed URL	com,andrewmarsh!/apps/staging/sunpath3d.html s443