{ // set the size let width = 1100, height = 1100, margin = {top: 100, left: 100, right: 10, bottom: 10}; const div = d3.select(DOM.element('div')) .style('overflow-x', 'auto'); // create svg let svg = div.append('svg') .style("width", width) .style("height", height); // d3.create('svg').attr('width', width).attr('height', height); function matrix(){ d3.selectAll('rect').remove(); d3.selectAll('text').remove(); svg.append('text') .attr('id', 'nameText'); var checkboxHighlight = function(d){ d3.selectAll('rect').attr('opacity','0.1'); console.log('check box selected: '+d); var checkedArray = d; for (var i = 0;i b.name ){ return 1; } return 0; } // by salience: higher to lower function sortbySalience( a, b ) { if ( a.salience > b.salience ){ return -1; } if ( a.salience < b.salience ){ return 1; } return 0; } // by birth year: smaller to larger function sortbyBirthYear( a, b ) { if ( a.birthYear < b.birthYear ){ return -1; } if ( a.birthYear > b.birthYear ){ return 1; } return 0; } // by the number of categories: larger to smaller function sortbyNumOfCategories( a, b ) { var aLink = links.filter(d => { return (d.target === characters[a.id].fullName) }) var bLink = links.filter(d => { return (d.target === characters[b.id].fullName) }) if ( aLink[0].category.length < bLink[0].category.length ){ return -1; } if ( aLink[0].category.length > bLink[0].category.length ){ return 1; } return 0; } // by the node degree: larger to smaller function sortbyDegree( a, b ) { if ( a.nodeDegree > b.nodeDegree ){ return -1; } if ( a.nodeDegree < b.nodeDegree ){ return 1; } return 0; } // sort nodes depending on the dropdown if (sortBy === "name") { var sortedNodes = nodes.sort( sortbyName ); } else if (sortBy === "salience") { var sortedNodes = nodes.sort( sortbySalience ); } else if (sortBy === "birthYear") { var sortedNodes = nodes.sort( sortbyBirthYear ); } else if (sortBy === "numOfCategories") { var sortedNodes = nodes.sort( sortbyNumOfCategories); } else if (sortBy === "degree") { var sortedNodes = nodesWithDegree.sort(sortbyDegree); } // assign index number to each node var nodesIndex = [] for (var i = 0; i < sortedNodes.length; i++) { nodesIndex.push(sortedNodes[i].name) } // for (var i = 0; i < numNodes.length; i++) { // for (var j = 0; j < numNodes.length; j++) { // svg.append('rect') // .attr('id', 'whitesquare') // .attr('x', i*sidelength + 300) // .attr('y', j*sidelength + 220) // .attr('width',sidelength) // .attr('height',sidelength) // .attr('fill','white') // .attr('stroke','black'); // } // } // // add white background for (var i = 0; i < numNodes; i++) { for (var j = 0; j < numNodes; j++) { svg.append('rect') .attr('x', i * sidelength + 300) .attr('y', j * sidelength + 300) .attr('width',sidelength) .attr('height',sidelength) .attr('fill','transparent') .attr('stroke','black') .on('mouseover', function(event,d) { return highlight(d) }) .on('mouseout', function(event, d) { d3.select('#highlightRect1').attr('stroke','none'); d3.select('#highlightRect2').attr('stroke','none'); }); } } var nodesIndexCopy = nodesIndex.map((x)=>x); // add squares to the metrics for (var i = 0; i < links.length; i++) { var cat = links[i].category; var numCat = cat.length; var personName1 = links[i].target.replace(/ /g,"_"); var personName2 = links[i].source.replace(/ /g,"_"); makeNestedSquares2(numCat,numCat, sidelength, sidelength*nodesIndex.indexOf(links[i].target) + 300, sidelength*nodesIndex.indexOf(links[i].source) + 300, cat,nodesIndex,sortedNodes,nodesIndexCopy,personName1,personName2, links[i]); } // add row labels to the metrics svg.selectAll('.rowLabel') .data(sortedNodes.slice(0, numNodes)) .enter() .append('text') .attr('class',(d)=>d.name.replace(/ /g,"_")+'_col') .text((d)=> d.name) .classed('rotation', true) .attr('fill', 'black') .attr("cursor", "pointer") .attr('font-weight', (d,i)=>{ if (d.name ==characters[mutable mainCharacterID].fullName){ return "bold"; } else { return "normal" };}) .on('click', (event, d) => {return changeChar(d)}) .attr('transform', (d,i)=>{ var posX = (i * sidelength) + 305 + (sidelength/2) return 'translate( ' + posX + ' , ' + 290 + '),'+ 'rotate(-90)';}) .attr('x', 0) .attr('y', 0) .style("text-anchor", "start") .attr("height", sidelength) .style("font-size", "1rem") .on('mouseover', function(d) { return highlightCol(this) }) .on('mouseout', function(d) { d3.selectAll('rect').attr('opacity','1'); d3.selectAll('text').attr('opacity','1'); }); // add column labels to the metrics svg.selectAll('.colLabel') .data(sortedNodes.slice(0, numNodes)) .join("text") .attr('class',(d)=>d.name.replace(/ /g,"_")+'_row') .attr("y", (d, i) => ((i * sidelength)+sidelength/2) + 300) .attr("anchor", "center") .attr("height", 2) .attr("x", 0) .attr("cursor", "pointer") .text(d => d.name) .style("font-size", "1rem") .attr('font-weight', (d,i)=>{ if (d.name ==characters[mutable mainCharacterID].fullName){ return "bold"; } else { return "normal" };}) .on('click', (event, d) => {return changeChar(d)}) .on('mouseover', function(d) { return highlightRow(this) }) .on('mouseout', function(d) { d3.selectAll('rect').attr('opacity','1'); d3.selectAll('text').attr('opacity','1'); }); // adding highlight boxes svg.append('rect') .attr('id', 'highlightRect1') .attr('x', 10) .attr('y', 20) .attr('width',50) .attr('height',50) .attr('fill','none') .attr('stroke','none'); svg.append('rect') .attr('id', 'highlightRect2') .attr('x', 10) .attr('y', 20) .attr('width',50) .attr('height',50) .attr('fill','none') .attr('stroke','none') } function changeChar(clickedName) { mutable mainCharacterID = clickedName.id; return matrix() } svg.append('text') .attr('id', 'nameText') matrix() return div.node(); }