2a:null 2b:["$","title",null,{"children":"MBPO Captial Funding by Project Types (Draft) | Zhi Keng He | Observable"}] 31:T6ae,chart = { if (l.length === 0) return md``; const data = Object.entries(_(l).groupBy('year')).map(([name, values]) => { return { name, value: values.reduce((p, v) => p + +v.funding_c, 0) }; }); const years = [14, 15, 16, 17, 18, 19, 20, 21]; //from https://observablehq.com/@d3/bar-chart const color = "steelblue"; const height = 300; const margin = { top: 30, right: 0, bottom: 30, left: 60 }; const x = d3 .scaleBand() .domain(years) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(data, d => d.value)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .tickFormat(i => `FY${i}`) .tickSizeOuter(0) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, data.format)) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(data.y) ); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .attr("fill", color) .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(d.name)) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .attr("width", x.bandwidth()); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }32:T770,function createChart(data, years, format, max) { //from https://observablehq.com/@d3/bar-chart const color = "steelblue"; const height = 300; const margin = { top: 30, right: 0, bottom: 30, left: 50 }; const x = d3 .scaleBand() .domain(years) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, max || d3.max(data, d => d.value)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .tickFormat(i => `FY${i}`) .tickSizeOuter(0) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(i => format(i))) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(data.y) ); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(d.name)) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .attr("width", x.bandwidth()) .attr("class", "bar-year") .attr("fill", d => { if (!selectedYear || selectedYear !== d.name) { return color; } else { return '#315a7d'; } }) .on('mouseover', (event, d) => tooltip.display(d, format, tooltipContents)) .on('mousemove', event => tooltip.move(event)) .on('mouseout', event => tooltip.hide(event)) .on('click', (event, d) => (mutable selectedYear = d.name)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }33:T55a,//mod from https://observablehq.com/@clhenrick/tooltip-component class Tooltip { constructor(selection) { if (!selection || !selection.size()) { throw "Requires a tooltip div element selection"; } this._selection = selection; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const top = window.innerHeight > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum, format, callback) { if (!callback || typeof callback !== "function") { throw "ToolTip.display requires a callback function that returns an HTML string"; } this.selection.style("display", "block").html(callback(datum, format)); } hide() { this.selection.style("display", "none").html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } }34:[{"id":"a67320492501b255c65fb9fe56b3553932411cb94022f6fcbe4817ba8dcad363bfdbc81cbf6ed2acb7b9de613e59edaa2974e9cb1f637e1dd28ee8b565a69784","href":"https://static.observableusercontent.com/files/a67320492501b255c65fb9fe56b3553932411cb94022f6fcbe4817ba8dcad363bfdbc81cbf6ed2acb7b9de613e59edaa2974e9cb1f637e1dd28ee8b565a69784","name":"all_funds.csv","type":"text/csv","lastModified":1616442631754.816,"size":224589}] 2e:{"id":"cb72e5711ae9a9c9","slug":"mbpo-captial-funding-by-project-types","title":"MBPO Captial Funding by Project Types (Draft)","thumbnail":"4d64d80b806ec799c60d1cc96658bbe64da78267777bc287d3c490747754fc43","access_level":"public","create_time":"$D2021-03-22T19:50:10.768Z","update_time":"$D2021-03-30T20:50:18.506Z","view_time":null,"first_public_time":"$D2021-03-23T15:39:23.724Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"16506c8d98fe0d4f","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":"starter_2024"},"version":447,"publish_version":447,"role":null,"authored":false,"authors":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null}],"members":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"MBPO Captial Funding by Project Types (Draft)","cells":[{"id":0,"value":"md`# MBPO Captial Funding by Project Types (Draft)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"md`Disclaimer: Data and charts are not final. Only for Draft purposes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"tmcwTable(t, {\n sortable: true,\n style: 'compact',\n paged: false,\n columns: {\n name: {\n title: 'Type',\n formatter(value, i, row) {\n let elem = html`${value}`;\n elem.addEventListener('click', () => {\n mutable selectedType = value;\n t.value = row;\n t.dispatchEvent(new CustomEvent('input'));\n });\n return elem;\n }\n },\n value: {\n title: 'Amount Awarded',\n type: 'string',\n formatter(val, i) {\n return i == 0 ? d3.format('$.2s')(val) : d3.format('.2s')(val);\n }\n },\n percent: {\n type: 'string',\n formatter(val, i) {\n return html`

${d3.format(\n '.2%'\n )(val / 100)}\n

`;\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md`## ${selectedType} funding for FY 14-21`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`Percent of FY Budget`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"{\n if (selectedType) {\n //group by year\n const allData = Object.entries(_(a).groupBy('year')).map(\n ([name, values]) => {\n return {\n name,\n value: values.reduce((p, v) => p + +v.funding_c, 0)\n };\n }\n );\n\n const filData = Object.entries(_(fil).groupBy('year')).map(\n ([name, values]) => {\n return {\n name,\n value: values.reduce((p, v) => p + +v.funding_c, 0)\n };\n }\n );\n\n const data = filData.map((row, i) => {\n row.value = row.value / allData[i].value;\n return row;\n });\n\n const years = [14, 15, 16, 17, 18, 19, 20, 21];\n\n return createChart(data, years, d3.format('.0%'), .6)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"md`Total Amount Funded (in thousands)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"{\n if (selectedType) {\n //group by year\n const data = Object.entries(_(fil).groupBy('year')).map(\n ([name, values]) => {\n return {\n name,\n value: values.reduce((p, v) => p + +v.funding_c, 0) / 100\n };\n }\n );\n\n const years = [14, 15, 16, 17, 18, 19, 20, 21];\n\n return createChart(data, years, d3.format(',.2r'), null);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`## ${selectedType} projects for FY${selectedYear} \nSelect an item or multiple items to view related projects\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"viewof selectedItems = Table(filY, {\n columns: ['name', 'organization_address', 'project_title', 'amount'],\n sort: 'amount',\n reverse: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"{\n const text = l.map(i => `- ${i.name}`);\n return md`## Details for:\n${_.uniq(text).join('\\n')}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"viewof lTable = Table(l, {\n columns: ['year', 'project_title', 'project_type', 'funding_c'],\n sort: 'year'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"mapContainer = {\n if (l.length === 0) return md``;\n\n let mapContainer = DOM.element('div', { style: `height:400px;` });\n yield mapContainer;\n const settings = {\n maxZoom: 17,\n minZoom: 11\n };\n\n const map = L.map(mapContainer, { ...settings }).setView(\n [40.777383, -73.9693549],\n 11\n );\n\n L.tileLayer(\n 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png',\n {\n ...settings,\n attribution:\n 'Carto | © OSM contributors'\n }\n ).addTo(map);\n\n const markers = L.markerClusterGroup();\n\n let layer = L.geoJSON(geojson, {\n onEachFeature: (feature, layer) => {\n layer.bindPopup(feature.properties.label, {\n closeButton: false,\n autoPan: false,\n offset: L.point(0, 0)\n });\n }\n });\n\n markers.addLayer(layer);\n map.addLayer(markers);\n\n map.fitBounds(layer.getBounds(), { padding: [30, 30] });\n\n invalidation.then(() => map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`### Other projects in the most recent building or lot\n\n*(Note: Only be relevant for co-located schools)*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"{\n if (bblsSort.length) return md`**${bblsSort[0].organization_address}**`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"viewof sTable = Table(s, {\n columns: [\n 'year',\n 'link',\n 'name',\n 'project_title',\n 'project_type',\n 'funding_c'\n ],\n sort: 'year'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"md`\n
\n
\n
\n
\n
\n### Appendix\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"l = {\n if (\n selectedItems.length > 1 &&\n selectedItems.length === selectedItems.length\n ) {\n return [];\n } else {\n //lookup\n const lookup = a.filter(row =>\n selectedItems.map(i => i.name).includes(row.name.trim())\n );\n\n //find if there are linked projects\n const lookup2 = a.filter(row =>\n lookup\n .filter(i => i.link)\n .map(i => i.link)\n .includes(row.link)\n );\n\n return lookup2.length ? lookup2 : lookup;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"bblsSort = {\n return l.sort((a, b) => b.year - a.year);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"s = {\n const bblMostCurrent = bblsSort.length ? bblsSort[0].bbl : null;\n const links = l.map(i => i.link);\n\n //find if there are projects are in the same building but not the same school\n const lookup = a.filter(\n row =>\n bblMostCurrent &&\n row.bbl === bblMostCurrent &&\n row.link &&\n !links.includes(row.link)\n );\n\n return lookup;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"geojson = {\n const fc = {\n type: \"FeatureCollection\",\n features: []\n };\n\n fc.features = l\n .filter(i => i.lng && i.lat)\n .map(i => ({\n type: \"Feature\",\n properties: {\n label: `${i.project_title}
FY: ${i.year}
Funding Amt: ${i.funding_c}`\n },\n geometry: {\n type: \"Point\",\n coordinates: [+i.lng, +i.lat]\n }\n }));\n\n return fc;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"tooltip = {\n //set up tooltip\n const div = d3\n .select('body')\n .append(\"div\")\n .classed(\"tooltip\", true);\n\n return new Tooltip(div);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"mutable selectedType = 'Public School'","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"mutable selectedYear = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"function tooltipContents({ name, value }, format) {\n return `

FY${name}: ${format(value)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"fil = a.filter(r => r.project_type === selectedType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"filY = fil\n .filter(r => r.year === selectedYear)\n .map(r => {\n //fix funding\n r.amount = +r.funding_c;\n return r;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"t = {\n const group = Object.entries(_(a).groupBy('project_type')).map(\n ([name, values]) => {\n return {\n name,\n value: values.reduce((p, v) => p + +v.funding_c, 0)\n };\n }\n );\n\n return group.map(g => {\n g['percent'] = (g.value / d3.sum(group, i => i.value)) * 100;\n return g;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"a = await FileAttachment(\"all_funds.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"md`### Import Libaries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"import { table as tmcwTable } from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"import { Table } from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"_ = (await import(\"https://unpkg.com/underscore@1.10.1/modules/index-all.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"lmc = {\n L;\n const leafletmarkercluster = await require('leaflet.markercluster@1');\n if (!leafletmarkercluster._style) {\n const href = await require.resolve(\n \"leaflet.markercluster@1/dist/MarkerCluster.css\"\n );\n const href2 = await require.resolve(\n \"leaflet.markercluster@1/dist/MarkerCluster.Default.css\"\n );\n document.head.appendChild(\n (leafletmarkercluster._style = html``)\n );\n }\n return leafletmarkercluster;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"