Skip to content
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

Jump to bottom

Improve Transportation diagrams with dark/light theme and Overture color palette #94

Merged
merged 1 commit into from
Dec 13, 2023
Merged

Improve Transportation diagrams with dark/light theme and Overture color palette #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 10 additions & 1 deletion docusaurus/docs/reference/transportation/segment.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import ExampleTurnRestrictionConnector1 from '!!raw-loader!@site/docs/_examples/
import ExampleTurnRestrictionConnector2 from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/turn-restriction-02-connector2.yaml';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';


# segment

Expand Down Expand Up @@ -131,7 +134,13 @@ The schema for `water` segments is under development.

<div style={{textAlign: 'center'}}>

![Diagram of the "via" transition from source to destination segment.](/img/transportation/turn-restriction-02.svg)
<ThemedImage
alt='Diagram of the "via" transition from source to destination segment'
sources={{
light: useBaseUrl('/img/transportation/turn-restriction-02-light.png'),
dark: useBaseUrl('/img/transportation/turn-restriction-02-dark.png'),
}}
/>

</div>

Expand Down
72 changes: 61 additions & 11 deletions docusaurus/docs/themes/transportation/roads.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import CodeBlock from '@theme/CodeBlock';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';
import ExampleAccessRestrictionsBlanketDeny from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/access-restriction-01-blanket.yaml';
import ExampleAccessRestrictionPrivateAccessWithDeliveries from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/access-restriction-02-private-with-deliveries.yaml';
import ExampleAccessRestrictionMotorVehiclesDestinationOnly from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/access-restriction-03-motor-vehicles-destination-only.yaml';
Expand Down Expand Up @@ -202,7 +204,13 @@ where the sequence of maneuvers is important.

<figure>

![A simple transition restriction prohibiting a right turn](/img/transportation/turn-restriction-01.svg)
<ThemedImage
alt="A simple transition restriction prohibiting a right turn"
sources={{
light: useBaseUrl('/img/transportation/turn-restriction-01-light.png'),
dark: useBaseUrl('/img/transportation/turn-restriction-01-dark.png'),
}}
/>

<figcaption>

Expand Down Expand Up @@ -284,7 +292,13 @@ real-world context to the example.*

<figure>

![A via restriction](/img/transportation/turn-restriction-02.svg)
<ThemedImage
alt="A via restriction"
sources={{
light: useBaseUrl('/img/transportation/turn-restriction-02-light.png'),
dark: useBaseUrl('/img/transportation/turn-restriction-02-dark.png'),
}}
/>

<figcaption>

Expand Down Expand Up @@ -439,27 +453,57 @@ respectively.

<div style={{ display: "flex", alignItems: "center" }}>

<div style={{ width: "24.625%", float: "left", textAlign: "center" }}>
<div style={{ width: "27%", float: "left", textAlign: "center" }}>

![West-oriented road segment with two lanes](/img/transportation/lane-number-01-west.svg)
<ThemedImage
alt='West-oriented road segment with two lanes'
sources={{
light: useBaseUrl('/img/transportation/lane-number-01-west-light.png'),
dark: useBaseUrl('/img/transportation/lane-number-01-west-dark.png'),
}}
/>

</div>

<div style={{ width: "24.625%", float: "left", textAlign: "center" }}>
<div style={{ width: "10px", float: "left" }}/>

![North-oriented road segment with two lanes](/img/transportation/lane-number-02-north.svg)
<div style={{ width: "23%", float: "left", textAlign: "center" }}>

<ThemedImage
alt='North-oriented road segment with two lanes'
sources={{
light: useBaseUrl('/img/transportation/lane-number-02-north-light.png'),
dark: useBaseUrl('/img/transportation/lane-number-02-north-dark.png'),
}}
/>

</div>

<div style={{ width: "24.625%", float: "left", textAlign: "center" }}>
<div style={{ width: "10px", float: "left" }}/>

<div style={{ width: "27%", float: "left", textAlign: "center" }}>

![East-oriented road segment with two lanes](/img/transportation/lane-number-03-east.svg)
<ThemedImage
alt='East-oriented road segment with two lanes'
sources={{
light: useBaseUrl('/img/transportation/lane-number-03-east-light.png'),
dark: useBaseUrl('/img/transportation/lane-number-03-east-dark.png'),
}}
/>

</div>

<div style={{ width: "24.625%", float: "left", textAlign: "center" }}>
<div style={{ width: "10px", float: "left" }}/>

<div style={{ width: "23%", float: "left", textAlign: "center" }}>

![East-oriented road segment with two lanes](/img/transportation/lane-number-04-south.svg)
<ThemedImage
alt='South-oriented road segment with two lanes'
sources={{
light: useBaseUrl('/img/transportation/lane-number-04-south-light.png'),
dark: useBaseUrl('/img/transportation/lane-number-04-south-dark.png'),
}}
/>

</div>

Expand Down Expand Up @@ -586,7 +630,13 @@ segments.

<figure>

![A segment with two geometrically-scoped lane blocks connected to a segment oriented in the opposite direction](/img/transportation/lane-blocks.svg)
<ThemedImage
alt='A segment with two geometrically-scoped lane blocks connected to a segment oriented in the opposite direction'
sources={{
light: useBaseUrl('/img/transportation/lane-blocks-light.png'),
dark: useBaseUrl('/img/transportation/lane-blocks-dark.png'),
}}
/>

<figcaption>

Expand Down
18 changes: 16 additions & 2 deletions docusaurus/docs/themes/transportation/scoping-rules.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import CodeBlock from '@theme/CodeBlock';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';
import ExampleGeometricScoping from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/geometric-scoping.yaml';
import ExampleTemporalScoping from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/temporal-scoping.yaml';
import ExampleSubjectiveUsagePurposeScoping from '!!raw-loader!@site/docs/_examples/transportation/docusaurus/subjective-usage-purpose-scoping.yaml';
Expand Down Expand Up @@ -60,7 +62,13 @@ start.

<figure>

![Diagram showing a single geometrically-scoped position.](/img/transportation/geometric-scoping-position.svg)
<ThemedImage
alt="Diagram showing a single geometrically-scoped position"
sources={{
light: useBaseUrl('/img/transportation/geometric-scoping-position-light.svg'),
dark: useBaseUrl('/img/transportation/geometric-scoping-position-dark.svg'),
}}
/>

<figcaption>

Expand All @@ -83,7 +91,13 @@ length from the start.

<figure>

![Diagram showing a geometrically-scoped range.](/img/transportation/geometric-scoping-range.svg)
<ThemedImage
alt="Diagram showing a geometrically-scoped range"
sources={{
light: useBaseUrl('/img/transportation/geometric-scoping-range-light.svg'),
dark: useBaseUrl('/img/transportation/geometric-scoping-range-dark.svg'),
}}
/>

<figcaption>

Expand Down
108 changes: 95 additions & 13 deletions docusaurus/docs/themes/transportation/shape-connectivity.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';

# Shape and Connectivity

The Overture Transportation theme captures the physical shape and connectivity
Expand All @@ -9,7 +12,13 @@ types: Segments and Connectors.

<figure>

![Three segments physically joined by a connector](/img/transportation/network.svg)
<ThemedImage
alt="Three segments physically joined by a connector"
sources={{
light: useBaseUrl('/img/transportation/network-light.png'),
dark: useBaseUrl('/img/transportation/network-dark.png'),
}}
/>

<figcaption>

Expand Down Expand Up @@ -96,14 +105,24 @@ coordinates:

<div style={{textAlign: 'center'}}>

![West-oriented segment geometry](/img/transportation/oriented-west.svg)
<ThemedImage
alt="West-oriented segment geometry"
sources={{
light: useBaseUrl('/img/transportation/oriented-west-light.svg'),
dark: useBaseUrl('/img/transportation/oriented-west-dark.svg'),
}}
/>

</div>

<figcaption>

<div style={{textAlign: 'center'}}>

*This segment geometry is oriented due west.*

</div>

</figcaption>
</figure>

Expand All @@ -123,14 +142,24 @@ coordinates:

<div style={{textAlign: 'center'}}>

![East-oriented segment geometry](/img/transportation/oriented-east.svg)
<ThemedImage
alt="East-oriented segment geometry"
sources={{
light: useBaseUrl('/img/transportation/oriented-east-light.svg'),
dark: useBaseUrl('/img/transportation/oriented-east-dark.svg'),
}}
/>

</div>

<figcaption>

<div style={{textAlign: 'center'}}>

*This segment geometry is oriented due east.*

</div>

</figcaption>
</figure>

Expand All @@ -150,7 +179,13 @@ back toward the start of the segment.

<figure>

![Travel heading along a segment oriented due east](/img/transportation/heading.svg)
<ThemedImage
alt="Travel heading along a segment oriented due east"
sources={{
light: useBaseUrl('/img/transportation/heading-light.svg'),
dark: useBaseUrl('/img/transportation/heading-dark.svg'),
}}
/>

<figcaption>

Expand Down Expand Up @@ -204,7 +239,13 @@ order than a greater number.

<figure>

![Three segments physically joined by a connector](/img/transportation/levels.svg)
<ThemedImage
alt="Level 0 segments stacked above level -1 segments"
sources={{
light: useBaseUrl('/img/transportation/level-light.png'),
dark: useBaseUrl('/img/transportation/level-dark.png'),
}}
/>

<figcaption>

Expand Down Expand Up @@ -292,14 +333,25 @@ segments remain as they were and no data needs to be re-conflated.

<div style={{ width: "50%", float: "left" , textAlign: "center" }}>

![A city block without with back alley omitted](/img/transportation/interior-connectors-before.svg)

<ThemedImage
alt="A city block without with back alley omitted"
sources={{
light: useBaseUrl('/img/transportation/interior-connectors-before-light.png'),
dark: useBaseUrl('/img/transportation/interior-connectors-before-dark.png'),
}}
/>

</div>

<div style={{ width: "50%", float: "right", textAlign: "center" }}>

![A city block without with back alley omitted](/img/transportation/interior-connectors-after.svg)
<ThemedImage
alt="A city block after adding a new back alley segment"
sources={{
light: useBaseUrl('/img/transportation/interior-connectors-after-light.png'),
dark: useBaseUrl('/img/transportation/interior-connectors-after-dark.png'),
}}
/>

</div>

Expand Down Expand Up @@ -341,7 +393,13 @@ less churn in conflated data.

<figure>

![A single segment with a geometrically-scoped speed limit](/img/transportation/geometrically-scoped-speed-limit.svg)
<ThemedImage
alt="A single segment with a geometrically-scoped speed limit"
sources={{
light: useBaseUrl('/img/transportation/geometrically-scoped-speed-limit-light.png'),
dark: useBaseUrl('/img/transportation/geometrically-scoped-speed-limit-dark.png'),
}}
/>

<figcaption>

Expand Down Expand Up @@ -370,13 +428,25 @@ can be corrected by splitting the segment into *N* pieces.

<div style={{width: "50%", float: "left"}}>

![Illegal circular loop](/img/transportation/circle-looped.svg)
<ThemedImage
alt="Illegal circular loop"
sources={{
light: useBaseUrl('/img/transportation/circle-looped-light.png'),
dark: useBaseUrl('/img/transportation/circle-looped-dark.png'),
}}
/>

</div>

<div style={{width: "50%", float: "left"}}>

![Illegal circular loop](/img/transportation/circle-unlooped.svg)
<ThemedImage
alt="One possible correction for illegal circular loop"
sources={{
light: useBaseUrl('/img/transportation/circle-unlooped-light.png'),
dark: useBaseUrl('/img/transportation/circle-unlooped-dark.png'),
}}
/>

</div>

Expand All @@ -402,13 +472,25 @@ can be corrected by splitting the segment into *N* pieces.

<div style={{width: "50%", float: "left"}}>

![Illegal self-crossing loop](/img/transportation/crossing-looped.svg)
<ThemedImage
alt="Illegal self-crossing loop"
sources={{
light: useBaseUrl('/img/transportation/crossing-looped-light.png'),
dark: useBaseUrl('/img/transportation/crossing-looped-dark.png'),
}}
/>

</div>

<div style={{width: "50%", float: "left"}}>

![Correction to self-crossing loop](/img/transportation/crossing-unlooped.svg)
<ThemedImage
alt="One possible correction to self-crossing loop"
sources={{
light: useBaseUrl('/img/transportation/crossing-unlooped-light.png'),
dark: useBaseUrl('/img/transportation/crossing-unlooped-dark.png'),
}}
/>

</div>

Expand Down
Loading
Loading