25:["$","title",null,{"children":"Construction kit for visual recommender systems | Mandy Keck | Observable"}] 49:T1270,chart = { var w = width; var ourWidth = w - margin.left - margin.right; var height = w - margin.top - margin.bottom; //const color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(10)); const color = d3.scaleOrdinal(['#F3B56D', '#A0AF6C', '#4F80B0', '#7275AA', '#253065', '#47569B', '#435064']); var opacity = d3.scaleLinear() .domain([0, 4]) .range([0.07, 1.0]) .clamp(true); var x = d3.scaleBand() .rangeRound([0, ourWidth]) .paddingInner(0.1) .align(0); var svgDOM = d3.select(DOM.svg(w, w)) .attr('class','matrixdiagram') .style('font-size', '10px') .style('font', 'sans-serif'); var svg = svgDOM.append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); var graph = JSON.parse(JSON.stringify(data)); // inefficient, shrug var idToNode = {}; graph.nodes.forEach(function (n) { n.degree = 0; idToNode[n.id] = n; }); graph.links.forEach(function (e) { // if(idToNode[e.source]){ e.source = idToNode[e.source]; e.target = idToNode[e.target]; e.source.degree++; e.target.degree++; // } }); graph.nodes.sort(function (a, b) { return b.group - a.group; }); x.domain(d3.range(graph.nodes.length)); opacity.domain([0, d3.max(graph.nodes, function (d) { return d.degree; })]); const maxDim = x(graph.nodes.length - 1) + x.bandwidth(); svgDOM.attr("viewBox", `0,0,${maxDim + margin.left},${maxDim + margin.top}`); var matrix = graph.nodes.map(function (outer, i) { outer.index = i; return graph.nodes.map(function (inner, j) { return {i: i, j: j, val: i === j ? inner.degree : 0}; }); }); graph.links.forEach(function (l) { matrix[l.source.index][l.target.index].val += l.value; matrix[l.target.index][l.target.index].val += l.value; matrix[l.source.index][l.source.index].val += l.value; matrix[l.target.index][l.source.index].val += l.value; }); var row = svg.selectAll('g.row') .data(matrix) .enter().append('g') .attr('class', 'row') .attr('transform', function (d, i) { return 'translate(0,' + x(i) + ')'; }) .each(makeRow); row.append('text') .attr('class', 'label') .style('fill', function (d, i) { return color(graph.nodes[d,i].group)}) .style('text-anchor', 'end') .attr('font-size', x.bandwidth()) .attr('x', -4) .attr('y', x.bandwidth() / 2) .attr('dy', '0.32em') .text(function (d, i) { return graph.nodes[i].id; }); var column = svg.selectAll('g.column') .data(matrix) .enter().append('g') .attr('class', 'column') .attr('transform', function(d, i) { return 'translate(' + x(i) + ', 0)rotate(-90)'; }) .append('text') .attr('class', 'label') .attr('font-size', x.bandwidth()) .style('text-anchor','start') .attr('x', 4) .attr('y', x.bandwidth() / 2) .attr('dy', '0.32em') .text(function (d, i) { return graph.nodes[i].id; }) .style('fill', function (d, i) { return color(graph.nodes[d,i].group)}); function makeRow(rowData) { var cell = d3.select(this).selectAll('rect') .data(rowData) .enter().append('rect') // .attr('class', 'cell') .attr('x', function (d, i) { return x(i); }) .style('stroke','#d62333') .style('stroke-width','0') .style('width', x.bandwidth()) .style('height', x.bandwidth()) .style('fill-opacity', function (d) { return opacity(d.val); }) .style('fill', function (d) { if (d.val > 0 && graph.nodes[d.i].group === graph.nodes[d.j].group) { return color(graph.nodes[d.i].group); } else if (d.val > 0) { return '#000'; } else { return '#eee'; } }) .on('mouseover', function (d) { cell.filter(function (_, j) { return d.j === j; }).style('stroke-width', '1'); row.filter(function (_, i) { return d.i === i; }) .selectAll('text') // .style('fill', '#d62333') .style('font-weight', 'bold'); column.filter(function (_, j) { return d.j === j; }) // .style('fill', '#d62333') .style('font-weight', 'bold'); }) .on('mouseout', function () { cell.style('stroke-width', '0'); row.selectAll('text') //.style('fill', null) .style('font-weight', null); column //.style('fill', null) .style('font-weight', null); }); cell.append('title') .text(d => { if (d.i === d.j) { return graph.nodes[d.i].id; } else { return `${graph.nodes[d.i].id} - ${graph.nodes[d.j].id}` + " ("+ d.val +")"; } }); } return svgDOM.node(); } 4a:[{"id":"d2f6dbde0f13618e458b6800a5c444e55dc7370165163031928adb5590553d86c32a509bf614ca7e4e0db4422c039a295934a593bafe574f2286540a7c13fd5e","href":"https://static.observableusercontent.com/files/d2f6dbde0f13618e458b6800a5c444e55dc7370165163031928adb5590553d86c32a509bf614ca7e4e0db4422c039a295934a593bafe574f2286540a7c13fd5e","name":"ives-datajson.json","type":"application/json","lastModified":1679335110432.21,"size":125403},{"id":"9d08c18e97c2f42dce15020dbb40cdb81c79f142341abcf57d0e9a07f8eb72f4fba565ccace566530f018b60152a2862d39fd78c812be926b22d60298fa1bd03","href":"https://static.observableusercontent.com/files/9d08c18e97c2f42dce15020dbb40cdb81c79f142341abcf57d0e9a07f8eb72f4fba565ccace566530f018b60152a2862d39fd78c812be926b22d60298fa1bd03","name":"ives-datajson@1.json","type":"application/json","lastModified":1679335260278.76,"size":124850},{"id":"eee94b738c04d2387bbab2245eb1989dbf3605606fd36060d38a02c20e3208c800e4d44e30cd3ea260cd611590565efb5831566e13dcb2bfee16de0a1f58ee88","href":"https://static.observableusercontent.com/files/eee94b738c04d2387bbab2245eb1989dbf3605606fd36060d38a02c20e3208c800e4d44e30cd3ea260cd611590565efb5831566e13dcb2bfee16de0a1f58ee88","name":"ives_data (11).json","type":"application/json","lastModified":1679335627063.198,"size":111386}] 29:{"id":"1b431cd88c559613","slug":null,"title":"Construction kit for visual recommender systems","thumbnail":"b4d1ffcbe60371a61a5b2b75166cb37b95ad1068b52c8f44da3442d991e0f4b3","access_level":"public","create_time":"$D2023-03-20T17:58:30.432Z","update_time":"$D2023-03-29T05:18:33.091Z","view_time":null,"first_public_time":"$D2023-03-20T17:58:30.432Z","has_unpublished_edits":null,"fork":{"id":"497137416530e0b9","slug":"heatmap_ives","title":"Design Space for visual recommender systems","owner":{"id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5e89ed388ad11abe","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":352,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Construction kit for visual recommender systems","cells":[{"id":228,"value":"# Construction kit for visual recommender systems\n\n### Project \"Interactive Visualizations for Recommender Systems\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"### Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":" margin = ({\n top: 100,\n right: 0,\n bottom: 0,\n left: 100\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"data = FileAttachment(\"ives_data (11).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"viewof table = Inputs.table(cars)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"table","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"table","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"| name | quantity |\n| ------ | -------- |\n| apples | 12 |\n| pears | 34 |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {x: \"power (hp)\", y: \"economy (mpg)\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"\n \n \n \n \n \n \n \n \n ${cars.slice(0, 5).map(car => htl.html`\n \n \n \n `)}\n \n

Name	Fuel economy	Year
${car[\"name\"]}	${car[\"economy (mpg)\"]} mpg	’${car[\"year\"]}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null