martinjc/.block

## .block
license: MIT
border: no

## README.md

      
                Raw

        
              README.md
            
          
    Multi-line path using D3, with label relaxation to avoid overlapping. Data is response rate for a survey, for different MSc programmes.

  
## data.csv

          
            date
            MSc Advanced Computer Science
            MSc Advanced Computer Science with Placement
            MSc Computing
            MSc Computing with Placement
            MSc Computing and IT Management
            MSc Computing and IT Management with Placement
            MSc Information Security and Privacy
            MSc Data Science and Analytics
            MSc Computational and Data Journalism

            
              2018-02-12
              0
              0
              0
              0
              0
              0
              0
              0
              0

            
              2018-02-19
              0
              0
              5.26
              0
              0
              0
              0
              2.56
              0

            
              2018-02-26
              0
              0
              5.26
              5.88
              0
              9.09
              0
              2.56
              7.14

            
              2018-03-05
              0
              5.88
              13.16
              5.88
              0
              9.09
              5.88
              7.69
              14.29

            
              2018-03-12
              6.25
              11.76
              21.05
              11.76
              8.33
              18.18
              29.41
              17.95
              35.71

            
              2018-03-19
              6.25
              29.41
              31.58
              29.41
              16.67
              18.18
              47.06
              23.08
              35.71

            
              2018-03-26
              6.25
              35.29
              39.47
              35.29
              16.67
              27.27
              58.82
              30.77
              50

            
              2018-04-02
              18.75
              41.18
              44.74
              35.29
              20.83
              45.45
              58.82
              30.77
              50

            
              2018-04-09
              18.75
              41.18
              44.74
              41.18
              20.83
              45.45
              58.82
              33.33
              50

            
              2018-04-16
              18.75
              41.18
              44.74
              41.18
              20.83
              45.45
              58.82
              35.9
              50

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//d3js.org/d3.v4.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>PTES Response Rates by Programme - 1718</title>
</head>
<body>
    <div id="vis"></div>
    <script src="script.js"></script>
</body>
</html>

## preview.png

      
                Raw

        
              preview.png
            
          
## script.js
/** Are you taking CMT212 by any chance? */

var width = 1100;
var height = 700;

var margin = {
    top: 40,
    left: 60,
    bottom: 40,
    right: 300
};

var parseTime = d3.timeParse("%Y-%m-%d");

var line = d3.line()
    .curve(d3.curveMonotoneX)
    .x(function(d) {
        return x_scale(d.date);
    })
    .y(function(d) {
        return y_scale(d.response);
    });

var svg = d3.select('#vis')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;

var x_scale = d3.scaleTime()
    .range([0, width]);

var y_scale = d3.scaleLinear()
    .range([height, 0]);

var colour_scale = d3.scaleOrdinal(d3.schemeCategory10);


var voronoi = d3.voronoi()
    .x(function(d) {
        return x_scale(d.date);
    })
    .y(function(d) {
        return y_scale(d.response);
    })
    .extent([
        [-margin.left, -margin.top],
        [width + margin.right, height + margin.bottom]
    ]);


svg.append("g")
    .attr("class", "axis x")
    .attr("transform", "translate(0," + height + ")");

svg.append("g")
    .attr("class", "axis y")


function relax(data) {
    var spacing = 16;
    var dy = 2;
    var repeat = false;
    var count = 0;
    data.forEach(function(dA, i) {
        var yA = dA.labelY;
        data.forEach(function(dB, j) {
            var yB = dB.labelY;
            if (i === j) {
                return;
            }
            diff = yA - yB;
            if (Math.abs(diff) > spacing) {
                return;
            }
            repeat = true;
            magnitude = diff > 0 ? 1 : -1;
            adjust = magnitude * dy;
            dA.labelY = +yA + adjust;
            dB.labelY = +yB - adjust;
            dB.labelY = dB.labelY > height ? height : dB.labelY
            dA.labelY = dA.labelY > height ? height : dA.labelY
        })
    })
    if (repeat) {
        relax(data);
    }
}

d3.csv('data.csv', function(d, i, columns) {
    d.date = parseTime(d.date);

    for (var i = 1; i < columns.length; ++i) {
        d[columns[i]] = +d[columns[i]];
    }

    return d;
}, function(data) {

    var responses = data.columns.slice(1)
        .map(function(id) {
            return {
                id: id,
                values: data.map(function(d) {
                    return {
                        date: d.date,
                        response: d[id]
                    };
                })
            };
        });

    x_scale.domain(d3.extent(data, function(d) {
        return d.date;
    }));

    y_scale.domain([
        d3.min(responses, function(r) {
            return d3.min(r.values, function(d) {
                return d.response;
            });
        }),
        d3.max(responses, function(r) {
            return d3.max(r.values, function(d) {
                return d.response;
            });
        })
    ]);

    responses.forEach(function(r) {
        r.labelY = y_scale(r.values[r.values.length - 1].response);
    });

    relax(responses);

    colour_scale.domain(responses.map(function(c) {
        return c.id;
    }));

    var response = svg.selectAll(".response")
        .data(responses)
        .enter()
        .append("g")
        .attr("class", "response");

    response.append("path")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(d.values);
        })
        .attr("stroke", function(d) {
            return colour_scale(d.id);
        })
        .attr("stroke-width", "3px")
        .attr("fill", "none");

    response.append("text")
        .datum(function(d) {
            return {
                id: d.id,
                value: d.values[d.values.length - 1],
                labelY: d.labelY
            };
        })
        .attr("transform", function(d) {
            return "translate(" + (x_scale(d.value.date) + 30) + "," + d.labelY + ")";
        })
        .attr("x", 3)
        .attr("dy", "0.35em")
        .attr("class", "label")
        .style("font", "10px sans-serif")
        .text(function(d) {
            return d.id;
        });

    var data = d3.merge(responses.map(function(d) {
        return d.values;
    }));

    var v = svg.selectAll(".voronoi")
        .data(voronoi.polygons(data));

    v.enter()
        .append("path")
        .attr("d", function(d, i) {
            return d ? "M" + d.join("L") + "Z" : null;
        })
        //.style("stroke", "#2074A0") //If you want to look at the cells
        .style("fill", "none")
        .style("pointer-events", "all")
        .on("mouseenter", function(d) {
            console.log(d3.mouse(svg));
            focus.attr("transform", "translate(" + x_scale(d.data.date) + "," + y_scale(d.data.response) + ")");
            focus.select("text")
                .text(d.data.response + "%");
        })
        .on("mouseout", function(d) {
            focus.attr("transform", "translate(-100,-100)");
        }, true);

    var markers = response.append('g')
        .attr('data-id', function(d) {
            return d.id;
        })
        .selectAll('circle')
        .data(function(d) {
            return d.values;
        });

    var new_markers = markers
        .enter()
        .append('circle')
        .attr('cx', function(d) {
            return x_scale(d.date);
        })
        .attr('cy', function(d) {
            return y_scale(d.response);
        })
        .attr('r', '5')
        .attr('fill', function(d) {
            return colour_scale(d3.select(this.parentNode)
                .attr('data-id'));
        })
        .attr('opacity', 0.8)
        .attr('stroke', '#222')
        .attr('stroke-width', '0.5px');

    var focus = svg.append("g")
        .attr("transform", "translate(-100,-100)")
        .attr("class", "focus");

    focus.append("circle")
        .attr("r", 3.5);

    focus.append("text")
        .attr("y", -10);

    var lines = svg.selectAll(".lines")
        .data(responses);

    lines.enter()
        .append("line")
        .attr("x1", function(d) {
            return x_scale(d.values[d.values.length - 1].date);
        })
        .attr("y1", function(d) {
            return y_scale(d.values[d.values.length - 1].response);
        })
        .attr("x2", function(d) {
            return x_scale(d.values[d.values.length - 1].date) + 30;
        })
        .attr("y2", function(d) {
            return d.labelY;
        })
        .attr('stroke', 'black')
        .attr('stroke-width', '0.5px');

    svg.select('.y.axis')
        .call(d3.axisLeft(y_scale))
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("fill", "#000")
        .text("Response Rate, %");

    svg.select('.x.axis .tick text')


    svg.select('.x.axis')
        .call(d3.axisBottom(x_scale)
            .ticks(d3.timeWeek))
        .selectAll('text')
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", "1.5em")
        .style("text-anchor", "end")
        .attr("transform", "rotate(-30)");
})

## style.css
html, body, #vis {
    height: 100%;
    margin: 0;
}

.focus text {
    text-anchor: middle;
    font-family: sans-serif;
}

svg text {
    pointer-events: none;
}

svg circle {
    pointer-events: none;
}

## thumbnail.png

      
                Raw

        
              thumbnail.png
date	MSc Advanced Computer Science	MSc Advanced Computer Science with Placement	MSc Computing	MSc Computing with Placement	MSc Computing and IT Management	MSc Computing and IT Management with Placement	MSc Information Security and Privacy	MSc Data Science and Analytics	MSc Computational and Data Journalism
2018-02-12	0	0	0	0	0	0	0	0	0
2018-02-19	0	0	5.26	0	0	0	0	2.56	0
2018-02-26	0	0	5.26	5.88	0	9.09	0	2.56	7.14
2018-03-05	0	5.88	13.16	5.88	0	9.09	5.88	7.69	14.29
2018-03-12	6.25	11.76	21.05	11.76	8.33	18.18	29.41	17.95	35.71
2018-03-19	6.25	29.41	31.58	29.41	16.67	18.18	47.06	23.08	35.71
2018-03-26	6.25	35.29	39.47	35.29	16.67	27.27	58.82	30.77	50
2018-04-02	18.75	41.18	44.74	35.29	20.83	45.45	58.82	30.77	50
2018-04-09	18.75	41.18	44.74	41.18	20.83	45.45	58.82	33.33	50
2018-04-16	18.75	41.18	44.74	41.18	20.83	45.45	58.82	35.9	50
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="//d3js.org/d3.v4.min.js"></script>
	<link rel="stylesheet" href="style.css">
	<title>PTES Response Rates by Programme - 1718</title>
	</head>
	<body>
	<div id="vis"></div>
	<script src="script.js"></script>
	</body>
	</html>
	/** Are you taking CMT212 by any chance? */

	var width = 1100;
	var height = 700;

	var margin = {
	top: 40,
	left: 60,
	bottom: 40,
	right: 300
	};

	var parseTime = d3.timeParse("%Y-%m-%d");

	var line = d3.line()
	.curve(d3.curveMonotoneX)
	.x(function(d) {
	return x_scale(d.date);
	})
	.y(function(d) {
	return y_scale(d.response);
	});

	var svg = d3.select('#vis')
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	width = width - margin.left - margin.right;
	height = height - margin.top - margin.bottom;

	var x_scale = d3.scaleTime()
	.range([0, width]);

	var y_scale = d3.scaleLinear()
	.range([height, 0]);

	var colour_scale = d3.scaleOrdinal(d3.schemeCategory10);


	var voronoi = d3.voronoi()
	.x(function(d) {
	return x_scale(d.date);
	})
	.y(function(d) {
	return y_scale(d.response);
	})
	.extent([
	[-margin.left, -margin.top],
	[width + margin.right, height + margin.bottom]
	]);


	svg.append("g")
	.attr("class", "axis x")
	.attr("transform", "translate(0," + height + ")");

	svg.append("g")
	.attr("class", "axis y")


	function relax(data) {
	var spacing = 16;
	var dy = 2;
	var repeat = false;
	var count = 0;
	data.forEach(function(dA, i) {
	var yA = dA.labelY;
	data.forEach(function(dB, j) {
	var yB = dB.labelY;
	if (i === j) {
	return;
	}
	diff = yA - yB;
	if (Math.abs(diff) > spacing) {
	return;
	}
	repeat = true;
	magnitude = diff > 0 ? 1 : -1;
	adjust = magnitude * dy;
	dA.labelY = +yA + adjust;
	dB.labelY = +yB - adjust;
	dB.labelY = dB.labelY > height ? height : dB.labelY
	dA.labelY = dA.labelY > height ? height : dA.labelY
	})
	})
	if (repeat) {
	relax(data);
	}
	}

	d3.csv('data.csv', function(d, i, columns) {
	d.date = parseTime(d.date);

	for (var i = 1; i < columns.length; ++i) {
	d[columns[i]] = +d[columns[i]];
	}

	return d;
	}, function(data) {

	var responses = data.columns.slice(1)
	.map(function(id) {
	return {
	id: id,
	values: data.map(function(d) {
	return {
	date: d.date,
	response: d[id]
	};
	})
	};
	});

	x_scale.domain(d3.extent(data, function(d) {
	return d.date;
	}));

	y_scale.domain([
	d3.min(responses, function(r) {
	return d3.min(r.values, function(d) {
	return d.response;
	});
	}),
	d3.max(responses, function(r) {
	return d3.max(r.values, function(d) {
	return d.response;
	});
	})
	]);

	responses.forEach(function(r) {
	r.labelY = y_scale(r.values[r.values.length - 1].response);
	});

	relax(responses);

	colour_scale.domain(responses.map(function(c) {
	return c.id;
	}));

	var response = svg.selectAll(".response")
	.data(responses)
	.enter()
	.append("g")
	.attr("class", "response");

	response.append("path")
	.attr("class", "line")
	.attr("d", function(d) {
	return line(d.values);
	})
	.attr("stroke", function(d) {
	return colour_scale(d.id);
	})
	.attr("stroke-width", "3px")
	.attr("fill", "none");

	response.append("text")
	.datum(function(d) {
	return {
	id: d.id,
	value: d.values[d.values.length - 1],
	labelY: d.labelY
	};
	})
	.attr("transform", function(d) {
	return "translate(" + (x_scale(d.value.date) + 30) + "," + d.labelY + ")";
	})
	.attr("x", 3)
	.attr("dy", "0.35em")
	.attr("class", "label")
	.style("font", "10px sans-serif")
	.text(function(d) {
	return d.id;
	});

	var data = d3.merge(responses.map(function(d) {
	return d.values;
	}));

	var v = svg.selectAll(".voronoi")
	.data(voronoi.polygons(data));

	v.enter()
	.append("path")
	.attr("d", function(d, i) {
	return d ? "M" + d.join("L") + "Z" : null;
	})
	//.style("stroke", "#2074A0") //If you want to look at the cells
	.style("fill", "none")
	.style("pointer-events", "all")
	.on("mouseenter", function(d) {
	console.log(d3.mouse(svg));
	focus.attr("transform", "translate(" + x_scale(d.data.date) + "," + y_scale(d.data.response) + ")");
	focus.select("text")
	.text(d.data.response + "%");
	})
	.on("mouseout", function(d) {
	focus.attr("transform", "translate(-100,-100)");
	}, true);

	var markers = response.append('g')
	.attr('data-id', function(d) {
	return d.id;
	})
	.selectAll('circle')
	.data(function(d) {
	return d.values;
	});

	var new_markers = markers
	.enter()
	.append('circle')
	.attr('cx', function(d) {
	return x_scale(d.date);
	})
	.attr('cy', function(d) {
	return y_scale(d.response);
	})
	.attr('r', '5')
	.attr('fill', function(d) {
	return colour_scale(d3.select(this.parentNode)
	.attr('data-id'));
	})
	.attr('opacity', 0.8)
	.attr('stroke', '#222')
	.attr('stroke-width', '0.5px');

	var focus = svg.append("g")
	.attr("transform", "translate(-100,-100)")
	.attr("class", "focus");

	focus.append("circle")
	.attr("r", 3.5);

	focus.append("text")
	.attr("y", -10);

	var lines = svg.selectAll(".lines")
	.data(responses);

	lines.enter()
	.append("line")
	.attr("x1", function(d) {
	return x_scale(d.values[d.values.length - 1].date);
	})
	.attr("y1", function(d) {
	return y_scale(d.values[d.values.length - 1].response);
	})
	.attr("x2", function(d) {
	return x_scale(d.values[d.values.length - 1].date) + 30;
	})
	.attr("y2", function(d) {
	return d.labelY;
	})
	.attr('stroke', 'black')
	.attr('stroke-width', '0.5px');

	svg.select('.y.axis')
	.call(d3.axisLeft(y_scale))
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("fill", "#000")
	.text("Response Rate, %");

	svg.select('.x.axis .tick text')


	svg.select('.x.axis')
	.call(d3.axisBottom(x_scale)
	.ticks(d3.timeWeek))
	.selectAll('text')
	.attr("y", 0)
	.attr("x", 9)
	.attr("dy", "1.5em")
	.style("text-anchor", "end")
	.attr("transform", "rotate(-30)");
	})
	html, body, #vis {
	height: 100%;
	margin: 0;
	}

	.focus text {
	text-anchor: middle;
	font-family: sans-serif;
	}

	svg text {
	pointer-events: none;
	}

	svg circle {
	pointer-events: none;
	}