Skip to content

Commit

Permalink
improve maps visualizations
Browse files Browse the repository at this point in the history
  • Loading branch information
@robindemourat
robindemourat committed Jul 25, 2024
1 parent 4cdac0f commit 572e56a
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 25 deletions.
1 change: 1 addition & 0 deletions public/data/reseau-ferre.geojson
View file

Large diffs are not rendered by default.

48 changes: 41 additions & 7 deletions src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,10 +198,15 @@ main .section {
}
}

.rivieres {
path {
stroke: blue;
fill: transparent;
// .rivieres {
// path {
// stroke: blue;
// fill: transparent;
// }
// }
.reseau-ferre {
path{
opacity: .1;
}
}

Expand Down Expand Up @@ -321,7 +326,7 @@ main .section {
.analysis-items-list {
padding: 0;
margin: 0;
overflow: auto;
// overflow: auto;
}
.analysis-item {
padding: 1rem;
Expand All @@ -346,7 +351,7 @@ main .section {
&.is-active {
background: rgba(200, 200, 200, 0.8);
.analysis-item-body {
max-height: 100vh;
max-height: 600vh;
}
&:hover {
background: rgba(200, 200, 200, 1);
Expand All @@ -358,7 +363,7 @@ main .section {
&.is-open {
background: rgba(230, 230, 230, 0.8);
.analysis-panel-body {
max-height: calc(100vh - 1rem);
max-height: calc(60vh - 1rem);
}
}
}
Expand Down Expand Up @@ -519,9 +524,34 @@ main .section {
}
}

.map-layer {
&.rivieres {
path {
stroke: blue;
fill: transparent;
}
}
&.reseau-ferre {
path {
stroke: grey;
stroke-dasharray: 4px;
fill: transparent;
}
}
&.cadastre {
path {
stroke: grey;
opacity: .1;
fill: transparent;
}
}

}

.Philippe-container {
max-height: 100vh;
.philippe {

.paths-container {
.path-group {
cursor: pointer;
Expand Down Expand Up @@ -550,5 +580,9 @@ main .section {
stroke: none;
}
}

.video-container {
cursor: pointer;
}
}
}
85 changes: 72 additions & 13 deletions src/components/Philippe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,18 +53,47 @@ const Philippe = ({
const videoHeight = useMemo(() => videoWidth * .75, [videoWidth]);
const linearCapsulesXScale = useMemo(() => activeBalade ? scaleLinear().domain([0, activeBalade.durationInSeconds]).range([width - videoWidth, width]) : undefined, [activeBalade, width, videoWidth]);

const timecodeToPosition = useMemo(() => (seconds, datum) => {
if (datum) {
const coords = datum.geometry.features.reduce((res, f) => [...res, ...f.geometry.coordinates], []);
const line = lineString(coords);
const lineSizeInKm = length(line, { units: 'kilometers' });
const relPosKm = seconds / datum.durationInSeconds * lineSizeInKm;
const pointPosition = along(line, relPosKm, { units: 'kilometers' }).geometry.coordinates;
const timecodeToPosition = useMemo(() => (seconds, balade) => {
if (balade) {
const segments = balade.geometry.features.map(feature => {
const { geometry: { coordinates } } = feature;
const line = lineString(coordinates);
const sizeInKm = length(line, { units: 'kilometers' });
return {
line,
sizeInKm
}
});
const sumInKm = segments.reduce((sum, s) => sum + s.sizeInKm, 0);
const relPosKm = seconds / balade.durationInSeconds * sumInKm;
let kmCount = 0;
let segmentIndex = 0;
let pointPosition = [0, 0];
while (kmCount < relPosKm && segmentIndex < segments.length) {
const thatSegment = segments[segmentIndex];
const thatSize = thatSegment.sizeInKm;
if (kmCount + thatSize > relPosKm) {
const relKm = relPosKm - kmCount;
pointPosition = along(thatSegment.line, relKm, { units: 'kilometers' }).geometry.coordinates;
break;
} else {
kmCount += thatSize;
segmentIndex += 1;
}
}
// continuous version
// const coords = balade.geometry.features.reduce((res, f) => [...res, ...f.geometry.coordinates], []);
// const line = lineString(coords);
// const lineSizeInKm = length(line, { units: 'kilometers' });
// const relPosKm = seconds / balade.durationInSeconds * lineSizeInKm;
// const pointPosition = along(line, relPosKm, { units: 'kilometers' }).geometry.coordinates;
return pointPosition;
}
return [0, 0]
}, []);

const rivieres = useMemo(() => inputData && inputData['reseau-hydrographique.geojson'], [inputData]);
const reseau = useMemo(() => inputData && inputData['reseau-ferre.geojson'], [inputData]);
const data = useMemo(() => {
if (!inputData) { return undefined; }
const capsules = inputData['timecode_capsules_oiseaux.csv'].filter(c => c.caché === '');
Expand Down Expand Up @@ -115,9 +144,9 @@ const Philippe = ({
const pointPosition = timecodeToPosition(playedSeconds, activeBalade);
setBaladeCoordinates(pointPosition);
}
if (!isPlaying) {
setIsPlaying(true)
}
// if (!isPlaying) {
// setIsPlaying(true)
// }
}
return (
<section id={id} className="section philippe">
Expand All @@ -139,6 +168,33 @@ const Philippe = ({
{
data && activeBalade ?
<>
<g className={`rivieres map-layer`}>
{
rivieres.features.map((feature, id) => {
return (
<path
key={id}
// title={feature.properties.objectid}
d={project(feature)}
/>
)
})
}
</g>
<g className={`reseau-ferre map-layer`}>
{
reseau.features.map((feature, id) => {
return (
<path
key={id}
// title={feature.properties.objectid}
d={project(feature)}
/>
)
})
}
</g>

<g className="paths-container">
{
data.map(datum => {
Expand Down Expand Up @@ -199,6 +255,9 @@ const Philippe = ({
>
<div xmlns="http://www.w3.org/1999/xhtml"
className={`video-container`}
onClick={() => {
setIsPlaying(!isPlaying)
}}
>
<ReactPlayer
width={videoWidth}
Expand All @@ -208,9 +267,9 @@ const Philippe = ({
ref={playerRef}
playing={isPlaying}
onPlay={() => {
if (!isPlaying) {
setIsPlaying(true)
}
// if (!isPlaying) {
// setIsPlaying(true)
// }
}}
onPause={() => {
// if (isPlaying) {
Expand Down
16 changes: 15 additions & 1 deletion src/components/TweetsMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const TweetsMap = ({
if (!data) {
return []
}
return data['tweets-analyses.csv'].map(datum => {
return data['tweets-analyses.csv'].filter(d => d.titre).map(datum => {
const inferedStations = datum.segments.split('|').map(s => s.split(' à ').map(e => e.trim())).reduce((res, tuple) => [...res, ...tuple], []).filter(d => d);
const transformed = ['user_screen_names', 'stations', 'segments'].reduce((res, key) => ({
...res,
Expand Down Expand Up @@ -86,6 +86,7 @@ const TweetsMap = ({

const departements = useMemo(() => data && data['departements.geojson'], [data]);
const rivieres = useMemo(() => data && data['reseau-hydrographique.geojson'], [data]);
const reseauFerre = useMemo(() => data && data['reseau-ferre.geojson'], [data]);
/** dots data */
// const tweetsExtentByStation = useMemo(() => {
// return stations && extent(data['stations.csv'].map(datum => +datum.nbTweets));
Expand Down Expand Up @@ -161,6 +162,19 @@ const TweetsMap = ({
})
}
</g>
<g className={`reseau-ferre map-layer ${vizMode !== 'map' ? 'is-hidden' : ''}`}>
{
reseauFerre.features.map((feature, id) => {
return (
<Path
key={id}
// title={feature.properties.objectid}
d={project(feature)}
/>
)
})
}
</g>
<g className={`rivieres map-layer ${vizMode !== 'map' ? 'is-hidden' : ''}`}>
{
rivieres.features.map((feature, id) => {
Expand Down
6 changes: 3 additions & 3 deletions src/components/VoyageVideo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,9 @@ const VoyageVideo = ({
}
setCurrentSegment(positionnedSegment);
}
if (!isPlaying) {
setIsPlaying(true)
}
// if (!isPlaying) {
// setIsPlaying(true)
// }
}
return (
<div className="VoyageVideo">
Expand Down
3 changes: 2 additions & 1 deletion src/metadata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ export const datasets = [
'tweets-analyses.csv',
'twitter_and_stations_network.json',
'timecode_capsules_oiseaux.csv',
'lpo_walks.json'
'lpo_walks.json',
'reseau-ferre.geojson'
];

export const textsList = [
Expand Down

0 comments on commit 572e56a

Please sign in to comment.