25:["$","title",null,{"children":"Time Cloud: Phase 5 Visualization | Time Cloud | Observable"}] 49:T53f,### Overview - Voronoi Diagram and Stream Graph

**The Voronoi Diagram** shows the Top N concepts for each year in our data's time span 1990 - 2021 by either of two user-chosen metrics: paper count or citations. Each 'mini-polygon' belongs to a concept and is sized according to the value of the metric chosen by the user. On hovering over a concept in a particular year, the user sees the metric value for that year, as well as the location of that concept in other years. Also, the Top Research Topics slider helps the user to change the number of concepts featured per year. On click, it leads to a word cloud showing top concepts for the selected year. **The Stream Graph** shows the change of concepts through time. It works by hovering over the stream graph itself or by hovering over the concept in the Voronoi Diagram. Hovering over the stream graph gives you the total count of the number of publications/citations per concept for the entire data's time span, rather than for each year. When the stream graph breaks, it means that the concept did not feature among the Top N topics for that year, thereby giving users a measure of popularity. Finally, the bars in the streamgraph can be used to filter the years in view. On click of the stream graph, it leads to a word cloud showing top concepts for the selected range of years.4a:T425,{ if(mutable vizLevel === 1) { const cloudSvg = createWordCloudSvg(concepts_by_metric); const svg = d3.select(cloudSvg) .on('mouseenter', (m) => { let p = document.querySelector('#viz_heading'); p.innerText = `Selected year: ${minCloudYr}`; }); return cloudSvg; } else if(mutable vizLevel === 2) { const treeMap = graph(mapviz, {label: d => treeDef(d)}); return treeMap; } else { // Make svg let svg = d3.select( DOM.svg( width + margin.left + margin.right, treemap_height + stream_height + margin.left + margin.right ) ); svg .append("rect") .attr("width", "100%") .attr("height", "100%") .style("fill", "#F5F5F2"); // Make overview svg let voronoiSVG = makeSVG( combined_concept_data, metric, minRectYr, maxRectYr ); // https://stackoverflow.com/questions/57725403/how-can-i-add-an-external-group-to-an-existing-svg-with-d3-js svg.append(() => voronoiSVG.node()); return svg.node(); } }4b:T513,function createConceptHierarchy(data, popularity_metric, take_top_n = true) { let concept_year_hierarchy = d3 .hierarchy(data, (d) => { if (d instanceof Map) { return Array.from(d.values()); } else { return null; } }) .sum(function (d) { if (popularity_metric === "Count") { return d.children ? d.value : d.length; } else if (popularity_metric === "Citations") { return d.children ? d.value : d3.sum(d, (x) => x["Number of Citations"]); } else { return 0; } }); concept_year_hierarchy = concept_year_hierarchy.sort( (a, b) => b.value - a.value ); let hierarchy_copy = concept_year_hierarchy.copy(); let leaves = hierarchy_copy.leaves(); let years = hierarchy_copy.children; if (take_top_n) { for (let i = 0; i < years.length; i++) { let yr_node = years[i]; yr_node.children = yr_node.children.slice(0, top_n); } } hierarchy_copy.sum(function (d) { if (popularity_metric === "Count") { return d.children ? d.value : d.length; } else if (popularity_metric === "Citations") { return d.children ? d.value : d3.sum(d, (x) => x["Number of Citations"]); } else { return 0; } }); return hierarchy_copy; }4c:T27f2,function createVoronoiSVG(data_hierarchy) { // Scales // Unique concepts: https://plainenglish.io/blog/how-to-get-distinct-values-from-an-array-of-objects-in-javascript let uniqueConcepts = data_hierarchy .leaves() .map((d) => d.data[0].Concept) .filter((value, index, self) => self.indexOf(value) === index); var colorScale = d3 .scaleSequential(d3.interpolateRainbow) .domain([0, uniqueConcepts.length]); // VORONOI TREEMAP let svg = null; svg = d3.select( DOM.svg( width + margin.left + margin.right, treemap_height + stream_height + margin.left + margin.right ) ); svg .append("rect") .attr("width", "100%") .attr("height", "100%") .style("fill", "#F5F5F2"); const voronoi = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const concept_labels = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const metric_labels = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const year_labels = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const streamgraph = svg .append("g") .attr( "transform", "translate(" + (margin.left) + "," + (treemap_height + margin.top + margin.bottom) + ")" ); let seed = new Math.seedrandom(20); let voronoiTreeMap = d3.voronoiTreemap().prng(seed).clip(ellipse); voronoiTreeMap(data_hierarchy); conceptColorHierarchy(data_hierarchy); let allNodes = data_hierarchy .descendants() .sort((a, b) => b.depth - a.depth) .map((d, i) => Object.assign({}, d, { id: i })); let hoveredShape = null; voronoi .selectAll("path") .data(allNodes) .enter() .append("path") .attr("id", (d) => `label-${d.id}`) .attr("class", (d) => d.depth === 2 ? `concept-polygon-${cleanClassName(d.data[0].Concept)}` : `test_blah` ) .attr("d", (d) => "M" + d.polygon.join("L") + "Z") .style("fill", (d) => depthToFillColor(d.depth)) .attr( "stroke", (d) => depthToOutlineColor(d.depth) ) .attr("stroke-width", 1) .style("fill-opacity", (d) => (d.depth === 2 ? 1 : 0)) .attr("pointer-events", (d) => (d.depth === 2 ? "all" : "none")) .on("mouseenter", (d) => { // let label = concept_labels.select(`.label-${d.id}`); // label.attr("opacity", 1); // let pop_label = metric_labels.select(`.label-${d.id}`); // pop_label.attr("opacity", 1); if (d.depth === 2) { selectVoronoiClass(d, d.data[0].Concept); selectStreamClass(d, d.data[0].Concept); } mutable currConcept = d.data[0].Concept; // mutable selected_concept = d.data[0].Concept; mutable currConceptMetric = createMetricString(d.value, true, d.data[0].Year); }) .on("mouseleave", (d) => { // let label = concept_labels.select(`.label-${d.id}`); // label.attr("opacity", (d) => (d.data.population > 130000000 ? 1 : 0)); // let pop_label = metric_labels.select(`.label-${d.id}`); // pop_label.attr("opacity", (d) => (d.data.population > 130000000 ? 1 : 0)); if (d.depth === 2) { deselectVoronoi(d); deselectStream(d); } mutable currConcept = "Hover a concept!"; // mutable selected_concept = "Hover a concept!"; mutable currConceptMetric = createMetricString(0, true); }) .on("click", (d) => { mutable minCloudYr = d.data[0].Year mutable maxCloudYr = d.data[0].Year handleVizChanges(true); }) .transition() .duration(1000) .attr("stroke-width", (d) => 7 - d.depth * 2.8) .style("fill", (d) => d.color); concept_labels .selectAll("text") .data(allNodes.filter((d) => d.depth === 2)) .enter() .append("text") .attr("class", (d) => `label-${d.id}`) .attr("text-anchor", "middle") .attr( "transform", (d) => "translate(" + [d.polygon.site.x, d.polygon.site.y - 15] + ")" ) .text((d) => d.data[0].Concept) .attr("opacity", function (d) { if (d.data.key === hoveredShape) { return 1; } else if (d.data.population > 130000000) { return 1; } else { return 0; } }) .attr("cursor", "default") .attr("pointer-events", "none") .attr("fill", "black") .style("font-family", "Montserrat"); metric_labels .selectAll("text") .data(allNodes.filter((d) => d.depth === 2)) .enter() .append("text") .attr("class", (d) => `label-${d.id}`) .attr("text-anchor", "middle") .attr( "transform", (d) => "translate(" + [d.polygon.site.x, d.polygon.site.y + 15] + ")" ) .text((d) => d.value) .attr("opacity", function (d) { if (d.data.key === hoveredShape) { return 1; } else if (d.data > 130000000) { return 1; } else { return 0; } }) .attr("cursor", "default") .attr("pointer-events", "none") .attr("fill", "blue") .style("font-size", "12px") .style("font-family", "Montserrat"); year_labels .selectAll("text") .data(allNodes.filter((d) => d.depth === 1)) .enter() .append("text") .attr("text-anchor", "middle") .attr( "transform", (d) => "translate(" + [d.polygon.site.x, d.polygon.site.y] + ")" ) .text((d) => d.children[0].data[0].Year); // STREAMGRAPH let x = d3 .scaleLinear() .domain( d3.extent(combined_concept_data, function (d) { return d.Year; }) ) .range([0, width]); svg .append("g") .attr( "transform", "translate(" + margin.left + "," + (treemap_height + stream_height + margin.top) + ")" ) .call(d3.axisBottom(x).ticks(16).tickFormat(d3.format("d"))); data_hierarchy.children.sort((a,b) => [...a.data][0][1][0].Year - [...b.data][0][1][0].Year); let stackedData = stackedDataFromHierarchy(data_hierarchy); let min_stack_val = d3.min(stackedData, x => d3.min(x, y => d3.min(y))); let max_stack_val = d3.max(stackedData, x => d3.max(x, y => d3.max(y))); var y = d3 .scaleLinear() .domain([min_stack_val, max_stack_val]) .range([stream_height-margin.bottom, 0]); svg.append("g").attr( "transform", "translate(" + margin.left + "," + (treemap_height + margin.bottom + margin.top) + ")" ).call(d3.axisLeft(y)); // Show the areas streamgraph .selectAll("mylayers") .data(stackedData) .enter() .append("path") .style("fill", function (d) { return colorScale(uniqueConcepts.indexOf(d.key)); }) .attr( "d", d3 .area() .x(function (d, i) { return x(d.data.Year); }) .y0(function (d) { return y(d[0]); }) .y1(function (d) { return y(d[1]); }) ) .attr("class", (d) => `stream-${cleanClassName(d.key)}`) .on("mouseenter", (d) => { selectVoronoiClass(d, d.key); selectStreamClass(d, d.key); mutable currConcept = d.key; // mutable selected_concept = d.key; let arrRange = maxRectYr - minRectYr; let sumOfMetrics = 0; for(let i = 0; i <= arrRange; i++) { sumOfMetrics += stackedData[0][i].data[d.key] } mutable currConceptMetric = createMetricString(sumOfMetrics); }) .on("mouseleave", (d) => { let v = voronoi.selectAll(`.concept-polygon-${cleanClassName(d.key)}`); v.interrupt(); v.style("fill", (d) => depthToFillColor(d.depth)); deselectStream(d); mutable currConcept = "Hover a concept!"; // mutable selected_concept = "Hover a concept!"; mutable currConceptMetric = createMetricString(0); }) .on("click", (d) => { mutable minCloudYr = minRectYr mutable maxCloudYr = maxRectYr handleVizChanges(true); }); // Min year selection rectangle let maxSelectRect = svg .append("rect") .attr("x", x(rectRange[1]) + margin.left) .attr("width", dragRectWidth) .attr("y", treemap_height + margin.top + margin.bottom) .attr("height", stream_height) .style("fill", "darkorange") .style("opacity", 0.6); let minSelectRect = svg .append("rect") .attr("x", x(rectRange[0]) + margin.left - dragRectWidth) // .attr("x", x(2021) + margin.left - dragRectWidth) .attr("width", dragRectWidth) .attr("y", treemap_height + margin.top + margin.bottom) .attr("height", stream_height) .style("fill", "steelblue") .style("opacity", 0.6); setupRangeRects(minSelectRect, maxSelectRect, x); let coverRectRight = svg .append("rect") .attr("x", x(rectRange[1]) + dragRectWidth + margin.left) .attr("width", width) .attr("y", treemap_height + margin.top + margin.bottom) .attr("height", stream_height) .style("fill", "white") .style("opacity", 0.75); let coverRectLeft = svg .append("rect") .attr("x", x(rectRange[0]) + margin.left - dragRectWidth - width) .attr("width", width) .attr("y", treemap_height + margin.top + margin.bottom) .attr("height", stream_height) .style("fill", "white") .style("opacity", 0.75); // START HIGHLIGHT FUNCTIONS ************************** function selectVoronoiClass(d, concept) { let className = `.concept-polygon-${cleanClassName(concept)}`; let me = voronoi.selectAll(className); me.transition() .duration(100) .style("fill", colorScale(uniqueConcepts.indexOf(concept))); } function selectStreamClass(d, concept) { let className = `.stream-${cleanClassName(concept)}`; streamgraph.selectAll("path").style("fill-opacity", 0.1); let stream = streamgraph.select(className); stream.style("fill-opacity", 1); } function deselectVoronoi(d) { let me = voronoi.selectAll("path"); me.interrupt(); me.style("fill", (d) => depthToFillColor(d.depth)); } function deselectStream(d) { streamgraph.selectAll("path").style("fill-opacity", 1); } // END HIGHLIGHT FUNCTIONS ***************************** return svg; }4d:T73a,function createWordCloudSvg(words) { var layout = d3cloud() .size([width, width * 9/16]) .words(concepts_by_metric) .padding(cloudConfig.padding * cloudScale) .rotate(rotateWord) .font(baseFont) .fontSize(fontSize) .on('word', addWord); const svg = DOM.svg(layout.size()[0], layout.size()[1]); // width, height const group = d3.select(svg).append('g') function addWord (word) { const text = group.append('text'); text.style('font-size', '2px') .style('font-family', word.font) .style('fill', wordColors(Math.random())) .style('cursor', 'pointer') .attr('text-anchor', 'middle') .attr('transform', `translate(${[word.x, word.y]})rotate(${word.rotate})`) .text(word.text) .style('font-size', `${word.size}px`) .on('click', () => { mutable selected_concept = word.text; handleVizChanges(true); //d3.select(this) //.transition(`mouseover-${text}`).duration(30).ease(d3.easeLinear) //.attr("font-size", '4px') //.attr("font-weight", "bold") //.attr("fill","black"); }) .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut); function handleMouseOver(d, i) { d3.select(this) .classed("word-hovered", true) .transition(`mouseover-${text}`).duration(30).ease(d3.easeLinear) .attr("font-size", '4px') .attr("font-weight", "bold"); } function handleMouseOut(d, i) { d3.select(this) .classed("word-hovered", false) .interrupt(`mouseover-${text}`) .attr("font-size", '2px') .attr("font-weight",null); }; text.append('title').text(`${word.text} (${word.value})`); // toolitp } layout.start(); return svg; }4e:T510,// WARNING: This assumes that BOTH combined_concept_data and author_data are sorted by their DOIs (which they should be) Data = { let author_rows_for_paper = null; let currDOI = combined_concept_data[0].DOI; let startAuthorIdx = 0; let currAuthorIdx = 0; let data = combined_concept_data.map(function (d) { // If we are on same DOI in concept data, then reset authoridx to loop through same authors, else set new starting idx for author loop. if (currDOI == d.DOI) { currAuthorIdx = startAuthorIdx; } else { currDOI = d.DOI; startAuthorIdx = currAuthorIdx; } // Insert new keys for authors and affiliation info let n = {...d}; n["Authors"] = []; n["Affiliation Type"] = []; n["Affiliation Name"] = []; let author_row = author_data[currAuthorIdx]; // Loop through the next author rows until we find row where the DOI does NOT match currently needed DOI while(typeof author_row !== 'undefined' && author_row.DOI == currDOI) { n["Authors"].push(author_row["Author Name"]); n["Affiliation Type"].push(author_row["Affiliation Type"]); n["Affiliation Name"].push(author_row["Affiliation Name"]); currAuthorIdx++; author_row = author_data[currAuthorIdx]; } return n; }); return data; }4f:T687,function graph(root, { label = d => d.data.id, highlight = () => false, marginLeft = 40 } = {}) { root = tree(root); let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = D3.create("svg") .attr("viewBox", [0, 0, width, x1 - x0 + dx * 2]) .style("overflow", "visible"); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight",700) .attr("transform", `translate(${marginLeft},${dx - x0})`); const link = g.append("g") .attr("fill", "none") .attr("stroke", "#0B50F9") .attr("stroke-opacity", 0.4) .attr("stroke-width", 2.5) .selectAll("path") .data(root.links()) .join("path") .attr("stroke", d => highlight(d.source) && highlight(d.target) ? "red" : null) .attr("stroke-opacity", d => highlight(d.source) && highlight(d.target) ? 1 : null) .attr("d", treeLink); const node = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y},${d.x})`); node.append("circle") .attr("fill", d => highlight(d) ? "red" : d.children ? "#FC043C" : "#F46182") .attr("r", 2.5); node.append("text") .attr("fill", d => highlight(d) ? "red" : null) .attr("stroke", "white") .attr("paint-order", "stroke") .attr("dy", "0.31em") .attr("x", d => d.children ? -6 : 6) .attr("text-anchor", d => d.children ? "end" : "start") .text(label); return svg.node(); }50:[{"id":"c3c725efa774b2e23e491bf2ca9150cdf05baa5c00123cfa4fc8ec954612737c154103239bfb7e71270827d70a734bb9e4782123436727cfd99bd3dbeda0179b","href":"https://static.observableusercontent.com/files/c3c725efa774b2e23e491bf2ca9150cdf05baa5c00123cfa4fc8ec954612737c154103239bfb7e71270827d70a734bb9e4782123436727cfd99bd3dbeda0179b","name":"32VIS - VIS_PAPER_CONCEPTS.csv","type":"text/csv","lastModified":1667502218260.234,"size":7492056},{"id":"64f0a4dae0d3c282c072c8d5889f1fa90b6ad7b4d074e6beadf1c150e71671650430dfb6816ead537730357e69c0302eaa707a05594ad461c9b7876073f41704","href":"https://static.observableusercontent.com/files/64f0a4dae0d3c282c072c8d5889f1fa90b6ad7b4d074e6beadf1c150e71671650430dfb6816ead537730357e69c0302eaa707a05594ad461c9b7876073f41704","name":"32VIS - VIS_AUTHORS_1990_2021.csv","type":"text/csv","lastModified":1667502218260.234,"size":2864476},{"id":"43dfa10eddfcf93c58e3dfaa6e0b05b913f0b1b51847d9dc6c9a96eac91c4daeffdc47228a40f861204e1fdb2138f291d9d8ed28620f91f540e30c69f7bb7aee","href":"https://static.observableusercontent.com/files/43dfa10eddfcf93c58e3dfaa6e0b05b913f0b1b51847d9dc6c9a96eac91c4daeffdc47228a40f861204e1fdb2138f291d9d8ed28620f91f540e30c69f7bb7aee","name":"32VIS - VIS_PAPER_1990_2021.csv","type":"text/csv","lastModified":1667502218260.234,"size":533176}] 29:{"id":"d071b2fb1d86cefe","slug":null,"title":"Time Cloud: Phase 5 Visualization","thumbnail":"dc9ed5562df81e5126f99242230d4d0061deaf6e406c1c01db3cb2a2f502481b","access_level":"public","create_time":"$D2022-11-03T19:03:38.260Z","update_time":"$D2022-12-04T23:36:50.456Z","view_time":null,"first_public_time":"$D2022-11-03T19:03:38.260Z","has_unpublished_edits":null,"fork":{"id":"4914e86e96ea1a48","slug":null,"title":"Visualization","owner":{"id":"1acfcf4168a418c3","login":"timecloud","name":"Time Cloud"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1acfcf4168a418c3","login":"timecloud","name":"Time Cloud","avatar_url":"https://avatars-next.observableusercontent.com/f00540766bcc1765d0167d4d83c44bf69c874f77042dcd526a026687978aefce","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2360,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf477ef831d8e92d","login":"annosi","name":"Ann Osi","avatar_url":"https://avatars-next.observableusercontent.com/c9a7d1fba263992b6c77e1da1c58b92f3f30d75e1e58268084a4c75edcae99fb","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"cf477ef831d8e92d","login":"annosi","name":"Ann Osi","avatar_url":"https://avatars-next.observableusercontent.com/c9a7d1fba263992b6c77e1da1c58b92f3f30d75e1e58268084a4c75edcae99fb","tier":null,"role":"editor"},{"type":"team","id":"1acfcf4168a418c3","login":"timecloud","name":"Time Cloud","avatar_url":"https://avatars-next.observableusercontent.com/f00540766bcc1765d0167d4d83c44bf69c874f77042dcd526a026687978aefce","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Time Cloud: Phase 5 Visualization","cells":[{"id":1334,"value":"# Time Cloud: Phase 5 Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2202,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2209,"value":"### Word Cloud View & Tree Map View\n\n\n

**The Word Cloud** is revealed on click of the Voronoi Diagram. Since the Voronoi is limited to Top N concepts per year, the word cloud provides details of other concepts. On hover, you see the count or citations of each concept in the word cloud. Colors are purely nominal and do not convey any information because of the number of concepts present here. To go back to the Voronoi diagram and access the word cloud view for another year or a range of years, the user can make use of the back button.\n\n**The Popularity Tree** is revealed on click of a concept in the word cloud. It reveals the Top 5 authors contributing to that concept, grouped according to authors working in industry and academia. Again, to go back to the word cloud, the user can make use of the back button.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":675,"value":"viewof top_n = slider({\n title: \"Top Research Topics\",\n min: 1,\n max: 10,\n step: 1,\n value: 1\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"viewof metric = Inputs.radio(metrics, {\n value: metrics[0],\n label: \"Metric\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2234,"value":"$${vizLevel !== 1 ? (vizLevel !== 0 ? `Concept: ${selected_concept}\\n` : `Concept: ${currConcept}\\n`) : \"\"}\n${vizLevel !== 0 ? `Year: ${yearRange(minCloudYr,maxCloudYr)}\\n` : \"\"}\n${vizLevel === 0 ? `${currConceptMetric}` : \"\"}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2159,"value":"button({\n value: \"BACK\",\n buttonStyle: {\n background: \"#7295FF\",\n color: \"white\",\n width: \"25%\",\n \"font-size\": \"16px\",\n cursor: \"pointer\"\n },\n onclick: (objs) => {\n mutable vizLevel === 0 ? noop() : mutable vizLevel--;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1438,"value":"# Overall","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1441,"value":"mutable vizLevel = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2069,"value":"function noop() {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"function handleVizChanges(incr) {\n switch(mutable vizLevel) {\n case 0:\n incr ? mutable vizLevel++ : noop();\n break;\n case 1:\n incr ? mutable vizLevel++ : mutable vizLevel--;\n break;\n case 2:\n incr ? noop() : mutable vizLevel--;\n break;\n default:\n break;\n }\n let p = document.getElementById('#viz_heading');\n let pText = ``;\n if(vizLevel === 1) {\n pText = `Selected year: ${yearRange(minCloudYr, maxCloudYr)}`;\n }\n else if(vizLevel === 2) {\n pText = `Selected concept: ${mutable selected_concept}`\n } \n else {\n pText = `Hover a concept!`;\n }\n p.innerText = pText;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1506,"value":"import { button } from \"@bartok32/diy-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2074,"value":"function clickCallback() {\n console.log(\"Clicked\");\n if(vizLevel !== 0) {\n console.log(vizLevel);\n handleVizChanges(false);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# Voronoi","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":851,"value":"## Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1372,"value":"Testing out code from: https://observablehq.com/@will-r-chase/voronoi-treemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"treemap_height = 750 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"stream_height = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"width = 750 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2342,"value":"stream_width = 680","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"margin = ({top: 20, right: 20, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"bigFormat = d3.format(\",.0f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"ellipse = d3\n .range(100)\n .map((i) => [\n (width * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,\n (treemap_height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"d3 = require(\"d3@5\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\", \"seedrandom@2.4.3/seedrandom.min.js\", \"https://d3js.org/d3-array.v2.min.js\", \"https://unpkg.com/d3-simple-slider@1.10.4/dist/d3-simple-slider.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import { slider, radio, text } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"concept_data = (\n await FileAttachment(\"32VIS - VIS_PAPER_CONCEPTS.csv\").csv({\n typed: true\n })\n).sort((a, b) => d3.ascending(a.DOI, b.DOI))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"author_data = (\n await FileAttachment(\"32VIS - VIS_AUTHORS_1990_2021.csv\").csv({\n typed: true\n })\n).sort((a, b) => d3.ascending(a.DOI, b.DOI))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"paper_data = (\n await FileAttachment(\"32VIS - VIS_PAPER_1990_2021.csv\").csv({\n typed: true\n })\n).sort((a, b) => d3.ascending(a.DOI, b.DOI))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"// Here, filter the concept data by the desired level first before counting concepts per year\nconcepts_by_year_for_level = d3.rollup(\n combined_concept_data.filter((d) => d.Level == level),\n (v) => v,\n (d) => d.Year,\n (d) => d.Concept\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"full_hierarchy = {\n let rolled_data = rollupDataWithFilter(\n combined_concept_data,\n (d) => d.Year >= -Infinity && d.Year <= Infinity\n );\n\n return createConceptHierarchy(rolled_data, metric, true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"level = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"## Helper Functions\n\n### Data Manipulation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"combined_concept_data = {\n let paper_map = d3.index(paper_data, (d) => d.DOI);\n let combined_concept_data = concept_data.map(function (d) {\n let n = d;\n n[\"Number of Citations\"] = paper_map.get(n[\"DOI\"])[\"Number of Citations\"];\n n[\"Google Scholar Citation\"] = paper_map.get(n[\"DOI\"])[\n \"Google Scholar Citation\"\n ];\n return n;\n });\n return combined_concept_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"function rollupDataWithFilter(data, extra_filter) {\n let rolled_data = d3.rollup(\n data.filter((d) => d.Level == level).filter(extra_filter),\n (v) => v,\n (d) => d.Year,\n (d) => d.Concept\n );\n\n return rolled_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"function cleanClassName(name) {\n let new_name = name;\n // Spaces to '-'\n new_name = new_name.split(\" \").join(\"-\");\n // Remove bad characters\n new_name = new_name.split(\"(\").join(\"\");\n new_name = new_name.split(\")\").join(\"\");\n\n return new_name;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"function stackedDataFromHierarchy(hierarchy) {\n let uniqueConcepts = hierarchy\n .leaves()\n .map((d) => d.data[0].Concept)\n .filter((value, index, self) => self.indexOf(value) === index);\n\n let data = [];\n let years = [...hierarchy.data.keys()].sort((a, b) => a - b);\n\n for (let i = 0; i < years.length; i++) {\n data[i] = {};\n data[i][\"Year\"] = years[i];\n for (const concept in uniqueConcepts) {\n data[i][uniqueConcepts[concept]] = 0;\n }\n }\n for (const yearchild in hierarchy.children) {\n for (const conceptchild in hierarchy.children[yearchild].children) {\n let cc = hierarchy.children[yearchild].children[conceptchild];\n data[yearchild][cc.data[0].Concept] = cc.value;\n }\n }\n\n data.columns = uniqueConcepts.map((x) => x);\n data.columns.splice(0, 0, \"Year\");\n let keys = uniqueConcepts.map((x) => x);\n let stackedData = d3.stack().offset(d3.stackOffsetSilhouette).keys(keys)(data);\n \n return stackedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"function createMetricString(data, isSingleYear, yearStr = \"Year\") {\n if(isSingleYear) {\n return metric === \"Citations\" ? `Number of Citations (${yearStr}): ${data}` : `Number of Publications (${yearStr}): ${data}`;\n } else {\n return metric === \"Citations\" ? `Number of Citations (Total): ${data}` : `Number of Publications (Total): ${data}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2300,"value":"function yearRange(minCloudYr, maxCloudYr) {\n if (minCloudYr==maxCloudYr) { return minCloudYr; }\n else {return `${minCloudYr}-${maxCloudYr}`}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"### SVG Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"function makeSVG(data, met, lowbound, highbound) {\n let rolled_data = rollupDataWithFilter(\n data,\n (d) => d.Year >= lowbound && d.Year <= highbound\n );\n let hierarchy = createConceptHierarchy(rolled_data, met);\n let svg = createVoronoiSVG(hierarchy);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"### Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":955,"value":"dragRectWidth = 11;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"mutable minRectYr = rectRange[0];\n// mutable minRectYr = 2021","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"mutable maxRectYr = rectRange[1];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"mutable rectRange = [minYr, maxYr];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"testx = d3\n .scaleLinear()\n .domain(\n d3.extent(combined_concept_data, function (d) {\n return d.Year;\n })\n )\n .range([0, width]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"function setupRangeRects(minRect, maxRect, x) {\n // D3 Drag API\n const dragMin = d3.drag().on(\"start drag end\", draggingMin);\n minRect.call(dragMin);\n const dragMax = d3.drag().on(\"start drag end\", draggingMax);\n maxRect.call(dragMax);\n\n // Drag event callback function\n function draggingMin(d) {\n let year = Math.round(x.invert(d3.event.x - margin.left));\n year = Math.min(Math.max(minYr, year), rectRange[1]);\n if (year != rectRange[0]) {\n mutable minRectYr = year;\n }\n mutable rectRange[0] = year;\n d3.select(this).attr(\"x\", x(year) - dragRectWidth + margin.left);\n }\n\n function draggingMax(d) {\n let year = Math.round(x.invert(d3.event.x - margin.left));\n year = Math.min(Math.max(rectRange[0], year), maxYr);\n if (year != rectRange[1]) {\n mutable maxRectYr = year;\n }\n mutable rectRange[1] = year;\n d3.select(this).attr(\"x\", x(year) + margin.left);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"mutable currConcept = \"Hover a concept!\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"mutable currConceptMetric = \"0\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"### Utility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":365,"value":"function depthToOutlineColor(depth) {\n if (depth === 0) {\n return \"#F5F5F5\";\n } else if (depth === 1) {\n return \"#0000FF\";\n } else if (depth === 2) {\n return \"#FF0000\";\n } else if (depth === 3) {\n return \"#00FF00\";\n } else {\n return \"#000000\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"function depthToFillColor(depth) {\n if (depth === 0) {\n return \"black\";\n } else if (depth === 1) {\n return \"black\";\n } else if (depth === 2) {\n return \"white\";\n } else if (depth === 3) {\n return \"orange\";\n } else {\n return \"green\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"function conceptColorHierarchy(hierarchy) {\n if (hierarchy.depth === 0) {\n hierarchy.color = \"black\";\n } else if (hierarchy.depth === 1) {\n hierarchy.color = \"red\";\n } else if (hierarchy.depth === 2) {\n hierarchy.color = \"white\";\n } else {\n hierarchy.color = hierarchy.parent.color;\n }\n if (hierarchy.children) {\n hierarchy.children.forEach((child) => conceptColorHierarchy(child));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"### Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"metrics = [\n \"Count\",\n \"Citations\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"minYr = d3.min(concepts_by_year_for_level.keys())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"maxYr = d3.max(concepts_by_year_for_level.keys())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"# WordCloud","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1376,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"d3cloud = require('d3-cloud')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"cloudConfig = ({\n minFontSize: 60,\n maxFontSize: 150,\n height: width/6,\n padding: 2,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"mutable cloudScale = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1392,"value":"mutable minCloudYr = minRectYr","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"mutable maxCloudYr = maxRectYr","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1404,"value":"maxValue = Math.max.apply(null,\n concepts_by_metric.map(function(o) { return o.value; }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"minValue = Math.min.apply(null,\n concepts_by_metric.map(function(o) { return o.value; }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"all_concepts = combined_concept_data.filter((d) => d.Level == level).map(function (things) {\n return {\n year: things['Year'],\n concept: things['Concept'],\n citation: things['Number of Citations']\n }}).filter((d) => d.year >= minCloudYr && d.year <= maxCloudYr)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"concepts_by_metric = Array.from(d3.rollup(all_concepts, v => selectConcepts(v,metric), d => d.concept), \n ([text, value]) => ({ text, value }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"fontFamilies = ['sans-serif']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"rotateWord = function () { \n return ~~(Math.random() * 4) * 45 - 45; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"baseFont = function (d) {\n return fontFamilies[~~(Math.random() * fontFamilies.length)]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"wordColors = d3.scaleSequential(d3.interpolateRainbow)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1400,"value":"function selectConcepts(v, popularity_metric) {\n if (popularity_metric === \"Count\") {\n return v.length;\n } else if (popularity_metric === \"Citations\") {\n return d3.sum(v, d => d.citation);\n } else {\n return 0}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"fontSize = {\n let totalArea = 0;\n let minSize = frequencyToSize(minValue);\n let maxSize = frequencyToSize(maxValue);\n for (let w of concepts_by_metric) {\n let size = frequencyToSize(w.value);\n let fontSize = cloudConfig.minFontSize + \n (cloudConfig.maxFontSize - cloudConfig.minFontSize) * ((size-minSize) / (maxSize-minSize));\n totalArea += (w.text.length * 0.6 + cloudConfig.padding * 2) * fontSize * (fontSize + cloudConfig.padding * 2);\n }\n let s = Math.sqrt(width * cloudConfig.height/totalArea);\n mutable cloudScale = s;\n return function (w) {\n return s * (cloudConfig.minFontSize + \n (cloudConfig.maxFontSize - cloudConfig.minFontSize) * ((frequencyToSize(w.value) - minSize) / (maxSize - minSize))\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"frequencyToSize = function (frequency) {\n return Math.sqrt(frequency);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"# Popularity Tree","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2000,"value":"//Hierarchy isn't available in d3 version 5\nD3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2314,"value":"#### Variables:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1871,"value":"mutable selected_concept = \"Machine learning\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1872,"value":"mutable selected_year = 2019;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2316,"value":"#### Functions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1873,"value":"mapviz = D3.hierarchy(D3.rollup(unique(b).sort((a,b) => b[\"Number of Citations\"] - a[\"Number of Citations\"]).slice(0,5).concat(unique(c).sort((a,b) => a[\"Number of Citations\"] - b[\"Number of Citations\"]).slice(0,5)), v => v,d => d[\"AffT\"]));\n\n///hierarchy sorts in order of number of citations, i think\n///so you need to make another hierarchy sort in order of no. of papers \n///then change it in view of\n///for multiple years, you'll need to sum the citations. how do we incorporate this here?","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1874,"value":"//Takes in an array with all values from a specific concept and specific year then removes duplicates and returns a new array. \nfunction unique(d){\n let uniqueList = []\n let lisName = []\n for(let itr = 0; itr < d.length; itr++){\n if(uniqueList.includes(d[itr]) || lisName.includes(d[itr].Title)){\n null;\n }\n else{\n uniqueList.push(d[itr]);\n lisName.push(d[itr].Title);\n }\n }\n return uniqueList;\n}\n\n///how does the unique function work? it looks like it is taking only the first occurence\n///we don't want that cos we lose author name and affiliation","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1875,"value":"function treeDef(d) {\n if (d.depth == 1) { return d.children[0].data.AffT; }\n else if (d.depth == 2) {return d.data.Author + \", \" + d.data.AffN; }\n return undefined;\n}\n\n///why author and affliliation? i don't think it's indicating when multiple authors are in one paper\n///wouldn't top affiliations be more impactful?","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2191,"value":"#### Data Filters for TreeMap View :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1956,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1877,"value":"data2 = Data.filter((d) => d.Level == 1).filter(d => d.Year >= minCloudYr && d.Year <= maxCloudYr).filter(d => d.Concept == selected_concept)\n//data2 = Data.filter((d) => d.Level == 1).filter(d => d.Year == selected_year).filter(d => d.Concept == selected_concept)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1878,"value":"data3 = {\n let newData = [];\n for (let q = 0; q < data2.length; q++) {\n let paper = data2[q];\n for (let i = 0; i < paper[\"Authors\"].length; i++) {\n let newLine = {...paper};\n newLine.Author = paper.Authors[i];\n newLine.AffT = paper[\"Affiliation Type\"][i]\n newLine.AffN = paper[\"Affiliation Name\"][i]\n newLine[\"Authors\"] = null;\n newLine[\"Affiliation Type\"] = null;\n newLine[\"Affiliation Name\"] = null;\n\n newData.push(newLine);\n }\n }\n\n return newData;\n}\n// data2[0].Authors.toString();\n\n///data3 breaks out the authors and affiliations into individual lines, so changing the filter on data 2 should work","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"b= data3.filter(d => d.AffT == \"company\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"c= data3.filter(d => d.AffT == \"education\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"## Simple Graph Representation:\n#### Link: https://observablehq.com/@d3/d3-hierarchy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1884,"value":"dx = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1885,"value":"dy = 120","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1886,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"treeLink = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1888,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null