29:null 2a:["$","title",null,{"children":"Assignment 4 forked mark | Mark Wu | Observable"}] 2f:T14e6,//this code is modified piechart code // Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/pie-chart function PieChart_new(data, { name = ([x]) => x, // given d in data, returns the (ordinal) label value = ([, y]) => y, // given d in data, returns the (quantitative) value title, // given d in data, returns the title text width = 640, // outer width, in pixels height = 300, // outer height, in pixels innerRadius = 0, // inner radius of pie, in pixels (non-zero for donut) outerRadius = Math.min(width, height) / 2, // outer radius of pie, in pixels labelRadius = (innerRadius * 0.2 + outerRadius * 0.8), // center radius of labels format = ",", // a format specifier for values (in the label) names, // array of names (the domain of the color scale) colors, // array of colors for names stroke = innerRadius > 0 ? "none" : "white", // stroke separating widths strokeWidth = 1, // width of stroke separating wedges strokeLinejoin = "round", // line join of stroke separating wedges padAngle = stroke === "none" ? 1 / outerRadius : 0, // angular separation between wedges } = {}) { // Compute values. const N = d3.map(data, name); const V = d3.map(data, value); const I = d3.range(N.length).filter(i => !isNaN(V[i])); // Unique the names. if (names === undefined) names = N; names = new d3.InternSet(names); // Chose a default color scheme based on cardinality. // if (colors === undefined) colors = d3.schemeSpectral[names.size]; // if (colors === undefined) colors = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), names.size); if (colors === undefined) colors = 'steelblue'; if (colors === undefined) colors = 'steelblue'; // Construct scales. const color = d3.scaleOrdinal(names, colors); // Compute titles. if (title === undefined) { const formatValue = d3.format(format); title = i => `${N[i]}\n${formatValue(V[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } // Construct arcs. const arcs = d3.pie().padAngle(padAngle).sort(null).value(i => V[i])(I); const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-175, -115, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-linejoin", strokeLinejoin) .selectAll("path") .data(arcs) .join("path") .attr("fill", d => "steelblue") .attr("d", arc) .append("title") .text(d => title(d.data)); svg.append("text") .attr("x", -100) .attr("y", -90) .text("Pie chart of household head gender"); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .selectAll("tspan") .data(d => { const lines = `${title(d.data)}`.split(/\n/); return (d.endAngle - d.startAngle) > 0.25 ? lines : lines.slice(0, 1); }) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => i ? null : "bold") .text(d => d); svg.selectAll("path") .on("click", function(d, i) { // help ding's interaction mutable select_ind += 1; // same as np.unique var female_count = 0; var male_count = 0; for (let i = 0; i < selectedData.length; i++) { if(selectedData[i]["Household Head Sex"] == "Male") { male_count += 1; } else if (selectedData[i]["Household Head Sex"] == "Female"){ female_count += 1; } } // handle select and deselect var found = selection_mark.indexOf(i.value); if (found > -1) { mutable selection_mark.splice(found, 1); mutable select_num_mark -= 1; d3.select(this).attr("fill", "steelblue"); } else { mutable selection_mark.push(i.value); mutable select_num_mark += 1; d3.select(this).attr("fill", "red"); } // console.log("MMMMMMMM"); // console.log(selection_mark); // use selection_mark to create boolean mask for Ding // var boolean_mask = []// mutable initte with all trues var temp = [] // translate to understanble languages for (let q = 0; q i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text marginTop = 20, // the top margin, in pixels marginRight = 0, // the right margin, in pixels marginBottom = 30, // the bottom margin, in pixels marginLeft = 0, // the left margin, in pixels width = 1200, // the outer width of the chart, in pixels height = 900, // the outer height of the chart, in pixels xDomain, // an array of (ordinal) x-values xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // y-scale type yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] xPadding = 0.1, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis color = "steelblue" // bar fill color } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const visWidth = 100; const visHeight = 200; // Compute default domains, and unique the x-domain. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; xDomain = new d3.InternSet(xDomain); // Omit any data not present in the x-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).padding(xPadding); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, -100, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .attr("fill", color) .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i])) .attr("y", i => yScale(Y[i])) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("width", xScale.bandwidth()); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg.selectAll("rect") .on("click", function(d, i) { var found = agri_selection.indexOf(i); // console.log(found,agri_selection,i, this); console.log(agri_selection) console.log(this) d3.select(this).attr("fill", "red"); if (found > -1) { mutable agri_selection.splice(found, 1); mutable num_agri_selected -= 1; d3.select(this).attr("fill", "steelblue"); mutable select_ind += 1; } else { mutable agri_selection.push(i); mutable num_agri_selected += 1; d3.select(this).attr("fill", "red"); mutable select_ind += 1; } var temp = []; // translate to understanble languages for (let q = 0; q d[xCol])]).nice() .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, d3.max(selectedData, d => d[yCol])]).nice() .range([visHeight, 0]); // set up axes const xAxis = d3.axisBottom(x); const xAxisGroup = g.append('g') .attr('transform', `translate(0, ${visHeight})`); xAxisGroup.call(xAxis) // add grid lines // references https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -visHeight) .attr('y2', 0)) // add label .append('text') .attr('x', visWidth / 2) .attr('y', 40) .attr('fill', 'black') .attr('text-anchor', 'middle') .attr('font-weight', 'bold') .text(xLabel); const yAxis = d3.axisLeft(y); const yAxisGroup = g.append('g'); // add grid lines // refernces https://observablehq.com/@d3/connected-scatterplot yAxisGroup.call(yAxis) .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', visWidth)) // add label .append('text') .attr("transform", "rotate(-90)") // now x, y flipped in terms of positioning .attr("x", -1 * (visHeight / 2)) .attr("y", -50) .attr('fill', 'black') .attr('dominant-baseline', 'middle') .attr('font-weight', 'bold') .text(yLabel); // draw points const radius = 3; const dots = g.selectAll('circle') .data(selectedData) .join('circle') .attr('cx', d => x(d[xCol])) .attr('cy', d => y(d[yCol])) .attr('r', radius) // make dots look like Vega-Lite dots .attr('opacity', 0.8) .attr('stroke', d => "gray") .attr('fill', 'none') .attr('stroke-width', 2); // ********** new stuff starts here ********** const brush = d3.brush() // set the space that the brush can take up .extent([[0, 0], [visWidth, visHeight]]) // handle events .on('brush', onBrush) .on('end', onEnd); g.append('g') .call(brush); function onBrush(event) { // event.selection gives us the coordinates of the // top left and bottom right of the brush box const [[x1, y1], [x2, y2]] = event.selection; // return true if the dot is in the brush box, false otherwise function isBrushed(d) { const cx = x(d[xCol]); const cy = y(d[yCol]) return cx >= x1 && cx <= x2 && cy >= y1 && cy <= y2; } // style the dots dots.attr('stroke', d => isBrushed(d) ? "red" : 'gray'); // update the data that appears in the cars variable svg.property('value', cars.filter(isBrushed)).dispatch('input'); console.log(isBrushed) } function onEnd(event) { // if the brush is cleared if (event.selection === null) { // reset the color of all of the dots dots.attr('stroke', d => "gray"); svg.property('value', initialValue).dispatch('input'); } } return svg.node(); }32:T14c6, final = { var width = 1200, height = 900, w_break = 500; // data ----------------------------------------------------------------------------------------------- //var dataset = data.slice(0, 200); // place holder // Scale ----------------------------------------------------------------------------------------------- /* var xScale_left = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, w_break]) .padding(0.05); var yScale_1 = d3.scaleLinear() .domain([0, d3.max(dataset.map(x=> x["Total Household Income"]).map(Number))]) .range([0, height/3]); var yScale_2 = d3.scaleLinear() .domain([0, d3.max(dataset.map(x=> x["Total Household Income"]).map(Number))]) // .range([height/3, (2*height)/3]); .range([0, height/3]); var yScale_3 = d3.scaleLinear() .domain([0, d3.max(dataset.map(x=> x["Total Household Income"]).map(Number))]) // .range([(2*height)/3, height]); .range([0, height/3]); var yScale_main = d3.scaleLinear() .domain([0, d3.max(dataset.map(x=> x["Total Household Income"]).map(Number))]) .range([0, height]); */ // viz ----------------------------------------------------------------------------------------------- var svg = d3.select(DOM.svg(width, height)); let names = []; // l1 ---------------------------------------------------------------------------------------------- //let top1 = 300; svg.node().append(gender_chart); // l2 ----------------------------------------------------------------------------------------------- svg.node().append(barchart_node); // svg.node().appendChild(svg); // l3 ----------------------------------------------------------------------------------------------- let top3 = 900 svg.node().appendChild(Head_Age_chart); // main ----------------------------------------------------------------------------------------------- const thresholds = 40; const marginTop = 20; // top margin, in pixels const marginRight = 50; // right margin, in pixels const marginBottom = 30; // bottom margin, in pixels const marginLeft = 540; // left margin, in pixels const insetLeft = 0.5; // inset left edge of bar const insetRight = 0.5; // Compute values. const X = d3.map(data, d => Number(d["Total Household Income"])); const Y0 = d3.map(data, () => 1); const I = d3.range(X.length); // Compute bins. const bins = d3.bin().thresholds(thresholds).value(i => X[i])(I); const Y = Array.from(bins, I => d3.sum(I, i => Y0[i])); if (false) { const total = d3.sum(Y); for (let i = 0; i < Y.length; ++i) Y[i] /= total; } // Compute default domains. let xDomain = [bins[0].x0, bins[bins.length - 1].x1]; let yDomain = [0, d3.max(Y)]; // Construct scales and axes. const xScale = d3.scaleLinear(xDomain, [marginLeft, width - marginRight]); const yScale = d3.scaleLinear(yDomain, [height - marginBottom, marginTop]); const xAxis = d3.axisBottom(xScale).ticks(width / 80, "0.2s").tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40); svg.append("g").attr("class", "dp") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) svg.append("g").attr("class", "dp") .attr("fill", "steelblue") .selectAll("rect").attr("class", "dp rect") .data(bins) .join("rect") .attr("x", d => xScale(d.x0) + insetLeft) .attr("width", d => Math.max(0, xScale(d.x1) - xScale(d.x0) - insetLeft - insetRight)) .attr("y", (d, i) => yScale(Y[i])) .attr("height", (d, i) => yScale(0) - yScale(Y[i])); // .append("title") // .text((d, i) => [`${d.x0} ≤ x < ${d.x1}`, Y[i]].join("\n")); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.append("text") .attr("x", width - marginRight-10) .attr("y", 27) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("Income")); // Interaction select_ind; // console.log("dp") // console.log(select_ind) // console.log(boolean_mask) // console.log(agri_boolean) let newdata = selectedData.filter((d, i) => { if (boolean_mask[i] && agri_boolean[i]){ return d } }) // console.log(newdata) const X_selected = d3.map(newdata, d => Number(d["Total Household Income"])); const Y0_selected = d3.map(newdata, () => 1); const I_selected = d3.range(X_selected.length); let bins_slected = d3.bin().thresholds(thresholds).value(i => X_selected[i])(I_selected); const Y_selected = Array.from(bins_slected, I_selected => d3.sum(I_selected, i => Y0_selected[i])); svg.append("g").attr("class", "dp") .attr("fill", "yellow") .selectAll("rect").attr("class", "dp rect selected") .data(bins_slected) .join("rect") .attr("x", d => xScale(d.x0) + insetLeft) .attr("width", d => Math.max(0, xScale(d.x1) - xScale(d.x0) - insetLeft - insetRight)) .attr("y", (d, i) => yScale(Y_selected[i])) .attr("height", (d, i) => yScale(0) - yScale(Y_selected[i])); return svg.node(); }33:[{"id":"c754962da4305fcd8888bd80ee279353b65eea2a016f5bcbde5d076425978adb50ad2fd0826661d7643f78b49f04e62ba292a65cee86b1ccfaf84ea65074c96b","href":"https://static.observableusercontent.com/files/c754962da4305fcd8888bd80ee279353b65eea2a016f5bcbde5d076425978adb50ad2fd0826661d7643f78b49f04e62ba292a65cee86b1ccfaf84ea65074c96b","name":"Family Income and Expenditure.csv","type":"text/csv","lastModified":1679526351381.613,"size":22664315}] 2d:{"id":"ea4816c2944a9031","slug":null,"title":"Assignment 4 forked mark","thumbnail":"20a3fd46edea66a1499b635ecc4de0989b77a377fa1562137a034d992896a104","access_level":"public","create_time":"$D2023-03-22T23:05:51.381Z","update_time":"$D2023-03-23T00:31:34.029Z","view_time":null,"first_public_time":"$D2023-03-22T23:05:51.381Z","fork":{"id":"d7b59dae59acb809","slug":null,"title":"Assignment 4","owner":{"id":"b1cd6d0acb78202a","login":"markwu098","name":"Mark Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b1cd6d0acb78202a","login":"markwu098","name":"Mark Wu","avatar_url":"https://avatars-next.observableusercontent.com/e5fce5833399ba7413c76edad9b662772672e452bc7cdba48dc591d06be29308","tier":"starter_2024"},"version":1171,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e31f85affc0818e1","login":"markwu098","name":"Mark Wu","avatar_url":"https://avatars-next.observableusercontent.com/e5fce5833399ba7413c76edad9b662772672e452bc7cdba48dc591d06be29308","tier":null}],"members":[{"type":"individual","id":"e31f85affc0818e1","login":"markwu098","name":"Mark Wu","avatar_url":"https://avatars-next.observableusercontent.com/e5fce5833399ba7413c76edad9b662772672e452bc7cdba48dc591d06be29308","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Assignment 4 forked mark","cells":[{"id":0,"value":"# Assignment 4 forked mark","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"raw = FileAttachment(\"Family Income and Expenditure.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"data = raw.filter(d => d[\"Total Household Income\"] < 1000000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"mutable selectedData = data;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"mutable select_ind = 0; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":842,"value":"mutable boolean_mask = Array(selectedData.length).fill(true);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"mutable selection_mark = [];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":473,"value":"mutable select_num_mark = 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"agricultural_house = {\n // var data = selectedData\n var data_len = data.length;\n var count_1=0;\n var count_0=0;\n var agri1 = [];\n var agri0 = [];\n for (let i = 0; i < data_len; ++i) {\n if (data[i][\"Agricultural Household indicator\"]==\"1\"){\n count_1 +=1;\n agri1.push(i);\n }\n else{\n count_0 +=1;\n agri0.push(i);\n }\n }\n console.log(count_0);\n console.log(count_1);\n \n var agrData = [{name:'Not Agricultural', value: [count_0,agri0]},{name: 'Is Agricultural', value: [count_1,agri1]}];\n console.log(agrData);\n return agrData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"agricultural_house","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":830,"value":"mutable agri_selection = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"mutable num_agri_selected=0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":575,"value":"//interactive array input\nmutable agri_boolean = Array(agricultural_house[0].value[0]+agricultural_house[1].value[0]).fill(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"Create Static Viz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":620,"value":"# Household Head Sex","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":121,"value":"import {Histogram} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"// household lead \ngender_house = {\n var data = selectedData\n var data_len = data.length;\n var female_count=0;\n var male_count=0;\n var female_list = [];\n var male_list = [];\n var booleanmask = [];\n for (let i = 0; i < data_len; ++i) {\n if (data[i][\"Household Head Sex\"]==\"Female\"){\n female_count +=1;\n female_list.push(data[i]);\n }\n else{\n male_count +=1;\n male_list.push(data[i]);\n }\n }\n console.log(male_count);\n console.log(female_count);\n \n // var genderData = [{name:'Female', value: [female_count,female_list]},{name: 'Male', value: [male_count,male_list]}];\n var genderData = [ {categories: \"Household Head Sex\"},{name : \"Female\", operation: \"==\", value: [female_count,female_list]} ,{name: \"Male\",operation: \"==\", value: [male_count,male_list]} ];\n console.log(genderData);\n return genderData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"gender_chart = PieChart_new(gender_house.slice(1), {\n name: d => d.name,\n value: d => d.value[0],\n width,\n height: 220\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":739,"value":"gender_chart.append(\"svg\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"$2f","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1005,"value":"barchart_node = BarChart_agr([agricultural_house[0].value[0],agricultural_house[1].value[0]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1012,"value":"// barChart(agricultural_house)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":963,"value":"Household Agriculture","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":961,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"# Household Head Age","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":592,"value":"// https://github.com/bumbeishvili/data-driven-range-slider\n// https://observablehq.com/@bumbeishvili/data-driven-range-sliders\nimport {rangeSlider} from \"@bumbeishvili/utils\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"// viewof Head_Age_chart = rangeSlider(data, d=> d[\"Household Head Age\"]);\n// Create an SVG element for the slider\nHead_Age_chart = {\n // Define the width of the chart\n const width = 80;\n const height= 20;\n\n // Create an SVG element with the specified width\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", 500)\n\n // Define the range slider using rangeSlider function\n var rangeSliderElement = rangeSlider(selectedData, d => d[\"Household Head Age\"]);\n var rangeSliderSelection = d3.select(rangeSliderElement)\n .attr(\"width\", width)\n console.log(rangeSliderElement)\n \n\n // Append the range slider to the SVG element\n svg.append(() => rangeSliderElement)\n ;\n\n // Return the SVG element\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"// Filter the data based on the range slider value\nmutable Head_Age_boolan= data.map(d => d[\"Household Head Age\"] >= Head_Age_chart.range[0] && d[\"Household Head Age\"] <= Head_Age_chart.range[1]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1007,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1060,"value":"scatter = brushableScatterplot();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"# Interaction ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":53,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"