|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
@font-face { |
|
font-family: 'minecraft'; |
|
src: url('minecraft.ttf') format('truetype'); |
|
font-weight: normal; |
|
font-style: normal; |
|
} |
|
body { |
|
background: black; |
|
color: white; |
|
font: 12px sans-serif; |
|
margin: 0; |
|
} |
|
svg { |
|
background: #300; |
|
} |
|
form { |
|
position: absolute; |
|
top: 10px; |
|
left: 10px; |
|
} |
|
.fi { |
|
display: inline-block; |
|
font: 16px 'minecraft', monospace; |
|
margin-right: 1rem; |
|
margin-bottom: .5rem; |
|
} |
|
.fi input { |
|
width: 5em; |
|
font: inherit; |
|
color: inherit; |
|
background: transparent; |
|
text-align: right; |
|
border: 0; |
|
border-bottom: 1px solid white; |
|
} |
|
|
|
svg text { |
|
font: 10px 'minecraft', monospace; |
|
fill: white; |
|
text-anchor: middle; |
|
baseline-shift: 6px; |
|
shape-rendering: crispEdges |
|
} |
|
.pos rect { |
|
fill: #644; |
|
shape-rendering: crispEdges |
|
} |
|
.inside rect { |
|
fill: #888; |
|
} |
|
</style> |
|
<body> |
|
<form> |
|
<div class="fi"> |
|
<label for="x">X:</label> |
|
<input type="number" id="x" value="0" step="10"> |
|
</div> |
|
<div class="fi"> |
|
<label for="z">Z:</label> |
|
<input type="number" id="z" value="0" step="10"> |
|
</div> |
|
<br> |
|
<div class="fi"> |
|
<label for="d">MAX DISTANCE:</label> |
|
<input type="number" id="d" min="100" max="1000" step="100" value="500" > |
|
</div> |
|
</form> |
|
<svg width="960" height="500"></svg> |
|
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.js"></script> |
|
<script src="//d3js.org/d3.v4.min.js"></script> |
|
<script> |
|
|
|
var data; |
|
const sqrt = Math.sqrt; |
|
const pow = Math.pow; |
|
const abs = Math.abs; |
|
|
|
// no margins |
|
var svg = d3.select('svg'), |
|
width = +svg.attr('width'), |
|
height = +svg.attr('height'); |
|
|
|
const boxMax = Math.min(height - 30, width - 30); |
|
const d = [-1, 1]; |
|
const mWidth = (width - boxMax) / 2; |
|
const mHeight = (height - boxMax) / 2; |
|
const x = d3.scaleLinear().domain(d).range([0 + mWidth, boxMax + mWidth]); |
|
const y = d3.scaleLinear().domain(d).range([0 + mHeight, boxMax + mHeight]); |
|
|
|
if (0) { |
|
// show size |
|
var grid = 'rgba(255, 0, 0, .2)'; |
|
svg.append('rect') |
|
.attr('x', x(-1)) |
|
.attr('y', y(-1)) |
|
.attr('width', boxMax) |
|
.attr('height', boxMax) |
|
.style('fill', 'none') |
|
.style('stroke', grid); |
|
svg.append('line') |
|
.attr('x1', x(0)) |
|
.attr('x2', x(0)) |
|
.attr('y1', y(-1)) |
|
.attr('y2', y(1)) |
|
.style('stroke', grid); |
|
svg.append('line') |
|
.attr('x1', x(-1)) |
|
.attr('x2', x(1)) |
|
.attr('y1', y(0)) |
|
.attr('y2', y(0)) |
|
.style('stroke', grid); |
|
} |
|
|
|
var bounds = svg.append('circle') |
|
.attr('transform', d => `translate(${x(0)},${y(0)})`) |
|
.attr('fill', 'rgba(0,0,0,.2)') |
|
.attr('r', boxMax / 2); |
|
|
|
var center = svg.append('circle') |
|
.attr('transform', d => `translate(${x(0)},${y(0)})`) |
|
.attr('fill', 'none') |
|
.attr('stroke', 'white') |
|
.attr('stroke-width', .5) |
|
.attr('r', 2); |
|
|
|
var centerText = svg |
|
.append('text') |
|
.attr('transform', d => `translate(${x(0)},${y(0)})`); |
|
|
|
var cpos = svg.append('g'); |
|
|
|
svg.append('image') |
|
.attr('href', 'wither.png') |
|
.attr('x', 785) |
|
.attr('y', 345); |
|
|
|
function render () { |
|
var x1 = d3.select('#x').node().valueAsNumber; |
|
var z1 = d3.select('#z').node().valueAsNumber; |
|
var limit = d3.select('#d').node().valueAsNumber; |
|
|
|
x.domain([ -limit + x1, limit + x1 ]); |
|
y.domain([ -limit + z1, limit + z1 ]); |
|
center.attr('transform', d => `translate(${x(x1)},${y(z1)})`) |
|
|
|
const points = data.filter(d => { |
|
d.delta = sqrt(pow(d.x - x1, 2) + pow(d.z - z1, 2)); |
|
d.inside = d.delta < limit; |
|
return abs(x(d.x)) <= width && abs(y(d.z)) <= height; |
|
}); |
|
|
|
var br = 2; |
|
var p = cpos.selectAll('.pos').data(points, d => d.id); |
|
|
|
centerText.text(`${x1}, ${z1}`); |
|
|
|
p.exit().remove(); |
|
|
|
var pg = p.enter().append('g') |
|
.attr('pointer-events', 'all') |
|
.on('click', d => d.sticky = !d.sticky) |
|
.on('mouseenter', d => { |
|
const self = d3.select(d3.event.target); |
|
self.selectAll('text').remove(); |
|
self.append('text').text(d => `${d.x}, ${d.z}`); |
|
}) |
|
.on('mouseleave', d => { |
|
if (!d.sticky) { |
|
d3.select(d3.event.target).selectAll('text').remove(); |
|
} |
|
}); |
|
|
|
pg.append('circle') |
|
.attr('r', br*5) |
|
.attr('fill', 'none'); |
|
|
|
pg.append('rect') |
|
.attr('width', br*2) |
|
.attr('height', br*2) |
|
.attr('x', -br) |
|
.attr('y', -br); |
|
|
|
pg.filter(d => d.sticky) |
|
.append('text') |
|
.text(d => `${d.x}, ${d.z}`); |
|
|
|
pg.merge(p) |
|
.attr('class', d => `pos${d.inside ? ' inside': ''}`) |
|
.attr('transform', d => `translate(${x(d.x)},${y(d.z)})`); |
|
} |
|
|
|
function bootstrap ( err, _data ) { |
|
data = _data; |
|
d3.selectAll('#x, #z, #d').on('input', render); |
|
render(); |
|
} |
|
|
|
d3.csv('locations.csv') |
|
.row(row => ({ x: +row.x, z: +row.z })) |
|
.get(bootstrap); |
|
|
|
</script> |
