448210 (1) [Avatar] Offline
#1
See here working code below:

import {select, selectAll} from "d3-selection";
import {sankey as _sankey, sankeyLeft, sankeyLinkHorizontal} from "d3-sankey";
import {json} from "d3-request";
import {scaleLinear} from "d3-scale";
import {max} from "d3-array";


const margin = {top: 20, right: 20, bottom: 20, left: 30},
width = 960 - margin.left - margin.right,
height = 640 - margin.top - margin.bottom;

const svg = select('#viz').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`)
.attr('id', 'sankeyG');


json('sitestats.json', function (error, data) {

const sankey = _sankey()
.nodeWidth(20)
.nodePadding(200)
.size([width, height])
.iterations(32);

sankey(data);


const intensityRamp = scaleLinear()
.domain([0, max(data.links, d => d.value)])
.range(['#fcd88b', '#cf7d1c']);

// for the links
svg.selectAll('.link')
.data(data.links)
.enter().append('path')
.attr('class', 'link')
.attr('d', sankeyLinkHorizontal())
.style('stroke-width', d => Math.max(1, d.width))
.style('stroke-opacity', 0.5)
.style('fill', 'none')
.style('stroke', d => intensityRamp(d.value))
.on('mouseover', function () {

select(this).style('stroke-opacity', 0.smilie

})
.on('mouseout', () => {

selectAll('path.link').style('stroke-opacity', 0.5)

});

// for the nodes
const nodes = svg.selectAll('.node')
.data(data.nodes)
.enter().append('g')
.attr('class', 'node');

nodes.append('rect')
.attr('x', d => d.x0)
.attr('y', d => d.y0)
.attr('height', d => d.y1 - d.y0)
.attr('width', d => d.x1 - d.x0)
.style('fill', '#93c464')
.style('stroke', 'gray');

nodes.append('text')
.attr('x', d => d.x0 - 6)
.attr('y', d => (d.y1 + d.y0) / 2)
.attr('dy', '0.35em')
.attr('text-anchor', 'end')
.style('fill', 'black')
.text(d => d.name)
.filter(d => d.x0 < width / 2)
.attr('x', d => d.x1 + 6)
.attr('text-anchor', 'start');


});