25:["$","title",null,{"children":"Overview + WordCloud | Time Cloud | Observable"}] 49:T658,function createConceptHierarchy(data, popularity_metric, take_top_n = true) { let concept_year_hierarchy = d3 .hierarchy(data, (d) => { // console.log(d); if (d instanceof Map) { return Array.from(d.values()); } else { return null; } }) .sum(function (d) { // console.log(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; // console.log(hierarchy_copy); 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); // console.log(yr_node.children); } } // console.log(hierarchy_copy); hierarchy_copy.sum(function (d) { // console.log(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; } }); // console.log(hierarchy_copy); // console.log(concept_year_hierarchy); // console.log(hierarchy_copy); return hierarchy_copy; // return concept_year_hierarchy; }4a:T4b6,function stackedDataFromHierarchy(hierarchy) { let uniqueConcepts = hierarchy .leaves() .map((d) => d.data[0].Concept) .filter((value, index, self) => self.indexOf(value) === index); // console.log(uniqueConcepts); let data = []; let years = [...hierarchy.data.keys()].sort((a, b) => a - b); // console.log(hierarchy); for (let i = 0; i < years.length; i++) { data[i] = {}; data[i]["Year"] = years[i]; for (const concept in uniqueConcepts) { data[i][uniqueConcepts[concept]] = 0; } } for (const yearchild in hierarchy.children) { for (const conceptchild in hierarchy.children[yearchild].children) { let cc = hierarchy.children[yearchild].children[conceptchild]; data[yearchild][cc.data[0].Concept] = cc.value; } } data.columns = uniqueConcepts.map((x) => x); data.columns.splice(0, 0, "Year"); // console.log(data); let keys = uniqueConcepts.map((x) => x); // console.log(keys); let stackedData = d3.stack().offset(d3.stackOffsetSilhouette).keys(keys)(data); // let stackedData = d3.stack().offset(d3.stackOffsetExpand).keys(keys)(data); // console.log(data); // console.log(stackedData); return stackedData; }4b:T267e,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) // depthToOutlineColor((d) => 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}`); console.log(d.data[0].Year); // this brings out the year, use for on click0 label.attr("opacity", 1); let pop_label = metric_labels.select(`.label-${d.id}`); //console.log(pop_label); pop_label.attr("opacity", 1); if (d.depth === 2) { selectVoronoiClass(d, d.data[0].Concept); //console.log(selectVoronoiClass(d, d.data[0].Concept)); selectStreamClass(d, d.data[0].Concept); } }) .on("click", (d) => { mutable minCloudYr = d.data[0].Year mutable maxCloudYr = 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); } }) .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', d => d.data.key === hoveredShape ? 1 : 0) .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', d => d.data.key === hoveredShape ? 1 : 0) .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)); // console.log(data_hierarchy); let stackedData = stackedDataFromHierarchy(data_hierarchy); // console.log(stackedData); // let stackedData = stackedDataFromHierarchy(full_hierarchy); // console.log(stackedData[0][0][0]); // console.log(stackedData[stackedData.length - 1][0][1]); var y = d3 .scaleLinear() .domain([stackedData[0][0][0], stackedData[stackedData.length - 1][0][1]]) .range([stream_height, 0]); svg.append("g").attr( "transform", "translate(" + margin.left + "," + (treemap_height + stream_height + 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); }) .on("mouseleave", (d) => { let v = voronoi.selectAll(`.concept-polygon-${cleanClassName(d.key)}`); v.interrupt(); v.style("fill", (d) => depthToFillColor(d.depth)); deselectStream(d); }); // Min year selection rectangle let maxSelectRect = svg .append("rect") // .attr("x", x(maxRectYr) + margin.left) .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(minRectYr) + margin.left) .attr("x", x(rectRange[0]) + 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); // setupRangeRectsMin(minSelectRect, maxSelectRect); // setupRangeRectsMax(minSelectRect, maxSelectRect); setupRangeRects(minSelectRect, maxSelectRect, x); // setupDragRect(minSelectRect, x); // setupDragRect(maxSelectRect, x); // setupDragOverview(svg, minSelectRect, minSelectRect); // setupDragOverview(svg, maxSelectRect, maxSelectRect); 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; }4c:T65f,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("transform", `translate(${marginLeft},${dx - x0})`); const link = g.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.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 ? "#555" : "#999") .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(); }4d:T43e,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') //.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")") 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) //.transition() //.duration(1500) //.ease(d3.easeLinear) .style('font-size', `${word.size}px`); text.append('title').text(`${word.text} (${word.value})`); // toolitp } layout.start(); return svg; }4e:[{"id":"c3c725efa774b2e23e491bf2ca9150cdf05baa5c00123cfa4fc8ec954612737c154103239bfb7e71270827d70a734bb9e4782123436727cfd99bd3dbeda0179b","href":"https://static.observableusercontent.com/files/c3c725efa774b2e23e491bf2ca9150cdf05baa5c00123cfa4fc8ec954612737c154103239bfb7e71270827d70a734bb9e4782123436727cfd99bd3dbeda0179b","name":"32VIS - VIS_PAPER_CONCEPTS.csv","type":"text/csv","lastModified":1667304694268.029,"size":7492056},{"id":"64f0a4dae0d3c282c072c8d5889f1fa90b6ad7b4d074e6beadf1c150e71671650430dfb6816ead537730357e69c0302eaa707a05594ad461c9b7876073f41704","href":"https://static.observableusercontent.com/files/64f0a4dae0d3c282c072c8d5889f1fa90b6ad7b4d074e6beadf1c150e71671650430dfb6816ead537730357e69c0302eaa707a05594ad461c9b7876073f41704","name":"32VIS - VIS_AUTHORS_1990_2021.csv","type":"text/csv","lastModified":1667304694268.029,"size":2864476},{"id":"43dfa10eddfcf93c58e3dfaa6e0b05b913f0b1b51847d9dc6c9a96eac91c4daeffdc47228a40f861204e1fdb2138f291d9d8ed28620f91f540e30c69f7bb7aee","href":"https://static.observableusercontent.com/files/43dfa10eddfcf93c58e3dfaa6e0b05b913f0b1b51847d9dc6c9a96eac91c4daeffdc47228a40f861204e1fdb2138f291d9d8ed28620f91f540e30c69f7bb7aee","name":"32VIS - VIS_PAPER_1990_2021.csv","type":"text/csv","lastModified":1667304694268.029,"size":533176}] 29:{"id":"4d9912efcafb432d","slug":null,"title":"Overview + WordCloud","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-11-01T12:11:34.268Z","update_time":"$D2022-11-04T00:58:45.479Z","view_time":null,"first_public_time":"$D2022-11-01T12:11:34.268Z","has_unpublished_edits":null,"fork":true,"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":1540,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Overview + WordCloud","cells":[{"id":0,"value":"# Overview + WordCloud\n\nTesting 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":851,"value":"## Setup","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":true,"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":true,"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":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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html``","pinned":true,"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":true,"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":true,"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":true,"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":true,"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":true,"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":true,"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":true,"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 // return createConceptHierarchy(rolled_data, metric, false);\n return createConceptHierarchy(rolled_data, metric, true);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"level = 1","pinned":true,"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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"$49","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"$4a","pinned":true,"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":"$4b","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"rolled_data = rollupDataWithFilter(\n combined_concept_data,\n (d) => d.Year >= 2005 && d.Year <= 2005\n );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"hierarchy = createConceptHierarchy(rolled_data, metric);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"familyChart = graph(hierarchy, {label: d => thething(d) });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"function thething(d) {\n if (d.depth == 1) { return d.children[0].data[0].Year; }\n else if (d.depth == 2) {return d.data[0].Concept + \", \" + d.value; }\n return undefined;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"dx = 12\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"dy = 120\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"treeLink = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"$4c","pinned":true,"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":989,"value":"// mutable x = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"dragRectWidth = 11;","pinned":true,"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];","pinned":true,"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":true,"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":true,"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":true,"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":true,"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":true,"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":true,"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":true,"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":true,"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":true,"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":true,"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":1501,"value":"#lol who knows html and can fix this\n

\n \n

Selected time range: ${minCloudYr} - ${maxCloudYr}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1200,"value":"# WordCloud","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1202,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"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":1208,"value":"cloudConfig = ({\n minFontSize: 40,\n maxFontSize: 140,\n height: width/3,\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":1210,"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":1212,"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":1214,"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":1216,"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":1221,"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":1451,"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":1453,"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":1223,"value":"\nall_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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1395,"value":"concepts_by_metric = Array.from(d3.rollup(all_concepts, v => selectConcepts(v,metric), d => d.concept), \n ([text, value]) => ({ text, value }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"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":1364,"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":1353,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"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"}],"files":"$W4e","stdlib":"1"}} 24:null