3e:null 3f:["$","title",null,{"children":"Box Plot Wheel | IXD Sheridan | Observable"}] 45:Td19,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const g = svg.append("g") .selectAll("g") .data(bins) .join("g"); g.append("path") .attr("stroke", "currentColor") .attr("d", d => ` M${x(d.key) + x.bandwidth() / 2},${y(d.value.range[1])} V${y(d.value.range[0])} `); g.append("path") .attr("fill",d => color(d.value.gender)) .attr("opacity", opacity) .attr("d", d => ` M${x(d.key) + 1},${y(d.value.quartiles[2])} H${x(d.key) + x.bandwidth()} V${y(d.value.quartiles[0])} H${x(d.key) + 1} Z `) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(100) tooltipMouseOver(d, i, t, allInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(100) tooltipMouseOut(d, i, t, allInfo) }); g.append("path") .attr("stroke", "currentColor") .attr("stroke-width", 3) .attr("d", d => ` M${x(d.key) + 1},${y(d.value.quartiles[1])} H${x(d.key) + x.bandwidth()} `) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t, medianInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t, medianInfo) });; g.append("path") .attr("stroke", "currentColor") .attr("stroke-width", 3) .attr("d", d => ` M${x(d.key) + x.bandwidth() * 0.25},${y(d.value.range[0])} H${x(d.key) + x.bandwidth() * 0.75} `) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t, minIQRInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t, minIQRInfo) }); g.append("path") .attr("stroke", "currentColor") .attr("stroke-width", 3) .attr("d", d => ` M${x(d.key) + x.bandwidth() * 0.25},${y(d.value.range[1])} H${x(d.key) + x.bandwidth() * 0.75} `) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t, maxIQRInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t, maxIQRInfo) }); g.append("g") .attr("fill", "currentColor") .attr("fill-opacity", 0.45) .attr("stroke", "none") .attr("transform", d => `translate(${x(d.key) + x.bandwidth() / 2},0)`) .selectAll("circle") .data(d => d.value.values) .join("circle") .attr("r", 8) .attr("cx", () => (Math.random() - 0.5) * 10) .attr("cy", d => y(d.y)) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t, chapterInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t, chapterInfo) }); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }46:[{"id":"ce2c02e1846b474d2d1f628fb1af1607efe6894a7f6893d3a53d62504e328e84045cdd4dea8a25fd971c3370162f4e54aa3477728a4639cd24943414023d14b7","href":"https://static.observableusercontent.com/files/ce2c02e1846b474d2d1f628fb1af1607efe6894a7f6893d3a53d62504e328e84045cdd4dea8a25fd971c3370162f4e54aa3477728a4639cd24943414023d14b7","name":"analisis.csv","type":"text/csv","lastModified":1676855285831.06,"size":8493}] 43:{"id":"a5b546df44cd77a5","slug":null,"title":"Box Plot Wheel","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-02-20T01:08:05.530Z","update_time":"$D2023-03-24T07:45:03.034Z","view_time":null,"first_public_time":"$D2023-02-23T06:02:54.967Z","has_unpublished_edits":null,"fork":{"id":"bec24946ad12479b","slug":"box-plot-wheel-of-time-chapter-length","title":"Box Plot Wheel of Time Chapter Length","owner":{"id":"95d679ed011d1670","login":"dunderdan","name":"Dunder Danilo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a8b950203491c0f","login":"ixd-sheridan","name":"IXD Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5d0881196900a7350c64d546dd5099a2532e7060f4150f97c1375dae8cb92d45","tier":"education_2026","bio":"Interaction Design at Sheridan College","following":false},"version":806,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc12a38db89b0dcc","login":"liruito","name":"Ruitong Li","avatar_url":"https://avatars-next.observableusercontent.com/f4bd60aa6c61ac1135f76b1703403bcc67fb67cea319dae9a696d4b4c39402da","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"0a8b950203491c0f","login":"ixd-sheridan","name":"IXD Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5d0881196900a7350c64d546dd5099a2532e7060f4150f97c1375dae8cb92d45","tier":"education_2026","role":"editor"},{"type":"individual","id":"cc12a38db89b0dcc","login":"liruito","name":"Ruitong Li","avatar_url":"https://avatars-next.observableusercontent.com/f4bd60aa6c61ac1135f76b1703403bcc67fb67cea319dae9a696d4b4c39402da","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Box Plot Wheel","cells":[{"id":0,"value":"md`# Box Plot Wheel\n\nThis box plot represents the distribution of three different personalities corresponding to different occupations. box plot can intuitively display the average distribution range, maximum, minimum, and median.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"### Create a drop bar to select different data\n+ add a array in \"[]\" to create selections\n+ The following box plot is represented using the selected data in the dropdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":644,"value":"viewof selectedPersonality = Inputs.select([\"Conscientiousness\", \"Extraversion\", \"Agreeableness\"], {label: \"Select one\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"### Create a check box to delete discrete value\n+ Function: Checkbox for choosing to delete values\n+ Method: Use an \"if\" logic to operate the checkbox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"viewof farouts = checkbox({\n title: 'Far outs',\n description: 'Add far outs (extreme outliers) to min and/or max value',\n options: [\n { value: 'min', label: 'Delete min value' },\n { value: 'max', label: 'Delete max value' },\n ],\n value: ['min']\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"### Create a slider for editing the opacity of the range in box plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":456,"value":"viewof opacity = slider({\n min: 0,\n max: 1,\n value: 0.7,\n description: 'opacity'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":711,"value":"### Box Plot Display\nThe box plot is shown below. The template I used is from ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"note: `.attr(\"opacity\", opacity)` is where I changed to let the opacity be whatever the slider decides to be","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":727,"value":"### Bins Array\nthe array named \"bins\" attaches the categories of the original data to be used for x axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"bins = d3.nest() // nest function allows to group the calculation per level of a factor\n .key(function(d) { return d.x;})\n .rollup(function(d) {\n const values = d.map(function(g) { return { y: g.y, chapter: g.chapter};}).sort((a, b) => d3.ascending(a.y, b.y))\n const min = values[0].y;\n const max = values[values.length - 1].y;\n const q1 = d3.quantile(values.map(ch => ch.y), 0.25);\n const q2 = d3.quantile(values.map(ch => ch.y), 0.50);\n const q3 = d3.quantile(values.map(ch => ch.y), 0.75);\n const iqr = q3 - q1; // interquartile range\n const r0 = Math.max(min, q1 - iqr * 1.5);\n const r1 = Math.min(max, q3 + iqr * 1.5);\n return {\n values,\n gender: d[0].gender,\n nationality: d[0].nationality,\n quartiles:[q1, q2, q3],\n range: [r0, r1],\n outliers: values.filter(v => v.y < r0 || v.y > r1), \n };\n })\n .entries(cleanDataB)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"### Attach the Data file\n+ First, put the files you need into the \"files > file attachments\" on the right.\n+ Change the `d3.csvParse(await FileAttachment(\"yourFilesName.csv\"))` to your data file's name.\n+ The first \"()\" is to attach what the data you need for your chart and it will represent the way in the second \"()\" in this array. I think it's like the data.map function\n+ It will prompt you the error if you use the data that you didn’t attach in the first \"()\".\n+ If you didn't add a \"+\" in front of the data, the data will represent a string format, for example:\n + `Agreeableness: +Agreeableness` will be shown as Agreeableness: 29.370315 in the array.\n + `Agreeableness: Agreeableness` will be shown as Agreeableness: \"29.370315\" in the array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"analisis = d3.csvParse(await FileAttachment(\"analisis.csv\").text(), ({usuario, Conscientiousness, Extraversion, Agreeableness, categoria}) => ({name: usuario, x: categoria, y: +Conscientiousness, Conscientiousness: +Conscientiousness, Extraversion: +Extraversion, Agreeableness: +Agreeableness, }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"### Operate the dropdown function\nThis step is to get the above dropdown running. This step uses the data.map function to reformat the data in the array. Name indicates the user ID. Data in x remains unchanged, and data in y is the selected data in dropdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"cleanData = analisis.map(person => {\n return {\n name: person.name,\n x: person.x,\n y: person[selectedPersonality]\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"### Operate the checkbox function\nThis step is to get the checkbox running. The code is divided into two separate sections, each corresponding to the functionality of one of the Checkboxes. Eventually they all return to cleanData. The general logic is:\n+ Using an if loop first, the purpose is to separate whether to check the checkbox into two cases: In the if loop, if it's true, it's going to get rid of the Max/min.\n+ The method to delete the max/min value is: first use data.map function to extract the data to be screened, and then use d3.min/d3.max function to screen out the maxi/min value. Finally, the max/min value is excluded with the return and filter.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":679,"value":"cleanDataA = {\n if(farouts.includes('min')){\n let yValues = cleanData.map( person => person.y)\n let yMin = d3.min(yValues)\n return cleanData.filter(person => person.y != yMin)\n }\n return cleanData\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"cleanDataB = {\n if(farouts.includes('max')){\n let yValues = cleanData.map( person => person.y)\n let yMax = d3.max(yValues)\n return cleanDataA.filter(person => person.y != yMax)\n }\n return cleanData\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"### Process\nHere are some of my attempts at functionality.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":772,"value":"I tried but failed to use a radio instead of the dropdown and use an if loop to run it. I separated all of the data into 3 different arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":542,"value":"// analisis2 = d3.csvParse(await FileAttachment(\"analisis.csv\").text(), ({usuario, Conscientiousness, Extraversion, Agreeableness, categoria}) => ({name: usuario, x: categoria, y: +Extraversion}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"// analisis3 = d3.csvParse(await FileAttachment(\"analisis.csv\").text(), ({usuario, Conscientiousness, Extraversion, Agreeableness, categoria}) => ({name: usuario, x: categoria, y: +Agreeableness}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"From the template of I tried to delete the discrete value. But I find some different between it and what I want. In this template, it used a random array to be the data instead of an existing dataset. And the discrete value was added by using the function data.push.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":675,"value":"// d3.min(bins, d => d.value.range[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"// datas = {\n// let data = []\n// analisis.forEach(v => data.push(v))\n// if(farouts.includes('min')) data.shift(d3.min(bins, d => d.value.range[0]))\n// if(farouts.includes('max')) data.shift(d3.max(bins, d => d.value.range[1]))\n// return data.sort(d3.ascending)\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"x = d3.scaleBand()\n .domain(bins.map(bin => bin.key))\n .rangeRound([margin.left, width - margin.right])\n .paddingInner(0.05)\n .paddingOuter(.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"y = d3.scaleLinear()\n .domain([d3.min(bins, d => d.value.range[0]), d3.max(bins, d => d.value.range[1])]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(n).tickSizeOuter(0))\n .call(g => g.selectAll('text').attr(\"y\", 0)\n .attr(\"x\", 10)\n .attr(\"dy\", \".35em\")\n .attr(\"transform\", \"rotate(85)\")\n .attr(\"text-anchor\", \"start\")\n .style('font-size', fontSize)\n .classed('box-plot-tick', true))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.selectAll('.tick').style('font-size', fontSize).classed('box-plot-tick', true))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"color = d3.scaleOrdinal([\"#888888\", \"#bbbbbb\", \"green\", \"#5B8B9B\", \"#77C0A0\", \"#264D54\", \"#324280\", \"#D27AE9\", \"#867AC4\", \"#72329E\", \"#BEE091\", \"#48853A\", \"#8BEC6E\", \"#8B9662\", \"#663B11\", \"#F3A852\", \"#E0502F\", \"#932846\", \"#A17965\", \"#E7799E\", \"#EC3686\", \"#414B17\", \"#F0D447\", \"#4141F5\", \"#E743F4\"]).domain([\"last appeared\", \"last mentioned\", \"continue\", \"not specified\", \"Female\", \"Male\", \"Andoran\", \"Unknown nationality\", \"Shienaran\", \"Malkieri\", \"Manetherenite\", \"Illianer\", \"Taraboner\", \"Ghealdanin\", \"Aridholin\", \"Essenian\", \"Far Madding\", \"Darmovanin\", \"Saldaean\", \"Murandian\" ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"n = width / 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"height = (width < 600 ? 700 : width < 800 ? 1200 : 1500)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"margin = ({top: 20, right: 0, bottom: width / 4, left: width / 15})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"allInfo = function(d) {\n \n return `\n Minimum IQR: ${d.value.range[0]} words
\nQ1 (25%): ${d.value.quartiles[0]} words
\nQ2 (Median): ${d.value.quartiles[1]} words
\nQ3 (75%): ${d.value.quartiles[2]} words
\nMaximum IQR: ${d.value.range[1]} words
\nNumber of POVs.: ${d.value.values.length}\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"minIQRInfo = function(d) {\n \n return `\n Minimum IQR: ${d.y.range[0]} words\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"maxIQRInfo = function(d) {\n \n return `\n Maximum IQR: ${d.y.range[1]} words\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"chapterInfo = function(d) {\n \n return `\n ${d.name} with ${d.y} marks.\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"medianInfo = function(d) {\n \n return `\n Q2 (Median): ${d.value.quartiles[1]} words\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"function tooltipMouseOver(d, i, t, info) {\n let el = d3.select(\"body\");\n \n let div = el\n .append(\"g\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"opacity\", 0);\n\n div\n .html(info(d))\n .style(\"left\", (d3.event.pageX + 10) + \"px\")\n .style(\"top\", (d3.event.pageY - 10) + \"px\")\n .transition(t)\n .style(\"opacity\", 0.9)\n ;\n \n let el2 = d3.select(this);\n \n el2\n .transition(t)\n .style(\"fill-opacity\", 0.9)\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", \"1px\")\n .style(\"stroke-opacity\", 0.7);\n \n \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"fontSize = width / 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"function tooltipMouseOut(d, i, t) {\n let el = d3.selectAll(\".tooltip\");\n \n el.each(function() {\n\t\tel.remove();\n\t}); \n let el2 = d3.select(this);\n \n el2\n .transition(t)\n .style(\"fill-opacity\", 0.5)\n .style(\"stroke-width\", \"0px\");\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"tooltip = html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"import {checkbox, slider} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"