2d:null 2e:["$","title",null,{"children":"StreetEasy - Sales Table Sparklines | Chris L Buie | Observable"}] 33:Tb55,table = (data, width, height) => { const div = d3.select(html`

`) .style("overflow-x","scroll"); const table = div.append("table") const headers = table.append("tr") const rows = table.selectAll(".row") .data(data) .join("tr") .attr("class", "row"); const sparklineWidth = 100, sparklineHeight = 40, margin = {top: 20, bottom: 5, left: 30, right: 35} headers.append("th") .text(""); rows.append("td") .text(d => d.key) .style("color", d => boroughColorScale(d.values[0].values[0].boro)) .style("font-weight", 400); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Sales Inventory"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'inventory')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'sum')); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Recorded Sales"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'recorded_sales')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'sum')); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Median Asking Price"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'median_asking_price')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'median', true)); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Median Sales Price"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'median_sales_price')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'median', true)); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Median Days on Market"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'days_on_market')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'median')); return div.node() }34:T1838,sparkline = (data, column, width, height, margin, aggregate, money = false) => { const nestedData = d3.nest() .key(d => moment(d.date).format(dateGrouping)) .rollup(leaves => d3[aggregate](leaves, d => d.val)) .entries(data.filter(d => d.date >= moment(minDate) & d.date <= moment(maxDate))) const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("width", width + margin.left + margin.right) .style("height", height + margin.top + margin.bottom) const g = svg.append("g") .attr("transform",`translate(${margin.left},${margin.top})`) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(nestedData, d => d[column])]).nice(); const timeScale = d3.scaleTime() .range([0, width]) .domain(d3.extent(nestedData, d => moment(d.key, dateGrouping))); const hoverBarScale = d3.scaleBand() .range([0, width]) .domain(d3.set(nestedData.map(d => d.key)).values()); const hoverCircleScale = d3.scalePoint() .range([0, width]) .domain(d3.set(nestedData.map(d => d.key)).values()); const line = d3.line() .curve(d3.curveMonotoneX) .x(d => timeScale(moment(d.key, dateGrouping))) .y(d => yScale(d[column])) const area = d3.area() .curve(d3.curveMonotoneX) .x(d => timeScale(moment(d.key, dateGrouping))) .y0(d => yScale(d[column])) .y1(height) const formatMoney = d3.format("$.2s"); const format = d3.format(",.2s"); // Start Text g.append("text") .attr("class", "label") .attr("y", yScale(nestedData[0][column])) .attr("dx", -1) .style("text-anchor", "end") .style("font", "10px sans-serif") .text(() => { const val = nestedData[0][column] if(money) { return formatMoney(val) } else { return format(val) } }); // End Text g.append("text") .attr("class", "label") .attr("y", yScale(nestedData[nestedData.length - 1][column])) .attr("x", width) .attr("dx", 1) .style("font", "10px sans-serif") .text(() => { const val = nestedData[nestedData.length - 1][column] if(money) { return formatMoney(val) } else { return format(val) } }); const areaGradient = DOM.uid("areaGradient"); svg.append("linearGradient") .attr("id", areaGradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", height) .attr("x2", 0) .attr("y2", 0) .selectAll("stop") .data([{color: "#fff", offset: "0%"}, {color: "#fff", offset: "0%"}, {color: "#CDCDCD", offset: "80%"}, {color: "#CDCDCD", offset: "100%"}]) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); g.append("path") .datum(nestedData) .attr("d", area) .style("fill", areaGradient) // const yAxis = g.append("g") // .attr("class", "y axis") // .call(d3.axisLeft(yScale).tickSize(-width).ticks(4)); // yAxis.selectAll("text").remove() // yAxis.select(".domain").remove() // yAxis.selectAll("line") // .style("stroke", "#fff") // .style("stroke-dasharray", "1,1") g.append("path") .datum(nestedData) .attr("d", line) .style("stroke-width", 1.2) .style("stroke", "#000") .style("fill", "none") const hoverBars = g.selectAll(".hover") .data(nestedData) .join("g") .attr("class", "hover") hoverBars.append("circle") .attr("cx", d => hoverCircleScale(d.key)) .attr("cy", d => yScale(d[column])) .attr("r", 2.5) // .style("fill", "#fff") .style("opacity", 0) // .style("stroke", "#000") .style("pointer-events", "none") hoverBars.append("text") .style("pointer-events", "none") .attr("dy", -6) .attr("x", d => hoverCircleScale(d.key)) .attr("y", d => yScale(d[column])) .style("opacity", 0) .style("font", "10px sans-serif") .style("text-anchor", "middle") .style("fill", "#fff") .style("stroke", "#fff") .style("stroke-width", 2) .text((d) => { if(money) { return formatMoney(d.value) } else { return format(d.value) } }); hoverBars.append("text") .style("pointer-events", "none") .attr("dy", -6) .attr("x", d => hoverCircleScale(d.key)) .attr("y", d => yScale(d[column])) .style("opacity", 0) .style("font", "10px sans-serif") .style("text-anchor", "middle") .text((d) => { if(money) { return formatMoney(d.value) } else { return format(d.value) } }); hoverBars.append("text") .style("pointer-events", "none") .attr("x", d => hoverCircleScale(d.key)) .attr("y", height) .attr("dy", margin.bottom) .style("text-anchor", "middle") .style("opacity", 0) .style("font", "8px sans-serif") .text(d => { if(dateGrouping == 'Q-YYYY') { return `Q${d.key}` } else { return d.key } }); hoverBars.append("rect") .attr("x", d => hoverBarScale(d.key)) .attr("y", -100) .attr("height", height + 200) .style("stroke", "#000") .attr("width", hoverBarScale.bandwidth()) .style("opacity", 0) .on("mouseenter", function(d) { const sel = d3.select(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode) const hovers = sel.selectAll(".hover").filter(e => e.key == d.key) hovers.select("circle").style("opacity", 1); hovers.selectAll("text").style("opacity", 1); sel.selectAll(".label").style("opacity", 0) }) .on("mouseleave", function(d) { const sel = d3.select(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode) const hovers = sel.selectAll(".hover").filter(e => e.key == d.key) hovers.select("circle").style("opacity", 0); hovers.selectAll("text").style("opacity", 0); sel.selectAll(".label").style("opacity", 1) }) return svg.node() }35:T1455,FilterMap = (setWidth, setHeight, legendX, legendY, defaultSel) => { const path = d3.geoPath() .projection(d3.geoConicConformal() .parallels([33, 45]) .rotate([96, -48]) .fitSize([setWidth, setHeight], nycGeo)) let selections = defaultSel; const svg = d3.select(DOM.svg(setWidth, setHeight)) .style("width", setWidth) .style("height", setHeight); const hoverText = svg.append("text") .attr("x", 5) .attr("y", 20) .style("font", "20px sans-serif") const warning = svg.append("text") .attr("x", setWidth) .attr("y", setHeight) .attr("dy", -20) .style("text-anchor", "end") .style("opacity", 0) .style("font", "20px sans-serif") .text("You can only select five at once.") svg.selectAll(".back") .data(nycGeo.features.filter(d => d.properties.area_type == 'borough')) .join("path") .attr("class", "back") .attr("d", path) .style("fill", d=> boroughColorScale(d.properties.name)) .style("fill-opacity", .25) .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1.5 : 0) svg.selectAll(".nyc") .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')) .join("path") .attr("d", path) .attr("class", "nyc") .style("fill", d=> boroughColorScale(d.properties.Borough)) .style("fill-opacity", .75) .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1 : .25) .on("mouseenter", function(e) { svg.selectAll(".nyc") .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1 : .25) d3.select(this).style("stroke", "#000").style("fill-opacity", 1).moveToFront() hoverText.text(e.properties.name) }) .on("mouseleave", function() { svg.selectAll(".nyc") .style("fill-opacity", .75) .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1 : .25) .filter(d => selections.indexOf(d.properties.name) > -1) .moveToFront() hoverText.text("") }) .on("click", function(d) { console.log(selections.length) d3.select(this).moveToFront() const clickedVal = d.properties.name; if(selections.indexOf(clickedVal) > -1) { selections = selections.filter(e => e != clickedVal) viewof selectedNeighborhoods.value = selections.filter(e => e != clickedVal) } else { if(selections.length < 5) { selections.push(clickedVal) viewof selectedNeighborhoods.value = selections } else { warning.style("opacity", 1).transition().delay(2000).style("opacity", 0) } } svg.selectAll(".nyc") .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1 : .25) }).filter(d => selections.indexOf(d.properties.name) > -1) .moveToFront() const legends = svg.append("g") .attr("transform", `translate(${legendX}, ${legendY})`) .selectAll(".legend") .data(boroughColorScale.domain().filter(d => d.length > 0)) .join("g") .attr("class", "legend") .attr("transform", (d,i) => `translate(0, ${i*22})`) .on("click", function(d) { const clickedVal = d; console.log(selections.length) if(selections.indexOf(clickedVal) > -1) { selections = selections.filter(e => e != clickedVal) viewof selectedNeighborhoods.value = selections.filter(e => e != clickedVal) } else { if(selections.length < 5) { selections.push(clickedVal) viewof selectedNeighborhoods.value = selections } else { warning.style("opacity", 1).transition().delay(2000).style("opacity", 0) } } svg.selectAll(".back") .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1.5 : 0) d3.select(this).select("rect") .style("stroke", d => selections.indexOf(d) > -1 ? "#000" : "none") }) legends.append("text") .style("font", "14px sans-serif") .text(d => d) .style("fill", boroughColorScale) .style("pointer-events", "none") legends.append("rect") .attr("width", 20) .attr("height", 20) .attr("x", -22) .attr("y", -15) .style("stroke", d => selections.indexOf(d) > -1 ? "#000" : "none") .style("fill", boroughColorScale) return svg.node(); }36:T21e3,style_selectize = html` selectize.css `37:[] 31:{"id":"b52b25f4a599a34e","slug":"streeteasy-sales-table-sparklines","title":"StreetEasy - Sales Table Sparklines","thumbnail":"687dc77314e431ee7e012244a320a6701a2dcdf7af57cc36536cc7da36c4b9c4","access_level":"public","create_time":"$D2019-06-01T00:18:56.910Z","update_time":"$D2019-08-06T23:27:39.214Z","view_time":null,"first_public_time":"$D2020-03-07T01:19:34.366Z","has_unpublished_edits":null,"fork":{"id":"e4a14c25afdaa720","slug":"streeteasy-data-tables","title":"StreetEasy - Table Sparklines","owner":{"id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5ff335675a444f4e","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":"starter_2024"},"version":1678,"publish_version":1678,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb193f2e50e06492","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":null}],"members":[{"type":"individual","id":"fb193f2e50e06492","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"4e67ac04a6d21bad","slug":"nyc-housing","title":"NYC Housing","owner":{"id":"5ff335675a444f4e","login":"cbuie","name":"Chris L Buie"}},"type":"notebook","body":{"title":"StreetEasy - Sales Table Sparklines","cells":[{"id":0,"value":"md`# StreetEasy - Sales Table Sparklines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"md`Click on the map to see a table of metrics for that neighborhood, or type into the dropdown.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"{ \n const dataTable = d3.select(table(nestedData, width * .45, height))\n \n const charts = dataTable.selectAll(\"svg\")\n \n const lines = charts.selectAll(\".line\")\n\n return dataTable.node()\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"dropdown = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"FilterMap(800, 800, 600, 600, selectedNeighborhoods)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"viewof dateGrouping = {\n const dd3 = select({\n title: \"Aggregate Results By\",\n options: [\n { label: \"Month\", value: \"MM/YYYY\" },\n { label: \"Quarter\", value: \"Q-YYYY\" },\n { label: \"Year\", value: \"YYYY\" },\n ],\n value: \"MM/YYYY\"\n });\n dd3.input.style.fontSize = \"12px\";\n dd3.input.style.marginTop = \"8px\";\n return dd3;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"viewof minDate = date({\n title: \"Min Date\", \n min: \"2010-01-01\",\n max: \"2018-12-31\",\n value: \"2010-01-01\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"viewof maxDate = date({\n title: \"Max Date\", \n min: \"2010-01-01\",\n max: \"2018-12-31\",\n value: \"2019-01-01\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1559,"value":"$$(function() {\n const selDrop = $('#select-country').selectize({ \n plugins: ['remove_button'],\n maxItems: 5\n });\n \n const selectize = selDrop[0].selectize;\n selectize.setValue(selectedNeighborhoods);\n \n $('#contacts').submit(function(e){\n console.log(\"sup\")\n e.preventDefault();\n \n const results = $('#select-country').val();\n \n viewof selectedNeighborhoods.value = results\n \n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`## Data and Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {combinedData, areas, boroughs, areaToBorough} from '@pstuffa/streeteasy-data-data-store'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1580,"value":"viewof selectedNeighborhoods = new View([])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"nestedData = d3.nest()\n .key(d => d.area)\n .key(d => d.type)\n .entries(combinedData)\n .filter(d => selectedNeighborhoods.indexOf(d.key) != -1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"parseTime = d3.timeParse(\"%Y-%m\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"boroughColorScale = d3.scaleOrdinal(d3.schemeDark2)\n .domain(boroughs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"colorScale = d3.scaleOrdinal(d3.schemeDark2)\n .domain(boroughs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"import { createSVG, d3, jitter } from \"@pstuffa/helpers\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"import {slider, date, input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"import {nycGeo} from '@pstuffa/streeteasy-neighborhood-filter'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"import {View} from '@pstuffa/selectize-js-synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`Adding ability to have default multiple values selected.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"$$ = {\n const $ = await require('jquery@^1.7.0');\n await require('selectize.js@0.12');\n return $;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"function select(config = {}) {\n let {value: formValue, title, description, submit, multiple, size, options} = config;\n if (Array.isArray(config)) options = config;\n options = options.map(o => typeof o === \"string\" ? {value: o, label: o} : o);\n const form = input({\n type: \"select\", title, description, submit, \n getValue: input => {\n const selected = Array.prototype.filter.call(input.options, i => i.selected).map(i => i.value);\n return multiple ? selected : selected[0];\n },\n form: html`\n \n `\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"d3.selection.prototype.moveToFront = function() { \n return this.each(function(){\n this.parentNode.appendChild(this);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"require('bootstrap@4.1.3/dist/js/bootstrap').catch(() => window.bootstrap)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"style_bootstrap = html`\nbootstrap.css\n\t\t\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1600,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"