2a:null 2b:["$","title",null,{"children":"Explorations in d3 and druid.js | Basile Simon | Observable"}] 30:T4ad,chart = { const svg = d3 .create("svg") .attr("width", W) .attr("viewBox", [0, 0, W, W]); let [x, y] = await new Promise(res => res(get_scales(Y, W))); const gs = svg .selectAll(".point") .data(Y) .enter() .append("g") .attr("class", "point") .attr('id', (d, i) => i) .attr("fill", (d, i) => color(classes[i])) .attr('org', (d, i) => acq_classes[i]) .attr('x', ([px, py]) => x(px)) .attr('y', ([px, py]) => y(py)); gs.append("circle") .attr('r', 8) .attr('stroke', '#fff') .style('opacity', 0.7) .style('mix-blend-mode', 'multiply'); svg .selectAll(".point") .data(Y) .attr("transform", ([px, py], i) => `translate(${x(px)}, ${y(py)})`); const tooltip = svg.append("g"); svg.selectAll('.point').on("touchmove mousemove", function(event) { const data = [ d3.select(this).attr('x'), d3.select(this).attr('y'), d3.select(this).attr('org') ]; tooltip .attr("transform", `translate(${data[0]},${data[1]})`) .call(callout, data[2]); }); svg .selectAll('.point') .on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }31:T5e3,sm = { const svg = d3 .create("div") .attr("width", W) .style('display', 'flex') .style('flex-direction', 'row') .style('flex-wrap', 'wrap'); const sms = svg .selectAll('.sm') .data(nest) .enter() .append('svg') .attr('class', 'sm') .attr('width', `${mini_W}px`) .attr('height', `${mini_W}px`); let [x, y] = await new Promise(res => res(get_scales(Y, mini_W))); const gs = sms .selectAll(".smpoint") .data((d, i) => d.values) .enter() .append("g") .attr("class", "smpoint") .attr('id', (d, i) => i) .attr("fill", (d, i) => color(d.ult_parent)) .attr('org', (d, i) => d.child) .attr('x', d => x(d.coords[0])) .attr('y', d => y(d.coords[1])); gs.append("circle") .attr('r', 5) .attr('stroke', '#fff') .style('opacity', 0.7) .style('mix-blend-mode', 'multiply'); sms .selectAll(".smpoint") .data(d => d.values) .attr( "transform", (d, i) => `translate(${x(d.coords[0])}, ${y(d.coords[1])})` ); const tooltip = svg.append("g"); svg.selectAll('.smpoint').on("touchmove mousemove", function(event) { const data = [ d3.select(this).attr('x'), d3.select(this).attr('y'), d3.select(this).attr('org') ]; tooltip .attr("transform", `translate(${data[0]},${data[1]})`) .call(callout, data[2]); }); svg .selectAll('.point') .on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }32:T7f2,create_parameter_form = dr_method => { switch (dr_method) { case "ISOMAP": case "LLE": case "LTSA": return html``; break; case "TSNE": return html``; break; case "UMAP": return html``; break; case "TriMap": return html``; break; case "LSP": return html``; break; case "LDA": return html`

class labels `; break; default: return html``; break; } }33:[] 2e:{"id":"bb476d6211bd1e43","slug":"explorations-in-d3-and-druid-js","title":"Explorations in d3 and druid.js","thumbnail":"924b82049b729b4edad55d71c8ed0da3177684a03c5d32271f69fea7b0019f0e","access_level":"public","create_time":"$D2021-01-12T16:35:28.234Z","update_time":"$D2021-04-03T10:41:09.640Z","view_time":null,"first_public_time":"$D2021-01-21T21:31:59.260Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"168555ed91a5406b","login":"basilesimon","name":"Basile Simon","avatar_url":"https://avatars-next.observableusercontent.com/22baecef3adab3cff7d819e3157c5f63e776bd2d2b9ae527da142a3685cc5ea6","tier":"starter_2024"},"version":500,"publish_version":500,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b5ae19fcef6b0e4","login":"basilesimon","name":"Basile Simon","avatar_url":"https://avatars-next.observableusercontent.com/22baecef3adab3cff7d819e3157c5f63e776bd2d2b9ae527da142a3685cc5ea6","tier":null}],"members":[{"type":"individual","id":"9b5ae19fcef6b0e4","login":"basilesimon","name":"Basile Simon","avatar_url":"https://avatars-next.observableusercontent.com/22baecef3adab3cff7d819e3157c5f63e776bd2d2b9ae527da142a3685cc5ea6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Explorations in d3 and druid.js","cells":[{"id":461,"value":"md`# Explorations in d3 and druid.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`### Load data\nPick \\`tags_data.csv\\` for its analysis – this doc is only added locally`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"viewof data = dataInput()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`We re-build the dataset to make it a little lighter, picking only the organisation name, its immediate parent, and making sure only the GAFAM-acquired companies are analysed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"data_filter = data\n .map(e => ({\n child: e.child,\n ult_parent: e.ult_parent,\n industry_a: e.ind_group_a,\n industry_b: e.ind_group_b,\n industry_c: e.ind_group_c,\n industry_d: e.ind_group_d\n }))\n .filter(\n e =>\n !['Microsoft', 'Facebook', 'Google', 'Amazon', 'Apple'].includes(\n e.ult_parent\n )\n )\n .slice(0, sample_slice)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`---\nIn order to avoid influencing the algorithm as much as possible, we transform our data so that each unique tag of our dataset is either associated with an organisation (1) or not (0). We end up with a very long matrix of organisation and tags (about 60 unique industry groups in this instance), which we then remove all the titles from in order to build a matrix of 0s and 1s only (see \\`coded_data\\`).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"pars = {\n const pars = [\n ...new Set(data_filter.map(e => e.industry_a)),\n ...new Set(data_filter.map(e => e.industry_b)),\n ...new Set(data_filter.map(e => e.industry_c)),\n ...new Set(data_filter.map(e => e.industry_d))\n ];\n if (includeParent === \"true\") {\n pars.push(...new Set(data_filter.map(e => e.ult_parent)));\n }\n return pars;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"coded = data_filter.map(e => ({\n org: e.child,\n ...pars.reduce((acc, curr) => {\n let inc;\n if (\n e.ult_parent === curr ||\n e.industry_a === curr ||\n e.industry_b === curr ||\n e.industry_c === curr ||\n e.industry_d === curr\n ) {\n inc = 1;\n } else {\n inc = 0;\n }\n return (acc[curr] = inc), acc;\n }, {})\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"coded_data = {\n const attrs = Object.keys(coded[0]).filter(a => {\n return typeof coded[0][a] === \"number\";\n });\n\n return coded.map(d => attrs.map((a, i) => d[a]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"viewof includeParent = radio({\n title: 'Include ultimate parent?',\n description: 'Please select',\n options: [\n { label: \"Don't include (more proper)\", value: false },\n { label: \"Include (that's cheating!)\", value: true }\n ],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"md`---\n### Algorithm and parameter selection\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof dr_method = select({\n description: \"Please pick a Dimensionality Reduction Method.\",\n options: [\"UMAP\", \"TSNE\", \"TriMap\", \"PCA\", \"LLE\", \"LTSA\", \"ISOMAP\", \"FASTMAP\", \"MDS\", \"LSP\", \"LDA\", \"TopoMap\"].sort(d3.ascending),\n value: \"FASTMAP\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof parameterization = form(create_parameter_form(dr_method))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`${Object.keys(parameterization).map(key => {\n return `${key} = ${parameterization[key]}`\n }).join(\"
\") || (dr_method + \" has no parameters!\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"md`**NOTE:** Some of this processing is heavy on the browser. I recommend to simulate the algo on a portion of the dataset only first. Slide the slider below to the right to add more data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"viewof sample_slice = select({\n options: [100, 200, 400, 800, 1000, 1021],\n value: 100,\n description:\n \"number of points (higher values might be very slow or crash some methods)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"{\n const gafam = [...new Set(classes)];\n const legend = d3\n .create('div')\n .attr('id', 'legend')\n .style('width', '100%')\n .style('height', '60px')\n .style('display', 'flex')\n .style('flex-direction', 'row')\n .style('flex-wrap', 'wrap')\n .style('justify-content', 'center');\n\n legend\n .selectAll('.legendItems')\n .data(gafam)\n .enter()\n .append('span')\n .attr('class', 'legendItems')\n .style('color', d => color(d))\n .style('padding', '1rem')\n .style('font-family', 'sans-serif')\n .html(d => d);\n\n yield legend.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"nest = d3\n .nest()\n .key(d => d.ult_parent)\n .entries(companies)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"companies = {\n let companies = [];\n for (let i = 0; i < Y._data.length; i = i + 2) {\n const company = {};\n company.coords = [Y._data[i], Y._data[i + 1]];\n company.ult_parent = classes[i];\n company.child = acq_classes[i];\n if (company.ult_parent) {\n companies.push(company);\n }\n }\n return companies;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"classes = data_filter.map(d => d?.ult_parent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"acq_classes = data_filter.map(d => d?.child)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"dr = {\n const X = druid.Matrix.from(coded_data); // X is the data as object of the Matrix class.\n const DR = druid[dr_method]; // DR is the selected DR class\n const P = get_parameters(parameterization); // P is a array containing the parameters for DR.\n return new DR(X, ...P);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"Y = dr.transform()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text =>\n text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .text(d => d)\n );\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\n \"d\",\n `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"color = d3.scaleOrdinal(d3.schemeSet1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"get_scales = function(data, w) {\n let x_extent = d3.extent(data, d => d[0]);\n let y_extent = d3.extent(data, d => d[1]);\n let x_span = x_extent[1] - x_extent[0];\n let y_span = y_extent[1] - y_extent[0];\n const offset = Math.abs(x_span - y_span) / 2;\n\n let x;\n let y;\n\n if (x_span > y_span) {\n x_extent[0] -= offset;\n x_extent[1] += offset;\n } else {\n y_extent[0] -= offset;\n y_extent[1] += offset;\n }\n\n return [\n d3\n .scaleLinear()\n .domain(x_extent)\n .rangeRound([20, w - 20])\n .nice(),\n d3\n .scaleLinear()\n .domain(y_extent)\n .rangeRound([20, w - 20])\n .nice()\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function get_parameters(parameterization) {\n // if (dr_method == \"LDA\" ) {\n // return [parameterization.clusters == \"islands\" ? classes2 : classes];\n // } else {\n // return Object.values(parameterization);\n // }\n return Object.values(parameterization);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"W = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"mini_W = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"druid = require(\"@saehrimnir/druidjs@^0.3.7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require(\"d3@6\", 'd3-collection')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import { select, slider, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { dataInput } from \"@john-guerra/file-input-with-default-value\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2f:"$2e:body"