createMap = function(YEAR, ASSESSMENT_TYPE){ const height = 1 * width; var fontSize = Math.floor(height/12); var strokeWidth = Math.round(width/200)/10; //console.log(width,height); console.log('bg',BACKGROUND_COLOR) const svg = d3.select(DOM.svg(width, height)) .style("font-family", "Arial") .attr("fill", BACKGROUND_COLOR) .on("click", toggleRotate); let projection = d3.geoAlbers(); const path = d3.geoPath().projection( projection ) const graticule = d3.geoGraticule() var green = true; var HIGHLIGHT_MULTIFAM = false; var data = filter.parcels.features; data = data.filter(d=> typeof d.properties.Assessments !== 'undefined') // data = data.filter(d=> { // return typeof d.properties.Neighborhood !== 'undefined' && // ["Starr Hill","Belmont","Ridge Street","Fry's Spring","10th & Page","Venable","Fifeville"].indexOf(d.properties.Neighborhood) !== -1 && // (["Fifeville"].indexOf(d.properties.Neighborhood) !== -1 || // d.properties.StreetName =="VALLEY RD EXT" // ) // }) // data = data.filter(d=> d.properties.Assessment < 350000) // data = data.filter(d=> d.properties.Residential && d.properties.UseCode.indexOf("Condo") == -1 && d.properties.UseCode !== "Vacant Land" && [4227,1789,10115,10171,15066,4828,4899].indexOf(d.properties.GeoParcelIdentificationNumber) == -1) //data = data.filter(d=> d.properties.Assessment > 900000) // data = data.filter(d=> d.properties.Assessment < 1100000) // data = data.filter(d=> d.properties.YearBuilt > 2010) /*data = data.filter(d => { var use = getUseCode(d, true, true) return true && // use !== "Single Family" && // use !== "Single Family + ADU(s)" && use !== "Condominium" && d.properties.Residential && uncountable_res_uses.indexOf(getUseCode(d, true, true)) === -1 && true; })*/ // if(HIGHLIGHT_MULTIFAM == 1){ // sort by use if we're putting stroke on multi-units, so they can rise to top // var is_multi = d => { // if(typeof d.properties.UseCode === 'undefined') return false; // if(d.properties.Residential != true || getUseCode(d,true,true) == "Apartments") return false; // if(nonres_uses.indexOf(getUseCode(d, true, true)) !== -1) return false; // return units_by_use(d) > 1 || ["Condominium","Single Family Attached"].indexOf(getUseCode(d, true, true)) !== -1; // } // var multi = data.filter(is_multi); // var nonmulti = data.filter(d => !is_multi(d)); // console.log('data recombination', data,multi,nonmulti) // data = nonmulti.concat(multi) // console.log(data) // console.log(data.map(getUseCode)) // } console.log('all uses', _.uniq(data.map(getUseCode))) /*data.sort((a, b) => { //sort closest to this year last var yrA = getYearBuilt(a); var yrB = getYearBuilt(b); if(typeof yrA === 'undefined') return -1; if(typeof yrB === 'undefined') return 1; return Math.abs(yrB - YEAR) - Math.abs(yrA - YEAR); });*/ var axis = AXES(data)["Assessment"]; //console.log(axis); var residentialParcels = data.filter(function(d){ return d.properties.Residential === true && public_spaces.indexOf(d.properties.ParcelNumber) === -1 && commercial.indexOf(d.properties.ParcelNumber) === -1 && d.properties.Assessments[YEAR] && d.properties.Assessments[YEAR].ImprovementValue && uncountable_res_uses.indexOf(getUseCode(d, true, true)) === -1 && true; }); console.log('residentialParcels parcel count:', residentialParcels.length, // "unit count:", // residentialParcels.reduce((acc, d) => acc+units_by_use(d),0), // "count w adus:", // residentialParcels.reduce((acc, d) => acc+units_by_use(d,true), 0) ) var scaleParcels = data.filter(function(d){ return d.properties.Residential === true && public_spaces.indexOf(d.properties.ParcelNumber) === -1 && commercial.indexOf(d.properties.ParcelNumber) === -1 && d.properties.Assessments[LATEST_YEAR] && d.properties.Assessments[LATEST_YEAR].ImprovementValue && uncountable_res_uses.indexOf(getUseCode(d, true, true)) === -1 && // ["Single Family", "Single Family + ADU(s)"].indexOf(getUseCode(d,true, true)) !== -1 && true; }); console.log('scaleParcels unit count', scaleParcels.length, scaleParcels.reduce((acc, d) => acc+units_by_use(d), 0)) // scaleParcels = scaleParcels.filter(d => ) var scalevals = []; scalevals = scaleParcels.map(d => { //use LATEST_YEAR so scale stays across years var ass = parseInt(d.properties.Assessments[LATEST_YEAR][ASSESSMENT_TYPE]); var units = units_by_use(d, false); return ass / units; }) // scaleParcels.forEach(d => scalevals.push(fn(d))) // console.log('scaleParcels', scaleParcels.filter(d=> { // return fn(d) <= 65000//71000 // return getUseCode(d).indexOf("Single") === -1 && // getUseCode(d).indexOf("Condo") === -1 && // getUseCode(d).indexOf("Duplex") === -1 // }).map(d=> tooltipString(d, YEAR))) scalevals = scalevals.sort((a, b) => a-b); console.log('scalevals',scalevals); console.log('scalevals median:', d3.median(scalevals), 'std:', d3.deviation(scalevals)) console.log('scalevals low:', scalevals[0], 'high:', scalevals[scalevals.length-1]) var start = d3.quantile(scalevals, .05) //scalevals[0]; var end = d3.quantile(scalevals, .8)//(d3.median(scalevals) - start) + d3.median(scalevals);//d3.quantile(scalevals, .90) //top 10% is red var domain = [start, end];//[ d3.min(residentialParcels, fn), d3.max(residentialParcels, fn)] //_.clone(axis.domain); //console.log('domain', domain); // data = data.filter(d => { // var use = getUseCode(d, true, true) // return true && // typeof use !== 'undefined' && // d.properties.lot_sf < 8125*2 && // // d.properties.lot_sf > 12000 && // use.indexOf("Single Family") != -1 && // use !== "Single Family Attached" && // d.properties.Zoning.indexOf("R-1") !== -1 && // d.properties.Zoning.indexOf("R-1S") == -1 && // true; // }) var opacityFunction = (d) => { // var use = getUseCode(d, true, true) // var lot_sf = (d.properties.LotSquareFeet > 100 ? d.properties.LotSquareFeet : d.properties.lot_sf) // if (true && // typeof use !== 'undefined' && // // d.properties.lot_sf < 8125*2 && // // d.properties.lot_sf > 6000*2 && // // d.properties.lot_sf > 6000 && // // d.properties.lot_sf > 6000 && // // d.properties.lot_sf < 8125 && // lot_sf > 6000*2 && // // d.properties.lot_sf > 6000*2 && // is_r1_sfd(d) && // // d.properties.Zoning.indexOf("R-1") !== -1 && // // d.properties.Zoning.indexOf("R-1S") == -1 && // d.properties.Zoning.indexOf("R-1S") !== -1 && // true) { return "100%"; // } // return "12%"; } function fillColor(parcel) { // Reported LotSquareFeet turns out not to be very accurate. Lots of missing data // Instead, calculate based on the parcel geometry // const sqft = parcel.properties.LotSquareFeet const sqft = turf.area(parcel)*9.322 // eyeballed conversion from LotSquareFeet to this parcel.properties.lot_sf = sqft; //console.log(parcel.properties.Assessment) if(parcel.properties.ParcelNumber == "200247000"){console.log("200247000",parcel)}; if(public_spaces.indexOf(parcel.properties.ParcelNumber) !== -1) return "#17410d"; if(commercial.indexOf(parcel.properties.ParcelNumber) !== -1) return "#987654"; if(vacant.indexOf(parcel.properties.ParcelNumber) !== -1) return "#aaa"; if(typeof parcel.properties.Assessments === 'undefined'){// three parcels too small to see, probably mistakes return "#000"; } var ignore = ["180060100"]; if(ignore.indexOf(parcel.properties.ParcelNumber) !== -1) return; var assessment = parcel.properties.Assessments[YEAR] if(typeof assessment === 'undefined'){ //console.log(parcel.properties) if(typeof subdivisions[parcel.properties.ParcelNumber] === 'undefined'){ //console.log("No assessment available!", YEAR, parcel.properties.ParcelNumber,parcel.properties); if(ASSESSMENT_TYPE == "TotalValue") missing[YEAR].push(parcel.properties.ParcelNumber) return "#333"; } var replacementParcelNum = subdivisions[parcel.properties.ParcelNumber] var replacementParcel = _.find(data, function(d){ return d.properties.ParcelNumber == replacementParcelNum; }) //console.log(replacementParcelNum, replacementParcel) if(typeof replacementParcel.properties.Assessments === 'undefined'){ //console.log("No assessment!", YEAR, replacementParcel.properties.ParcelNumber,replacementParcel.properties); if(ASSESSMENT_TYPE == "TotalValue") missing[YEAR].push(replacementParcel.properties.ParcelNumber) return "#333"; } assessment = replacementParcel.properties.Assessments[YEAR]; } if(assessment.ImprovementValue == 0) return "#aaa"; assessment = assessment[ASSESSMENT_TYPE] if((parcel.properties.Commercial && parcel.properties.UseCode.indexOf("Apartments") === -1) || (parcel.properties.Residential && nonres_uses.indexOf(getUseCode(parcel, true, true)) !== -1) ){ var hi = 3000000 var lo = 200000 if(assessment > hi) assessment = hi else if(assessment < lo) assessment = lo //return "#cccccc" assessment = (assessment - lo)/(hi - lo) return d3.interpolatePuBu(assessment) }else if(parcel.properties.Residential){ var units = 1; if(uncountable_res_uses.indexOf(getUseCode(parcel, true, true)) === -1){ units = units_by_use(parcel, false) } assessment = assessment / units // var hi = 600000 // var lo = 100000 var hi = domain[1] var lo = domain[0] if(assessment > hi) assessment = hi // else if(assessment < lo) //return "#cccccc" assessment = (green ? 1 : 0) + (green ? -1 : 1) * (assessment - lo)/(hi - lo) return (green ? d3.interpolateRdYlGn : d3.interpolateYlOrRd)(assessment) }else if(getUseCode(parcel, true) == "Apartments"){ //console.log(getUseCode(parcel)); return "#B999C6"; }else{ return "#222"; } /*var hi = domain[1] var lo = domain[0] if(assessment > hi) assessment = hi //else if(assessment < lo) //return "#cccccc" assessment = (green ? 1 : 0) + (green ? -1 : 1) * (assessment - lo)/(hi - lo) return (green ? d3.interpolateRdYlGn : d3.interpolateYlOrRd)(assessment)*/ } projection .scale(1) .translate([0, 0]); const b = path.bounds(filter.parcels); const s = 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height); const t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2]; projection .scale(s) .translate(t) svg.append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path) var hoods = svg.append("g") .selectAll("path") .data(neighborhoods.features) .enter().append("path") .attr("d", path) .style('stroke', d=> "#444") var defaultStroke = (DARK_MODE ? BACKGROUND_COLOR : TEXT_COLOR); //var newBuildStroke = "#0055ff" var lots = svg.append("g") .selectAll("path") .data(data) .enter().append("path") .attr("d", path) .style('fill', fillColor) .style('fill-opacity', opacityFunction) // .style('stroke', defaultStroke) // .style('stroke-width', strokeWidth) .style('stroke', d => { if(HIGHLIGHT_MULTIFAM == false) return defaultStroke; if (d.properties.Commercial) return defaultStroke; if (d.properties.Residential != true) return defaultStroke; if (uncountable_res_uses.indexOf(getUseCode(d, true, true)) !== -1) return defaultStroke; if (units_by_use(d, false) > 1 ) return "#ddd"; if (["Condominium","Single Family Attached"].indexOf(getUseCode(d, true, true)) !== -1) return "#ddd"; return defaultStroke }) .style('stroke-width', strokeWidth/1.5) /*.style('stroke', d => { console.log(arguments) var built = getYearBuilt(d); return (built <= YEAR && built > YEAR-3 ? newBuildStroke : defaultStroke) }) .style('stroke-width', d => { var built = getYearBuilt(d); return (built <= YEAR && built > YEAR-3 ? Math.sqrt(d.properties.lot_sf)/200 : strokeWidth) })*/ .on("mouseover", d => { var gpin = d.properties.GeoParcelIdentificationNumber; var coterm = data.filter(p => p.properties.GeoParcelIdentificationNumber == gpin) var html = ""; for(var x in coterm){ html += tooltipString(coterm[x],YEAR); html += "
" } map_tooltip.style("visibility", "visible").html(html) return true; }) .on("mousemove", onMousemoveTooltip(map_tooltip)) .on("mouseout", d => map_tooltip.style("visibility", "hidden")); svg.append("text") .attr("x", width/5) .attr("y", height/6) .attr("text-anchor", "middle") .style("font-size", fontSize+"px") .style("font-weight", "bold") .style("fill", TEXT_COLOR) .text(YEAR); svg.append("text") .attr("x", width/5) .attr("y", height/6 - fontSize + fontSize/18) .attr("text-anchor", "middle") .style("font-size", fontSize/3+"px") .style("font-weight", "bold") .style("fill", TEXT_COLOR) .text(ASSESSMENT_TYPE.replace("Value"," Value")); svg.append("text") .attr("x", width/5) .attr("y", height/6 - fontSize - fontSize/3) .attr("text-anchor", "middle") .style("font-size", fontSize/3+"px") .style("font-weight", "bold") .style("fill", TEXT_COLOR) .text(GEOGRAPHY + " Assessments: "); var legendOptions = { wi: width, legendOffsetX: width/20, legendOffsetY: height/10, color: d3.scaleSequential((green ? d3.interpolateRdYlGn : d3.interpolateYlOrRd)).domain((green ? domain.reverse() : domain)), domain : (green ? domain.reverse() : domain), reverse: green, median: d3.median(residentialParcels,d => { //use LATEST_YEAR so scale stays across years var ass = parseInt(d.properties.Assessments[YEAR][ASSESSMENT_TYPE]); var units = units_by_use(d, false); return ass / units; }) // d => (d.properties.Assessments[YEAR] ? d.properties.Assessments[YEAR][ASSESSMENT_TYPE] : null) } addLegendGradient(svg, axis, legendOptions) svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 8]) .on("zoom", function() { hoods.attr("transform", d3.event.transform); lots.attr("transform", d3.event.transform); })); return svg.node(); }