31:T7bc,zipmap = { const svg = d3.create('svg') .attr('width', mapWidth) .attr('height', mapHeight); const tooltip = d3.select("body").append("div").call(createTooltip); const tipContent = d => { let c = concentration[d.properties.zcta] || "NA"; const html = ` Zip Code: ${d.properties.zcta}
Typology: ${keyEdit(typology)}
Concentration By Area: ${c === "NA" ? c: d3.format(".2%")(concentration[d.properties.zcta])}
` return html; } const m = svg.append("g"); // .attr("transform", `translate(${margin.left}, ${margin.top})`); let max = d3.quantile(Object.entries(concentration).map(d => d[1]).filter(d => d != undefined).sort(), .9); let color = d3.scaleSequential([0, max], d3.interpolateBlues).nice(); const g = svg.append("g") .attr("transform", `translate(${margin.left - 20}, ${margin.top})`) .call(legend, { title: "Percent of Total Area Within Zip", width: 250, color: color, tickFormat: "%" }); const zips = m.selectAll(".zips") .data(nycGeo.features) .join("path") .attr("class", "zips") .attr("d", path) .attr("fill", d => color(concentration[d.properties.zcta]) || "#ffffff") .attr("stroke", "white"); zips.on("mouseover", function(event, d) { tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); let c = color(concentration[d.properties.zcta]) || "#ffffff"; d3.select(this).attr("fill", chroma(c).darken()); }).on("mousemove", function(event, d) { tooltip .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); }).on("mouseout", function(event, d) { tooltip.style("display", "none"); d3.select(this).attr("fill", color(concentration[d.properties.zcta]) || "#ffffff"); }); return svg.node(); } 32:Ta6d,histogramSize = { const w = histogramWidth; const h = 400; const svg = d3.create("svg") .attr("viewBox", [0, 0, w, h]); const tooltip = d3.select("body").append("div").call(createTooltip); const tipContent = d => { const html = ` Bin Start: ${d3.format(",.0f")(d.x0)} sqft
Bin End: ${d3.format(",.0f")(d.x1)} sqft
Number of Buildings: ${d3.format(",.0f")(d.length)}
` return html; } let x = d3.scaleLinear() .domain([binSize[0].x0, binSize[binSize.length - 1].x1]) .range([margin.left, w - margin.right]); let y = d3.scaleLinear() .domain([0, d3.max(binSize, d => d.length) * 1.05]).nice() .range([h - margin.bottom, margin.top]) let xAxis = g => g .attr("transform", `translate(0,${h - margin.bottom})`) .call(d3.axisBottom(x).ticks(w / 80).tickSizeOuter(0).tickFormat(d3.format(".2s")).tickPadding(8)) .call(g => g.append("text") .attr("x", w - margin.right) .attr("y", 40) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "end") .text("Building Size (GSF)")); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(h / 40).tickFormat(d3.format(".0s")).tickPadding(8)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").attr("fill", "#434a54")) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Buildings")); let c = "#2a7ab8"; let b = svg.append("g") .attr("fill", c); const bins = b.selectAll("rect") .data(binSize) .join("rect") .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); bins .on("mouseover", function(event, d) { tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); d3.select(this).attr("fill", chroma(c).darken()); }).on("mousemove", function(event, d) { tooltip .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); }).on("mouseout", function(event, d) { tooltip.style("display", "none"); d3.select(this).attr("fill", c); }); let gx = svg.append("g") .call(xAxis); let gy = svg.append("g") .call(yAxis); return svg.node(); }33:Ta22,histogramYear = { const w = histogramWidth; const h = 400; const svg = d3.create("svg") .attr("viewBox", [0, 0, w, h]); const tooltip = d3.select("body").append("div").call(createTooltip); const tipContent = d => { const html = ` Bin Start: ${d3.format(".0f")(d.x0)}
Bin End: ${d3.format(".0f")(d.x1)}
Number of Buildings: ${d3.format(",.0f")(d.length)}
` return html; } let x = d3.scaleLinear() // .domain([binYear[0].x0, binYear[init.length - 1].x1]) .domain([1850, 2020]) .range([margin.left, w - margin.right]); let y = d3.scaleLinear() .domain([0, d3.max(binYear, d => d.length) * 1.05]).nice() .range([h - margin.bottom, margin.top]) let xAxis = g => g .attr("transform", `translate(0,${h - margin.bottom})`) .call(d3.axisBottom(x).ticks(w / 80).tickSizeOuter(0).tickFormat(d3.format(".0f")).tickPadding(8)) .call(g => g.append("text") .attr("x", w - margin.right) .attr("y", 40) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "end") .text("Year of Construction")); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(h / 40).tickFormat(d3.format(".0s")).tickPadding(8)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Buildings")); let c = "#2a7ab8"; let b = svg.append("g") .attr("fill", c); const bins = b.selectAll("rect") .data(binYear) .join("rect") .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); bins .on("mouseover", function(event, d) { tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); d3.select(this).attr("fill", chroma(c).darken()); }).on("mousemove", function(event, d) { tooltip .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); }).on("mouseout", function(event, d) { tooltip.style("display", "none"); d3.select(this).attr("fill", c); }); let gx = svg.append("g") .call(xAxis); let gy = svg.append("g") .call(yAxis); return svg.node(); }34:T89a,tree = { const svg = d3.create("svg") .attr("viewBox", [0, 0, treeWidth, treeHeight]) .style("font", "10px sans-serif"); const tooltip = d3.select("body").append("div").call(createTooltip); const tipContent = d => { const html = ` Typology: ${keyEdit(d.data.name)}
Total Area: ${d3.format(".4s")(d.data.value)} sqft
Number of Buildings: ${d3.format(",d")(d.data.count)}
` return html; } const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; return typeColor(d.data.name); }) .attr("fill-opacity", 0.8) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .on("mouseover", function(event, d) { tooltip.style("display", null); tooltip.html(tipContent(d)) .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); d3.select(this).attr("fill-opacity", 1); }).on("mousemove", function(event, d) { tooltip .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); }).on("mouseout", function(event, d) { tooltip.style("display", "none"); d3.select(this).attr("fill-opacity", 0.8); }); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); const invert = ["Vacant_Unknown"]; leaf.append("text") .attr("clip-path", d => d.clipUid) .attr("fill", d => invert.includes(d.data.name) ? "#ffffff": "black") .selectAll("tspan") .data(d => keyEdit(d.data.name).split(/\s+/g).concat(d3.format(".3s")(d.value))) .join("tspan") .attr("x", 5) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.5 + i * 1.1}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); return svg.node(); }35:T49f,typeColor = name => { const lookup = { "One_to_Four_Family_Pre1980":"#ffe8ad", "One_to_Four_Family_Post1980":"#edc949", "Multifamily_LowRise_PreWar":"#f8cfab", "Multifamily_LowRise_PostWar":"#f7c190", "Multifamily_LowRise_Post1980":"#f6b478", "Multifamily_HighRise_PreWar":"#f5a75f", "Multifamily_HighRise_PostWar":"#f39a44", "Multifamily_HighRise_Post1980":"#f28e29", "Office_LowRise_PreWar":"#4e7aa7", "Office_LowRise_PostWar":"#749bc3", "Office_LowRise_Post1980":"#9ac3e4", "Office_HighRise_PreWar":"#76b7b2", "Office_HighRise_PostWar":"#a1cecb", "Office_HighRise_Post1980":"#cdeae9", "Mixed_Residential_Commercial":"#af7aa1", "Warehouse":"#9c755f", "Industrial":"#bab0ab", "Hotel":"#f7d0d8", "Healthcare":"#af7aa1", "Retail_Standalone":"#e15759", "Restaurant_Standalone":"#f59ba7", "Institutional_Public_Assembly":"#59a14e", "School_Primary":"#8ebc7f", "University":"#c3e1b8", "Parking":"#e2dedc", "Transportation_Utility_Other":"#d0cac7", "Vacant_Unknown":"#595655" } // return d3.scaleOrdinal(Object.keys(lookup), d3.schemeTableau10)(name); return lookup[name]; }36:T115c,legend = (g, obj) => { const svg = g; // .attr("transform", `translate(${margin.left},${margin.top})`); let color = obj.color || d3.scaleSequential([0, 100], d3.interpolateBlues); let title = obj.title || "Title"; let tickSize = obj.tickSize || 6; let width = obj.width || 320; let height = obj.height || 44 + tickSize; let marginTop = obj.marginTop || 18; let marginRight = obj.marginRight || 0; let marginBottom = obj.marginBottom || 16 + tickSize; let marginLeft = obj.marginLeft || 0; let ticks = obj.ticks || width / 64; let tickFormat = obj.tickFormat? obj.tickFormat: undefined; let tickValues = obj.tickValues? obj.tickValues: undefined; let tickAdjust = d => d.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues) .tickPadding(8)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); } 37:[] 2f:{"title":"NYC Typologies","cells":[{"id":0,"value":"md`# NYC Typologies\nThis notebook shows the breakdown of building typologies in New York City, which form the basis of the NYC electrification study. The typologies are designed to capture relevant differences in energy use across the building stock, in order to create a more accurate representation of city-wide energy use. In total, there are 27 typologies, totalling over 5 billion square feet of building area. All data comes from NYC's [PLUTO dataset](https://www1.nyc.gov/site/planning/data-maps/open-data/dwn-pluto-mappluto.page), cleaned and edited for the purposes of this anlaysis. Each chart is tied to the typology selection below.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"viewof typology = Select(new Map(typeList), {label: \"Typology\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"md`
\n### Concentration | ${keyEdit(typology)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"md`### Building Size | ${keyEdit(typology)}\nRepresents the distribution of ${keyEdit(typology)} building sizes across the entire city. In certain instances, outliers were removed to show more granularity in the distribution. Note that the x-range of this distribution represents te extents of this particular dataset.
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md`
\n### Building Age | ${keyEdit(typology)}\nRepresents the age (year of construction) distribution of ${keyEdit(typology)} buildings across the entire city. In certain instances, outliers were removed to show more granularity in the distribution. The building age is based on the YEAR BUILT field in the PLUTO dataset, which in some cases does represent the year of first construction. See the PLUTO [README file](https://www1.nyc.gov/assets/planning/download/pdf/data-maps/open-data/pluto-readme.pdf?r=20v8) for more inforamtion.
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"md`
\n### Typology Breakdown | Entire City\nRepresents the breadown of typologies across the entire city (or each specific borough if selected). A map of this data appears [here](https://www.elementa.nyc/projects/nyc-electrification/typology-map/). In general, across the entire building stock, the typology definitions result in a relatively even partitioning of the building stock, by area. Creating calibrated energy models for each typology should theoretically allow us to capture the load diversity that exists across the city.
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"viewof borough = Select(new Map([[\"Manhattan\", \"MN\"],[\"Brooklyn\", \"BK\"], [\"Queens\", \"QN\"], [\"Bronx\", \"BX\"], [\"Staten Island\", \"SI\"], [\"All Boroughs\", \"All\"]]), {label: \"Borough\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"md`
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"root = {\n let selection = data;\n if (borough != \"All\") {\n selection = data.filter(d => d.borough === borough);\n }\n\n const groups = d3.group(selection, d => d.type);\n const flare = {name: \"typologies\", children: Array.from(groups, ([name, children]) => {\n return {name: name, value: _.sumBy(children, d => d.area), count: children.length};\n })};\n\n return treemap(flare);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"treemap = data => d3.treemap()\n .tile(d3.treemapSquarify)\n .size([treeWidth, treeHeight])\n .padding(1)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"treeWidth = 960","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"treeHeight = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"nycGeo = await d3.json(\"https://www.elementa.nyc/projects/nyc-electrification/typology-data/data/nyc_zips_geojson.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"mapWidth = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"mapHeight = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"projection = d3.geoAlbers()\n .fitSize([mapWidth - margin.left - margin.right, mapHeight - margin.top - margin.bottom], nycGeo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"margin = ({top: 20, right: 20, bottom: 45, left: 35})","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"createTooltip = el => {\n el\n .attr(\"class\", \"tooltip\")\n .style(\"border-radius\", \"3px\")\n .style(\"pointer-events\", \"none\")\n .style(\"display\", \"none\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"1000\")\n .style(\"padding\", \"12px\")\n .style(\"font-weight\", \"regular\")\n .style(\"font-family\", \"Open Sans\")\n .style(\"font-size\", \"12px\")\n .style(\"background\", \"white\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"color\", \"#333333\")\n .style(\"line-height\", \"1.6\")\n .style(\"pointer-events\", \"none\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"concentration = {\n\n let z = _.groupBy(data, \"zip\");\n \n const findConcentration = d => {\n return d3.sum(d.filter(o => o.type === typology).map(o => o.area)) / d3.sum(d.map(o => o.area)); \n }\n \n for (const p in z) {\n let c = findConcentration(z[p]);\n z[p] = c;\n }\n return z;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"data = (await d3.csv(\"https://www.elementa.nyc/projects/nyc-electrification/typology-data/data/type_data.csv\")).map(d => ({...d, year: +d.year, area: +d.area}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"// energyuse = {\n// const energy = await d3.csv(\"https://www.elementa.nyc/projects/nyc-electrification/typology-data/data/zipcode_monthly.csv\", d3.autoType);\n\n// const zips = new Set();\n// data.forEach(d => {\n// zips.add(+d.zip);\n// })\n \n// const check = Array.from(zips)\n \n// const filtered = energy.filter(d => check.includes(d.zip_code));\n \n// let metered = energy.filter(d => d.value >= 0 && d.data_field_display_name === \"Total Consumption (T)\" && d.year === 2019);\n \n// metered = metered.filter(d => d.unit === \"Therms\" || d.unit === \"MWh\");\n \n// const grouped = _.groupBy(metered, d => d.zip_code);\n \n// const output = [];\n// for (const [key, values] of Object.entries(grouped)) {\n \n// const electricity = values.filter(d => d.unit === \"MWh\");\n// const gas = values.filter(d => d.unit === \"Therms\");\n \n// output.push({zip: String(key), therms: _.sumBy(gas, d=> d.value), mwh: _.sumBy(electricity, d=> d.value) });\n// }\n// return output;\n \n\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"typologies = _.groupBy(data, \"type\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"typeList = {\n let keys = Object.keys(typologies).sort();\n let vals = keys.map(d => keyEdit(d));\n\n \n return d3.zip(vals, keys); \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"keyEdit = d => {\n return d.replace(/_/g, \" \")\n .replace(/Post/g, \"Post-\")\n .replace(/Pre/g, \"Pre-\")\n .replace(/Rise/g, \"-Rise\")\n .replace(\"One to Four\", \"One-to-Four\"); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"binYear = {\n let years = data.filter(d => d.type === typology && d.year > 1850).map(d => d.year)\n return d3.bin().thresholds(d3.range(1850, 2020, 5))(years);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"binSize = {\n let years = data.filter(d => d.type === typology && d.area > 500).map(d => d.area).sort();\n const outlier = d3.quantile(years, .90);\n years = years.filter(d => d < outlier)\n return d3.bin().thresholds(40)(years);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"histogramWidth = 960","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}