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 vertical line #39

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Improve vertical line #39

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion vertical-stepped-line/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@

<script type="text/javascript" src="https://unpkg.com/d3@4.13"></script>
<script type="text/javascript" src="https://unpkg.com/d3-jetpack"></script>
<script type="text/javascript" src="https://unpkg.com/d3-swoopy-drag"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.2.5/d3-annotation.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Expand Down
130 changes: 61 additions & 69 deletions vertical-stepped-line/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
const annotations = [
{
value: -100,
year: '2013/01',
path: 'M93,-26L93,36',
text: 'Arsenal buy Alexis Sánchez',
textOffset: [-25, -35],
},
];

// The config object passed by draw() gives us a width and height
const config = { width: 600, height: 550, mobileWidth: 300, mobileHeight: 300 };
const config = {
width: 600,
height: 550,
mobileWidth: 300,
mobileHeight: 300,
parseTime: d3.timeParse('%Y/%m'),
margin: { top: 30, right: 100, bottom: 100, left: 40 },
xScale: d3.scaleLinear(),
yScale: d3.scaleTime(),
line: d3.line().curve(d3.curveStepAfter),
xDomain: [-140, 140],
};
const isMobile = window.innerWidth < 600 ? true : false;
const margin = { top: 30, right: 100, bottom: 100, left: 40 },
width =
(isMobile ? config.mobileWidth : config.width) - margin.left - margin.right,
height =
(isMobile ? config.mobileHeight : config.height) -
margin.top -
margin.bottom;
const usableWidth =
(isMobile ? config.mobileWidth : config.width) -
config.margin.left -
config.margin.right;
const usableHeight =
(isMobile ? config.mobileHeight : config.height) -
config.margin.top -
config.margin.bottom;

// Clean up SVG container before drawing
d3.select('#times-vertical-line').html('');
Expand All @@ -27,76 +29,67 @@ const svg = d3.select('#times-vertical-line').at({
height: isMobile ? config.mobileHeight : config.height,
});

// Date parser
const parseTime = d3.timeParse('%Y/%m');

// Scales
const x = d3.scaleLinear().range([0, width]);
const y = d3.scaleTime().range([height, 0]);

// Line declaration
const line = d3
.line()
.x(d => x(d.value))
.y(d => y(d.year))
.curve(d3.curveStepAfter);
const line = config.line.x(d => x(d.value)).y(d => y(d.year));

// g is our container
const g = svg.append('g').translate([margin.left, margin.top]);
const g = svg.append('g').translate([config.margin.left, config.margin.top]);

d3.json('data.json', (err, dataset) => {
if (err) throw err;

const processedData = dataset.map(d =>
Object.assign({}, d, {
year: parseTime(d.year),
year: config.parseTime(d.year),
value: parseInt(d.value),
})
);

// Min, max values from dataset
// or computed for each club
const hardCordedDomain = [-140, 140];
const clubDomain = [
d3.min(processedData, d => d.value),
d3.max(processedData, d => d.value),
];

// Set domains
// Set scales
// Fixed values x-axis
x.domain(hardCordedDomain);
y.domain(d3.extent(processedData, d => d.year).reverse());
const x = config.xScale.range([0, usableWidth]).domain(config.xDomain);

const y = config.yScale
.range([usableHeight, 0])
.domain(d3.extent(processedData, d => d.year).reverse());

// X-axis
g
.append('g')
.at({ class: 'axis axis--x' })
.translate([30, height])
.translate([30, usableHeight])
.call(
d3
.axisBottom(x)
.ticks(isMobile ? 3 : 10)
.tickSize(-height, 0, 0)
.ticks(isMobile ? 3 : 7)
.tickSize(-usableHeight, 0, 0)
.tickPadding(10)
);

// text label for the x axis
g
.append('text')
.at({ class: 'label' })
.translate([x(0), height + 50])
.translate([x(0), usableHeight + 50])
.style('text-anchor', 'middle')
.text('Season balance (£m)');
g
.append('text')
.at({ class: 'label' })
.translate([x(0) - 20, margin.top - 55])
.translate([x(0) - 20, config.margin.top - 55])
.style('text-anchor', 'middle')
.text('⟵ Spent');
g
.append('text')
.at({ class: 'label' })
.translate([x(0) + 90, margin.top - 55])
.translate([x(0) + 90, config.margin.top - 55])
.style('text-anchor', 'middle')
.text('Received ⟶');

Expand All @@ -115,7 +108,7 @@ d3.json('data.json', (err, dataset) => {
x1: x(0),
y1: 0,
x2: x(0),
y2: height,
y2: usableHeight,
})
.translate([30, 0])
.style('stroke', '#666');
Expand All @@ -127,31 +120,30 @@ d3.json('data.json', (err, dataset) => {
.at({ class: 'line', d: line })
.translate([30, 0]);

// Annotations
var swoopy = d3
.swoopyDrag()
.x(d => x(d.value))
.y(d => y(parseTime(d.year)))
//.draggable(true)
.annotations(annotations);
// Annotation layer
const annotations = [
{
type: d3.annotation.annotationLabel,
note: {
title: 'Arsenal buy Alexis Sánchez',
label: '',
wrap: 100,
},
x: x(-65.05),
y: y(new Date('2014/01/01')),
dy: -50,
dx: 0,
},
];

if (!isMobile) {
var swoopySel = g
.append('g')
.attr('class', 'swoop')
.call(swoopy);
}

// SVG arrow marker fix
svg
.append('marker')
.attr('id', 'arrow')
.attr('viewBox', '-10 -10 20 20')
.attr('markerWidth', 6)
.attr('markerHeight', 6)
.attr('orient', 'auto')
.append('circle')
.attr('r', '6')
.style('fill', '#F37F2F');
swoopySel.selectAll('path').attr('marker-start', 'url(#arrow)');
// Include annotations
const makeAnnotations = d3
.annotation()
.type(d3.annotationLabel)
.annotations(annotations);
g
.append('g')
.attr('class', 'annotation-group')
.call(makeAnnotations)
.translate([30, 0]);
});
32 changes: 22 additions & 10 deletions vertical-stepped-line/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ svg {
padding: 25px;
overflow: visible;
display: flex;
background-color: #f7f8f1;
background-color: #f8f7f1;
}

.axis, .axis text, text {
font: 15px arial;
font: 15px GillSansMTStd-Medium, GillSansW01-Medium;
fill: #666;
color: #666;
}
Expand Down Expand Up @@ -35,13 +35,25 @@ svg {
stroke-width: 1px;
stroke-dasharray: 5;
}

.swoop path {
fill: none;
stroke: #F37F2F;
stroke-width: 2px;
.annotation path, .annotation-connector {
stroke: #E0AB26;
stroke-width: 2px;
fill: none;
}
.annotation path.connector-arrow,
.annotation path.connector-dot,
.title text, .annotation text {
fill: #E0AB26;
font: 13px GillSansMTStd-Medium, GillSansW01-Medium;
fill: #696969;
color: #696969;
}
.annotation-note-bg {
fill: rgba(0, 0, 0, 0);
}
.swoop text {
color:#F37F2F;
fill:#F37F2F;
.annotation-note-title, text.title {
font: 13px GillSansMTStd-Medium, GillSansW01-Medium;
fill: #696969;
color: #696969;
}
.annotation-note-content line { dispay: none; }