{
const height = 500
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, 300]);
const xScale = d3.scaleLinear().domain([0, 68]).range([0, width]);
const yScale = d3.scaleLinear().domain([0, 105]).range([0, height]);
const line = svg.append('line')
.attr('x1', 50)
.attr('y1', 50)
.attr('x2', 250)
.attr('y2', 250)
.style('stroke', 'black')
.style('stroke-width', 20);
const line2 = svg.append('line')
.attr('x1', width/2)
.attr('y1', height/2)
.attr('x2', 50)
.attr('y2', 190)
.style('stroke', 'black')
.style('stroke-width', 20);
// const parallelogram = svg.append('polygon').attr('points', '5,55 500,55 400,30 5, 30')
// const rec = svg.append('rect')
// .attr('x', 0)
// .attr('y', 150)
// .attr('width', 300)
// .attr('height', 50);
const defs = svg.append('defs')
const linearGradient = defs.append('linearGradient')
.attr('id', 'linear-gradient');
const linearGradient2 = defs.append('linearGradient')
.attr('id', 'linear-gradient2');
function getGrad(d, i){
let ratio = (d.end_x - d.x) / (d.y - d.end_y);
let angle = Math.atan(ratio)*(180/Math.PI);
angle = 90 + angle.toFixed();
let defs = svg.append('defs');
let name = 'linear-gradient' + i;
console.log('the name is % the angle is %', name, angle);
let linearGradient = defs.append('linearGradient')
.attr('id', name)
.attr("gradientTransform", "rotate(" + angle + ")");
linearGradient.append('stop')
.attr('offset', '0%')
.attr('stop-color', 'blue');
linearGradient.append('stop')
.attr('offset', '100%')
.attr('stop-color', 'red');
return "url(#" + name + ")"
}
// circle.style('fill', 'url(#linear-gradient)');
line.style('stroke', 'url(#linear-gradient)');
line2.style('stroke', 'url(#linear-gradient)');
// rec.style('fill', 'url(#linear-gradient)');
// rec.style('stroke', 'url(#linear-gradient2)').style('stroke-width', 20);
const clusterGroups = svg.append('g');
clusterGroups.selectAll('.passClusters')
.data(clusters)
.join('line')
.attr('x1', (d) => xScale(d.y))
.attr('x2', (d) => xScale(d.end_y))
.attr('y1', (d) => yScale(105 - d.x))
.attr('y2', (d) => yScale(105 - d.end_x))
.attr('stroke-width', 10)
.style('stroke', (d, i) => getGrad(d, i));
return svg.node();
}
clusters.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
