31:T714,chart2 = { // append the svg object to the body of the page const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const node = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const split_data = {}; for (let i = 0; i < dimensions2.length; ++i) { const next = i < dimensions2.length-1 ? i+1 : i-1; split_data[dimensions2[i]] = []; for (const d of data.nodes) { split_data[dimensions2[i]].push({ "from": +d[dimensions2[i]], "to": +d[dimensions2[next]] }); } } function addLines(dim, next, data) { node.append("g") .selectAll("path") .data(data) .enter().append("path") .attr("d", (d) => paths2[selectedEncoding2](d, dim, next)) .style("stroke", (d) => line_color2[dim](d.from)) .style("fill", "none") .style("stroke-width", 1.5); } for (let i = 0; i < dimensions2.length; ++i) { const next = i < dimensions2.length-1 ? i+1 : i-1; addLines(dimensions2[i], dimensions2[next], split_data[dimensions2[i]]) } // Draw the axis: node.selectAll("axis") // For each dimension of the dataset I add a 'g' element: .data(dimensions2).enter() .append("g") // I translate this element to its right position on the x axis .attr("transform", function(d) { return "translate(" + x2(d) + ")"; }) // And I build the axis with the call function .each(function(d) { d3.select(this).call(d3.axisLeft().scale(y2[d])); }) // Add axis title .append("text") .style("text-anchor", "middle") .attr("y2", -9) .text(function(d) { return d; }) .style("fill", "black"); return svg.node(); }32:T700,chart = { // append the svg object to the body of the page const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const node = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const split_data = {}; for (let i = 0; i < dimensions.length; ++i) { const next = i < dimensions.length-1 ? i+1 : i-1; split_data[dimensions[i]] = []; for (const d of iris_data) { split_data[dimensions[i]].push({ "from": +d[dimensions[i]], "to": +d[dimensions[next]] }); } } function addLines(dim, next, data) { node.append("g") .selectAll("path") .data(data) .enter().append("path") .attr("d", (d) => paths[selectedEncoding](d, dim, next)) .style("stroke", (d) => line_color[dim](d.from)) .style("fill", "none") .style("stroke-width", 1.5); } for (let i = 0; i < dimensions.length; ++i) { const next = i < dimensions.length-1 ? i+1 : i-1; addLines(dimensions[i], dimensions[next], split_data[dimensions[i]]) } // Draw the axis: node.selectAll("axis") // For each dimension of the dataset I add a 'g' element: .data(dimensions).enter() .append("g") // I translate this element to its right position on the x axis .attr("transform", function(d) { return "translate(" + x(d) + ")"; }) // And I build the axis with the call function .each(function(d) { d3.select(this).call(d3.axisLeft().scale(y[d])); }) // Add axis title .append("text") .style("text-anchor", "middle") .attr("y", -9) .text(function(d) { return d; }) .style("fill", "black"); return svg.node(); }33:T664,function swatches2({ color, columns = null, format = x => x, swatchSize = 16, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }34:[{"id":"08a810b6e9c919b33f4fb061a4255582f72389058e4c6aa7b74afadc65694e049cfa8585b6342c44dc1d7c21eda7886f7f327497cff18b6268aaea1598d69227","href":"https://static.observableusercontent.com/files/08a810b6e9c919b33f4fb061a4255582f72389058e4c6aa7b74afadc65694e049cfa8585b6342c44dc1d7c21eda7886f7f327497cff18b6268aaea1598d69227","name":"Q5.csv","type":"text/csv","lastModified":1594912339446.479,"size":28774},{"id":"678e296e6f266aca7f1e4ecd0ccb98bad5b434c0494ed18ecb82d35ff2e1ac1dcae9d041e423b03ee84c654d44a4f542bb54403cecd9003d99c72f0f663c6780","href":"https://static.observableusercontent.com/files/678e296e6f266aca7f1e4ecd0ccb98bad5b434c0494ed18ecb82d35ff2e1ac1dcae9d041e423b03ee84c654d44a4f542bb54403cecd9003d99c72f0f663c6780","name":"CGCS-Template.fix.csv","type":"text/csv","lastModified":1594912342593.927,"size":84218},{"id":"09e1d02ab1fc42d4db052d7d1831567ca6e6213a05aecea0b42500435d78878c4124512ab000236ebea2d6f9923394d5dfa7916f0c075d22048731d2368b3f7e","href":"https://static.observableusercontent.com/files/09e1d02ab1fc42d4db052d7d1831567ca6e6213a05aecea0b42500435d78878c4124512ab000236ebea2d6f9923394d5dfa7916f0c075d22048731d2368b3f7e","name":"Q1.csv","type":"text/csv","lastModified":1594912345320.4,"size":92545},{"id":"76c594c2784a6c90afcafe9dd2d5fc7427f796665cdf59b7de9da86345d45e84bc310479456802ebad772acbaf481f7e7f47825b4e513e2c6cffc832d2d99b1b","href":"https://static.observableusercontent.com/files/76c594c2784a6c90afcafe9dd2d5fc7427f796665cdf59b7de9da86345d45e84bc310479456802ebad772acbaf481f7e7f47825b4e513e2c6cffc832d2d99b1b","name":"Q2.csv","type":"text/csv","lastModified":1594912346463.415,"size":98460},{"id":"568cf6b6ade01531c74eb9642d990a2062514c1824731c7985a7eeba77e176a77e2f1eb35176ecd62c5d6c2314edaac0de787c58e18a05439c93d266e5d80309","href":"https://static.observableusercontent.com/files/568cf6b6ade01531c74eb9642d990a2062514c1824731c7985a7eeba77e176a77e2f1eb35176ecd62c5d6c2314edaac0de787c58e18a05439c93d266e5d80309","name":"Q3.csv","type":"text/csv","lastModified":1594912346104.454,"size":55306},{"id":"ed60a618eab9cf01d0db53d1f823dc87d2f04ec4e13a94f5cdba5a0be61538b4ed16c83fc851a6f21bb22b0feefae65a53e7468b3e5cab36326febc9d2527942","href":"https://static.observableusercontent.com/files/ed60a618eab9cf01d0db53d1f823dc87d2f04ec4e13a94f5cdba5a0be61538b4ed16c83fc851a6f21bb22b0feefae65a53e7468b3e5cab36326febc9d2527942","name":"Q4.csv","type":"text/csv","lastModified":1594912337693.229,"size":55294}] 2f:{"title":"Bézier Parallel Coordinates Plots","cells":[{"id":0,"value":"md`# Bézier Parallel Coordinates Plots\n\nThis is a short experiment looking at how curves affect data perception in parallel coordinates plots.\n\n**Update:**\nThanks to a great suggestion now also with nicely joined lines\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"viewof includeCtype = checkbox({label: 'Include Country node type', value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof includePtype = checkbox({label: 'Include Publication node type', value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"swatches2({color: d3.scaleOrdinal(node_types_list, colors_test)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"viewof selectedEncoding2 = select({\n title: 'Path Drawings',\n description: 'Pick how lines should be drawn',\n options: Object.keys(paths2),\n value: 'bezier_path'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof selectedColor = select({\n title: 'Color Map',\n description: 'Pick which color map should be used',\n options: ['interpolateRdYlGn', 'interpolateBlues', 'interpolateViridis'],\n value: 'interpolateRdYlGn'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"paths2 = { return {\n straight_path2: function(d, dim, next) {\n return d3.line()([[x2(dim), y2[dim](d.from)], [x2(next), y2[next](d.to)]]);\n },\n bezier_path2: function(d, dim, next) {\n return d3.linkHorizontal()\n .x(([x]) => x2)\n .y(([, y]) => y2)\n ({source: [x2(dim), y2[dim](d.from)], target: [x2(next), y2[next](d.to)]})\n },\n bezier_path_down2: function(d, dim, next) {\n const p = d3.path();\n p.moveTo(x2(dim), y2[dim](d.from));\n p.quadraticCurveTo(x2(dim), y2[next](d.to), x2(next), y2[next](d.to));\n return p.toString();\n },\n bezier_path_up2: function(d, dim, next) {\n const p = d3.path();\n p.moveTo(x2(dim), y2[dim](d.from));\n p.quadraticCurveTo(x2(next), y2[dim](d.from), x2(next), y2[next](d.to));\n return p.toString();\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"viewof selectedEncoding = select({\n title: 'Path Drawings',\n description: 'Pick how lines should be drawn',\n options: Object.keys(paths),\n value: 'bezier_path'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"iris_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"// set the dimensions and margins of the graph\nmargin = { return { top: 30, right: 10, bottom: 10, left: 0 }; }","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"width = 1200 - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"height = 600 - margin.top - margin.bottom;","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"iris_data = d3.csv(\"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv\");\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"dimensions = d3.keys(iris_data[0]).filter(function(d) { return d != \"Species\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"dimensions2 = [\"Source\",\"Target\",\"Pais\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"x = d3.scalePoint()\n .range([0, width])\n .padding(1)\n .domain(dimensions);","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"x2 = d3.scalePoint()\n .range([0, width])\n .padding(1)\n .domain(dimensions2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"y = {\n const axis = {}\n for (let i in dimensions) {\n let name = dimensions[i]\n axis[name] = d3.scaleLinear()\n .domain( d3.extent(iris_data, function(d) { return +d[name]; }) )\n .range([height, 0])\n }\n return axis;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"y2 = {\n const axis = {}\n for (let i in dimensions2) {\n let name = dimensions2[i]\n axis[name] = d3.scaleLinear()\n .domain( d3.extent(data, function(d) { return +d[name]; }) )\n .range([height, 0])\n }\n return axis;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"line_color = {\n const cols = {};\n for (let i in dimensions) {\n let name = dimensions[i]\n cols[name] = d3.scaleSequential()\n .domain(d3.extent(iris_data, function(d) { return +d[name]; }))\n .interpolator(d3[selectedColor]);\n }\n return cols;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"line_color2 = {\n const cols = {};\n for (let i in dimensions2) {\n let name = dimensions2[i]\n cols[name] = d3.scaleSequential()\n .domain(d3.extent(data.nodes, function(d) { return +d[name]; }))\n .interpolator(d3[selectedColor]);\n }\n return cols;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"paths = { return {\n straight_path: function(d, dim, next) {\n return d3.line()([[x(dim), y[dim](d.from)], [x(next), y[next](d.to)]]);\n },\n bezier_path: function(d, dim, next) {\n return d3.linkHorizontal()\n .x(([x]) => x)\n .y(([, y]) => y)\n ({source: [x(dim), y[dim](d.from)], target: [x(next), y[next](d.to)]})\n },\n bezier_path_down: function(d, dim, next) {\n const p = d3.path();\n p.moveTo(x(dim), y[dim](d.from));\n p.quadraticCurveTo(x(dim), y[next](d.to), x(next), y[next](d.to));\n return p.toString();\n },\n bezier_path_up: function(d, dim, next) {\n const p = d3.path();\n p.moveTo(x(dim), y[dim](d.from));\n p.quadraticCurveTo(x(next), y[dim](d.from), x(next), y[next](d.to));\n return p.toString();\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"max_month = 12 // from 1 to 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"min_month = 1 // from 1 to 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"preprocess_csv_time = function(csv,min_month,max_month) {\n\n var filtered = [];\n\n csv.forEach(function(row) {\n \n var month = row['Time'].split(\"-\")[1]\n var eType = row['eType']\n \n if ([\"0_emails\",\"1_phone\"].includes(eType) & month >= min_month & month <= max_month) {\n filtered.push(row) \n }\n \n if (![\"0_emails\",\"1_phone\"].includes(eType)){\n filtered.push(row) \n }\n \n })\n return filtered\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"candidate_graph_n = 5 // from 1 to 5 (candidates)","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"csvs = {\n \n const csv1 = FileAttachment('Q1.csv')\n const csv2 = FileAttachment('Q2.csv')\n const csv3 = FileAttachment('Q3.csv')\n const csv4 = FileAttachment('Q4.csv')\n const csv5 = FileAttachment('Q5.csv')\n var csvs = [csv1, csv2, csv3, csv4, csv5]\n \n return csvs\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"csv_ori = d3.csvParse(await csvs[candidate_graph_n-1].text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"selected_edge_types = {\n var selected = [\"0\",\"1\"]\n \n if (includePtype) {\n selected.push(\"4\")\n }\n \n if (includeCtype) {\n selected.push(\"6\")\n }\n \n \n return selected\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"colors = get_n_nominal_colors(3) // run this function again to change colour code","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"csv = preprocess_csv_time(csv_ori,min_month,max_month)","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"template_csv = d3.csvParse(await FileAttachment(\"CGCS-Template.fix.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"template_graph = csv2graph(preprocess_csv_time(template_csv,min_month,max_month),selected_edge_types)","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"eType2nodeType = function(eType){\n\n var dict = {'0':'person','1':'person','4':'publication','6':'country'}\n \n return dict[eType]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"csv2graph = function(csv,selected_edge_types) {\n var links = [] \n var nodes = []\n \n var nodes_number_holder = []\n var eTypes = selected_edge_types\n \n for (var row of csv) {\n \n var eType = row.eType.split(\"_\")[0]\n \n if (eTypes.includes(eType)) {\n \n var id_source = row.Source.split(\"_\")[1]\n var id_target = row.Target.split(\"_\")[1]\n links.push({'source':id_source,'target':id_target,'value':1})\n \n var add_node_s = !(nodes_number_holder.includes(id_source))\n var add_node_t = !(nodes_number_holder.includes(id_target))\n \n var groupS = 'person'\n var groupT = eType2nodeType(eType)\n \n if (add_node_s){\n nodes_number_holder.push(id_source)\n nodes.push({'id':id_source,'group':groupS})\n }\n \n if (add_node_t){\n nodes_number_holder.push(id_target)\n nodes.push({'id':id_target,'group':groupT})\n }\n }\n }\n\n return {'links':links,'nodes':nodes}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"data = csv2graph(csv,selected_edge_types)","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"node_types_list = {\n \n var nodesT = (template_graph.nodes.map(function(d) {return(d.group)})).filter((x, i, a) => a.indexOf(x) == i)\n return (nodesT)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"colors_test = {\n \n var idx = [0]\n \n if (includePtype) {\n idx.push(1)\n } \n \n if (includeCtype) {\n idx.push(2)\n }\n \n var colors_test = colors.filter((x,i) => idx.includes(i))\n \n return colors_test\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"import {get_n_nominal_colors} from \"@osvalb/tp-4-carga-de-datos-y-escalas\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"import {checkbox} from '@nitaku/checkbox'","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"color = {\n \n const scale = d3.scaleOrdinal(node_types_list, colors_test);\n return d => scale(d.group);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}