bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 05:18:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add arrowheads to narrative lines

Browse Source
This commit is contained in:
Franc Camps-Febrer
2018-12-16 13:01:04 +01:00
committed by Lachlan Kermode
parent bcc70a57f6
commit 470ef65617
3 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Toolbar.jsx
View File

@@ -59,8 +59,8 @@ class Toolbar extends React.Component {
renderToolbarNarrativePanel() {
return (
<TabPanel>
<h2>Focus stories</h2>
<p>Here are some highlighted stories</p>
<h2>{copy[this.props.language].toolbar.narrative_panel_title}</h2>
<p>{copy[this.props.language].toolbar.narrative_summary}</p>
{this.props.narratives.map((narr) => {
return (
<div className="panel-action action">

4
src/js/data/copy.json
View File

@@ -103,7 +103,9 @@
"title": "Directory of tags",
"placeholder": "Search"
}
}
},
"narrative_panel_title": "Focus narratives",
"narrative_summary": "Here you can follow some curated stories we have found in the data."
},
"timeline": {
"zooms": [

30
src/js/map/map.js
View File

@@ -98,10 +98,24 @@ Stop and start the development process in terminal after you have added your tok
.attr('viewBox', '0 0 6 6')
.attr('refX', 3)
.attr('refY', 3)
.attr('markerWidth', 14)
.attr('markerHeight', 14)
.attr('markerWidth', 6)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.append('path')
.style('fill', 'red')
.attr('d', 'M0,3v-3l6,3l-6,3z');
svg.insert('defs', 'g')
.append('marker-off')
.attr('id', 'arrow-off')
.attr('viewBox', '0 0 6 6')
.attr('refX', 3)
.attr('refY', 3)
.attr('markerWidth', 6)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.append('path')
.style('fill', 'black')
.attr('d', 'M0,3v-3l6,3l-6,3z');
map.on('zoomstart', () => {
@@ -366,6 +380,12 @@ Stop and start the development process in terminal after you have added your tok
.exit()
.remove();
const getMarker = (d) => {
if (!d || app.narrative === null) return 'none';
if (d.id !== app.narrative.id) return 'url(#arrow-off)';
return 'url(#arrow)';
}
narrativesDom
.enter().append('path')
.attr('class', 'narrative')
@@ -393,12 +413,18 @@ Stop and start the development process in terminal after you have added your tok
})
.style('fill', 'none')
.style('cursor', 'pointer')
.attr('marker-start', d => getMarker(d))
.attr('marker-end', d => getMarker(d))
.attr('mid-marker', d => getMarker(d))
.on('click', d => {
console.log(d)
});
narrativesDom
.attr('d', d => sequenceLine(d.steps))
.attr('marker-start', d => getMarker(d))
.attr('marker-end', d => getMarker(d))
.attr('mid-marker', d => getMarker(d))
.style('stroke', d => {
if (!d || app.narrative === null) return 'none';
if (d.id !== app.narrative.id) return '#232323';