45:["$","title",null,{"children":"W209 Final Project | Berkeley MIDS W209 Information Visualization Course | Observable"}] 4d:T4b8,setupTabs = () => { const ct = d3.select(".tab"); const charts = { NeighborhoodSalesChart: "Neighborhood", AreaPricePlot: "Living Area", RemodelChart: "Remodeled", SoldByYearMonth: "Sales Over Years", BuildingTypeChart: "Building Type" }; for (const chartName of Object.keys(charts)) { let bt = d3.select(`#${chartName}-tab`); // activate default/selected tab button at load time and display the chart const isActive = bt.empty() && chartName === settings.selectedTab; if (chartName === settings.selectedTab) { d3.selectAll(".tabcontent").style("display", "none"); d3.select(`#${chartName}`).style("display", "block"); } bt = bt.empty() ? ct .append("button") .attr("id", `${chartName}-tab`) .classed("active", isActive) : bt; bt.classed("tablinks", true) .text(charts[chartName]) .on("click", (e) => { d3.selectAll(".tabcontent").style("display", "none"); d3.select(`#${chartName}`).style("display", "block"); d3.selectAll(".tablinks").classed("active", false); e.target.classList.add("active"); settings.selectedTab = chartName; }); } }4e:T4f4,style` body {font-family: Arial;} /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #c30771; color: white } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; // -webkit-animation: fadeEffect .2s; // animation: fadeEffect .2s; } /* neighborhood selector*/ #neiborhoodSelect select{ border: none; outline: none; } #neiborhoodSelect select option { background-color: #f1f1f1 ; color: black; font-size: 13px; } #neiborhoodSelect select option:checked { background-color: #c30771 ; color: white; // opacity: 0.8; } #neiborhoodSelect select { overflow-y: auto; } /* Fade in tabs */ @-webkit-keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} } `4f:T419,AreaPriceLegned = (g) => { const svg = g .attr("height", chartLegendProps.height) .attr("width", chartGraphProps.width); // legend const legend = () => { return d3Legend .legendColor() .shape("path", d3.symbol().type(d3.symbolCircle).size(150)()) .shapePadding(15) // cell padding .labelOffset(10) // label offset from the shape .titleWidth(10) .scale(areaPriceColor); }; // Title svg .append("text") .attr("transform", `translate(${chartGraphProps.width}, 20)`) .attr("font-size", `.8em`) .attr("font-weight", `bold`) .text("House Style"); svg .append("g") .attr("transform", `translate(${chartGraphProps.width}, 35)`) .attr("font-size", `.6em`) .call(legend()); // Set legends' label svg.selectAll(".legendCells text").each(function (d, i) { const label = d3.select(this).text(); if (houseStyles.hasOwnProperty(label)) { d3.select(this).text(houseStyles[label]); } else { d3.select(this).text("Ames City"); } }); }50:T1030,AreaPricePlot = ({} = {}) => { const svg = d3 .create("svg") .attr("height", chartProps.height) .attr("width", chartProps.width); const chartWidth = chartGraphProps.width; const clip = svg .append("clipPath") .attr("id", "clipping") .append("rect") .attr("x", margin.right) .attr("y", margin.top) .attr("width", chartWidth - margin.right) .attr("height", height - margin.bottom - margin.top); const g = svg.append("g"); const color = areaPriceColor; const canvas = g.append("g").attr("clip-path", "url(#clipping)"); canvas .append("rect") .attr("width", chartWidth - margin.left - margin.right) .attr("height", height - margin.bottom) .attr("transform", `translate(${margin.left}, 0)`) .attr("fill", "#eee"); const x = d3 .scaleLinear() .domain([ d3.min(rawdata, (d) => d[perUnit]) - 1, d3.max(rawdata, (d) => d[perUnit]) + 1 ]) .nice() .range([margin.left, chartWidth - margin.right]); const y = d3 .scaleLinear() .domain([ d3.min(rawdata, (d) => d.SalePrice) - 1, d3.max(rawdata, (d) => d.SalePrice) + 1 ]) .range([height - margin.bottom, margin.top]) .nice(); const axisX = (g) => g .attr("class", "x--axis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(6)) // x axis label .call((axis) => axis .append("text") .text(`${uiNames[perUnit]} (sqft)`) .style("font-weight", "bold") .style("fill", "black") .attr("transform", `translate( ${x.range()[1]}, +40)`) .style("text-anchor", "end") ); const axisY = (g) => g .attr("class", "y--axis") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call((axis) => axis .append("text") .text("Sales Price (USD)") .style("fill", "black") .style("font-weight", "bold") .style("text-anchor", "middle") .attr("y", margin.top - 20) ); Array.from(new Set(rawdata.map((d) => d.HouseStyle))).forEach( (houseStyle) => { const subgroupData = filterdata.filter((d) => d.HouseStyle == houseStyle); // If we have 0 or 1 data point, there are no regression line we can plot. if (subgroupData.length < 2) return; const linearRegression = ss.linearRegression( subgroupData.map((d) => [d[perUnit], d.SalePrice]) ); const linearRegressionLine = ss.linearRegressionLine(linearRegression); const regressionPoints = (d) => [ d3.min(rawdata, (d) => d[perUnit]) - 1, d3.max(rawdata, (d) => d[perUnit]) + 1 ].map((d) => { return { x: d, y: linearRegressionLine(d) }; }); const line = d3 .line() .x((d) => x(d.x)) .y((d) => y(d.y)); const regline = canvas .append("path") .classed("regressionLine", true) .datum(regressionPoints) .attr("d", line) .style("stroke", color(houseStyle)) .style("stroke-width", 1) .style("opacity", 0.0) .style("stroke-dasharray", "10,3") .transition() .duration(1500) .style("opacity", 0.7); } ); const circles = canvas .selectAll(".circle") .data(filterdata) .join("circle") .attr("cx", (d) => x(d[perUnit])) .attr("cy", (d) => y(d.SalePrice)) .attr("r", 1) .attr("fill", (d) => color(d.HouseStyle)) .style("opacity", 0) .transition() .duration(500) .style("opacity", 1); const cityCircles = canvas .selectAll(".cityCircles") .data(rawdata) .join("circle") .attr("cx", (d) => x(d[perUnit])) .attr("cy", (d) => y(d.SalePrice)) .attr("r", 1) .attr("fill", (d) => color(d.HouseStyle)) .style("opacity", 0) .transition() .duration(1500) .style("opacity", 0.1); svg.append("g").call(axisX); svg.append("g").call(axisY); // legend svg.append("g").call(AreaPriceLegned); return svg.node(); }51:T1663,IowaAmesV3 = ({ value = [], width } = {}) => { let level = 12; const pattern1 = patterns; const mapWidth = chartGraphProps.width + margin.right + margin.left; const mapHeight = height; let center = d3.geoPath().centroid(featuresDeps); let sx = 0.8; let tx = 10 + (mapWidth * (1 - sx)) / 2; let sy = 1; let ty = 1; // we need to change projection to extend to minLon and maxLon let projection = d3 .geoIdentity() .reflectY(true) .fitSize([mapWidth, mapHeight], featuresDeps); let path = d3.geoPath().projection(projection); const svg = d3 .create("svg") .attr("height", mapHeight) .attr("width", mapWidth); const cityid = "Ames:Ames City"; const duration = 300; const g = svg.append("g"); g.attr("transform", `translate(${tx} ${ty}) scale(${sx} ${sy})`); const imageOpacity = 0.8; const map = osmMap(center[0], center[1], level, mapWidth, mapHeight); const selectedOpacity = 0.95; const unselectedOpacity = 0.4; const hightlightOpacity = 1; const tooltipWidth = mapWidth * 0.4; const tooltipHeight = 40; const updateTooltip = function (e, d) { tooltip.style("opacity", 1); tooltipBox.style("opacity", 1); if (cityid == d.properties.Name) return; let mouseX = e.offsetX; let mouseY = e.offsetY; if (2 * mouseX > mapWidth) { mouseX -= tooltipWidth + 10; } else { mouseX += 10; } if (mouseY * 2 > mapHeight) { mouseY -= tooltipHeight + 10; } else { mouseY += 10; } tooltipBox.attr("x", mouseX); tooltip.attr("x", mouseX + 10); tooltipBox.attr("y", mouseY); tooltip.attr("y", mouseY + 20); tooltip.text( d.properties.Name.split(":")[1] + " (" + soldInNeighborhood[d.properties.Name.split(":")[0]] + " records)" ); }; const mun = g .selectAll(".mun") .data(featuresDeps.features) .join("path") .attr("class", "mun") .attr("stroke", "brown") .attr("stroke-width", 1) .attr("opacity", (d) => d.properties.Name == cityid ? unselectedOpacity : unselectedOpacity * 1.5 ) .attr("fill", (d) => cityid == d.properties.Name ? "url(#hatching-2)" : "#c30771" ) .attr("d", path) .on("mouseout", function (e, d) { tooltip.transition().duration(duration).style("opacity", 0); tooltipBox.transition().duration(duration).style("opacity", 0); if (cityid == d.properties.Name) return; let selected = pickedNid.indexOf(d.properties.Name) >= 0; let opacity = selected ? selectedOpacity : unselectedOpacity; d3.select(this) .transition() .duration(duration) .attr("stroke-width", 2) .attr("stroke", selected ? "black" : "grey"); }) .on("mousedown", function (e, d) { return updateTooltip(e, d); }) .on("mouseup", function (e, d) { return updateTooltip(e, d); }) .on("mousemove", function (e, d) { return updateTooltip(e, d); }) .on("mouseover", function (e, d) { if (cityid == d.properties.Name) return; tooltip.transition().duration(duration).style("opacity", 1); tooltipBox.transition().duration(duration).style("opacity", 1); tooltip.text( d.properties.Name.split(":")[1] + " (" + soldInNeighborhood[d.properties.Name.split(":")[0]] + " records)" ); d3.select(this) .transition() .duration(duration) .attr("stroke-width", 2) .attr("stroke", "darkblue"); }) .on("click", function (e, d) { if (cityid == d.properties.Name) return; set(node, d.properties.Name); node.dispatchEvent(new Event("input", { bubbles: true })); // Native events bubble, so we should too }); let tooltipBox = g .append("rect") .style("opacity", 0) .style("text-anchor", "end") .style("fill", "white") .style("stroke", "grey") .style("stroke-width", 1) .attr("x", -1000) .attr("y", -1000) .attr("rx", 8) .attr("ry", 5) .attr("width", tooltipWidth) .attr("height", tooltipHeight); let tooltip = g .append("text") .style("opacity", 0) .style("fill", "black") .style("font-size", 14) .attr("x", -1000) .attr("y", -1000); const node = svg .style("position", "absolute") .style("bottom", 0) .style("right", 0) .node(); const updateMap = (v) => { let nodes = g.node(); for (let i = 1; i < nodes.childElementCount; i++) { let ele = nodes.children[i]; if (ele.className.baseVal != "mun") return; if (v.indexOf(nid[i]) >= 0) { d3.select(ele).attr("stroke", "black").attr("opacity", selectedOpacity); } else { d3.select(ele) .attr("stroke", "grey") .attr("opacity", unselectedOpacity); } } }; // Update the display whenever the value changes Object.defineProperty(map, "value", { get() { return value; }, set(v) { if (v.indexOf(cityid) >= 0) { value = [...nid]; // copy nid by spread } else { value = v; } updateMap(value); } }); Object.defineProperty(node, "value", { get() { return value; }, set(v) { let found = value.indexOf(v); if (found < 0) { value[value.length] = v; } else { value.splice(found, 1); } updateMap(value); } }); let reduceImageOpacity = function (arrayLike, opacity) { for (let i = 0; i < arrayLike.length; i++) { let ele = arrayLike[i]; if (ele.nodeName == "IMG") { ele.style.opacity = opacity; } } }; reduceImageOpacity(map.children, imageOpacity); map.append(node); return map; }52:Tae6,SoldByYearMonth = ({} = {}) => { const svg = d3 .create("svg") .attr("height", chartProps.height) .attr("width", chartProps.width); const cityid = "Ames:Ames City"; const soldYearMonth = d3 .rollups( filterdata, (v) => v.length, (d) => d.YrSold, (d) => d.MoSold ) .map(([YrSold, v]) => v.map(([MoSold, value]) => ({ YrSold, MoSold, value })) ) .flat(); const x = d3 .scaleBand() .domain( d3.range( d3.min(soldYearMonthRaw, (d) => d.MoSold), d3.max(soldYearMonthRaw, (d) => d.MoSold) + 1 ) ) .range([0, chartGraphProps.width]); const y = d3 .scaleBand() .domain( d3.range( d3.min(soldYearMonthRaw, (d) => d.YrSold), d3.max(soldYearMonthRaw, (d) => d.YrSold) + 1 ) ) .range([0, iheight - 25]); const color = d3.scaleSequential(d3.interpolateBlues).domain( d3.extent(soldYearMonthRaw, (d) => { if ( (typeof pickedNid == "string" && pickedNid == cityid) || pickedNid.indexOf(cityid) >= 0 ) { return d.value; } if (pickedNid.length >= 8) { return d.value / 2; } if (pickedNid.length >= 3) { return d.value / 5; } return d.value / 10; }) ); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const xAxis = g .append("g") .call( d3 .axisBottom(x) .tickFormat((d) => new Date(2021, d - 1).toLocaleString("en", { month: "short" }) ) ) .attr( "transform", `translate(0, ${height - margin.top - margin.bottom - 25})` ) .call((axis) => axis .append("text") .text("Month Sold") .style("font-weight", "bold") .style("fill", "black") .attr("transform", `translate( ${x.range()[1]}, +30)`) .style("text-anchor", "end") ); const yAxis = g .append("g") .attr("transform", `translate( -1, 0)`) .call(d3.axisLeft(y)) .call((axis) => axis .append("text") .text("Year Sold") .style("fill", "black") .style("font-weight", "bold") .style("text-anchor", "middle") .attr("y", -15) ); g.selectAll(".cell") .data(soldYearMonth) .join("rect") .attr("class", "cell") .attr("x", (d) => x(d.MoSold)) .attr("y", (d) => y(d.YrSold)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", (d) => color(d.value)) .attr("stroke", "white") .attr("stroke-width", 0.3) .style("opacity", 0) .transition() .duration(1000) .style("opacity", 1); // legend svg.append("g").call(SoldByYearMonthLegend); return svg.node(); }53:T44f,BuildingTypeChartLegned = (g) => { const svg = g .attr("height", chartLegendProps.height) .attr("width", chartGraphProps.width); const columnLength = 15; let columnNumber = 0; const keys = Object.keys(salesByBldgType).sort(); // legend const legend = () => { return d3Legend .legendColor() .shape("path", d3.symbol().type(d3.symbolCircle).size(150)()) .shapePadding(15) // cell padding .labelOffset(10) // label offset from the shape .scale(buildingStyleColor(keys)); }; const totalCol = parseInt(keys.length / columnLength); for (let i = 0; i <= totalCol; i++) { columnNumber = i; svg .append("g") .attr("transform", `translate(${chartGraphProps.width + 140 * i}, 20)`) .attr("font-size", `.8em`) .call(legend()); } // Set legends' labels svg.selectAll(".legendCells text").each(function (d, i) { const label = d3.select(this).text(); if (BuildingTypes.hasOwnProperty(label)) { d3.select(this).text(BuildingTypes[label]); } else { d3.select(this).text("Ames City"); } }); }54:Tb76,BuildingTypeChart = ({} = {}) => { const duration = 1000; // let h = height; // let w = width; const svg = d3 .create("svg") .attr("height", chartProps.height) .attr("width", chartProps.width); let maxPrice = 0, minPrice = 0, minDate = Date.now(), maxDate = Date.parse("1970-01-01T00:00Z"); for (const k of Object.keys(salesByBldgType)) { for (const n of salesByBldgType[k]) { maxPrice = maxPrice < n.MedianSalePrice ? n.MedianSalePrice : maxPrice; minPrice = minPrice > n.MedianSalePrice ? n.MedianSalePrice : minPrice; maxDate = maxDate < n.SaleDate ? n.SaleDate : maxDate; minDate = minDate > n.SaleDate ? n.SaleDate : minDate; } } const keys = Object.keys(salesByBldgType).sort(); const colors = buildingStyleColor(keys); const xYear = d3 .scaleUtc() .domain([minDate, maxDate]) .nice() .range([margin.left, chartGraphProps.width - margin.right]); const yPsq = d3 .scaleLinear() // Useing max sale price between all data not just processed rawdata // because median for filter could be higher than non filter .domain([minPrice, maxPrice]) .nice() .range([height - margin.bottom, margin.top]); const remLine = d3 .line() .x((d) => xYear(d.SaleDate)) .y((d) => yPsq(d.MedianSalePrice)); for (const k of Object.keys(salesByBldgType)) { const cd = salesByBldgType[k]; svg .append("path") .datum(cd) .attr("fill", "none") .attr("stroke", colors(k)) .attr("stroke-width", 0.2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", remLine) .transition() .duration(duration) .attr("stroke-width", 2); } // Axes const xYearAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(xYear) .ticks(width / 100) .tickSizeOuter(0) ) // append x axis label .call((g) => g .append("text") .attr("x", chartGraphProps.width) .attr("y", margin.bottom - 9) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-size", "1.1em") .text("Time Sold →") ); const yPsqAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yPsq)) .call((g) => g.select(".domain").remove()) // append y axis label .call((g) => g .append("text") .attr("x", -margin.left) .attr("y", 15) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-size", "1.1em") .text("↑ Median Sale Price ($)") ); svg.append("g").call(xYearAxis); svg.append("g").call(yPsqAxis); // Lengend svg.append("g").call(BuildingTypeChartLegned); return svg.node(); }55:T114e,// based on https://observablehq.com/@d3/grouped-bar-chart RemodelChart = ({} = {}) => { const data = remodData; let x = (d) => d.age, // given d in data, returns the (ordinal) x-value y = (d) => d.medianPsq, // given d in data, returns the (quantitative) y-value z = (d) => d.remodeled, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = margin.top, // top margin, in pixels marginRight = margin.right, // right margin, in pixels marginBottom = margin.bottom, // bottom margin, in pixels marginLeft = margin.left, // left margin, in pixels width = chartGraphProps.width, // outer width, in pixels height = chartProps.height, // outer height, in pixels xDomain = [...new Set(data.map((d) => d.age))], // array of x-values xRange = [marginLeft, chartGraphProps.width - marginRight], // [xmin, xmax] xPadding = 0.1, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [chartProps.height - marginBottom, marginTop], // [ymin, ymax] zDomain = [0, 1], // array of z-values zPadding = 0.05, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel = "↑ Median Price sqrf ($)", // a label for the y-axis colors = ["steelblue", "#c30771"]; // array of colors const duration = 1000; const svg = d3 .create("svg") .attr("height", chartProps.height - 10) .attr("width", chartProps.width); // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in both the x- and z-domain. const I = d3 .range(X.length) .filter((i) => xDomain.has(X[i]) && zDomain.has(Z[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const xzScale = d3 .scaleBand(zDomain, [0, xScale.bandwidth()]) .padding(zPadding); const yScale = yType(yDomain, yRange); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = (i) => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, (d) => d); const T = title; title = (i) => T(O[i], i, data); } 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", chartGraphProps.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 gDrawing = svg.append("g"); const bar = gDrawing .selectAll("rect") .data(I) .join("rect") .attr("x", (i) => xScale(X[i]) + xzScale(Z[i])) .attr("width", xzScale.bandwidth()) .attr("fill", (i) => zScale(Z[i])) .attr("y", (i) => height - margin.bottom) .attr("height", (i) => yScale(0) - yScale(0)); // Add animation gDrawing .selectAll("rect") .transition() .duration(duration) .attr("y", (i) => yScale(Y[i])) .attr("height", (d) => yScale(0) - yScale(Y[d])) .delay((d, i) => i * 20); if (title) bar.append("title").text(title); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call((g) => g .append("text") .attr("x", chartGraphProps.width / 2 - margin.right) .attr("y", margin.bottom - 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("House Age Range at Sales Time (Year)") ); // Lengend svg.append("g").call(RemodelLegned); return svg.node(); }56:Tfc4,RemodelChartOld = ({} = {}) => { const duration = 1000; const svg = d3 .create("svg") .attr("height", chartProps.height) .attr("width", chartProps.width); const base_data = [rawdata, filterdata]; const processedData = []; for (let i = 0; i < 2; i++) { let bd = base_data[i] .map((r) => ({ ...r, psq: r.SalePrice / r.LotArea, recent_remod: (r.YearRemodAdd != r.YearBuilt) & (r.YrSold - r.YearRemodAdd < 6) // remod in last 5 years before sale })) .sort((a) => a.YearBuilt); bd = bd.filter((d) => d.YearBuilt >= 1920); // nothing remodeled before 1920 processedData.push(bd); const non_remod = Array.from( d3.rollup( bd.filter((d) => !d.recent_remod), (v) => d3.median(v, (d) => d.psq), (d) => d.YearBuilt ) ) .map((p) => ({ YearBuilt: p[0], psq: p[1] })) .sort((a, b) => (a.YearBuilt > b.YearBuilt && 1) || -1); processedData.push(non_remod); const remod = Array.from( d3.rollup( bd.filter((d) => d.recent_remod), (v) => d3.median(v, (d) => d.psq), (d) => d.YearBuilt ) ) .sort((a) => a.YearBuilt) .map((p) => ({ YearBuilt: p[0], psq: p[1] })) .sort((a, b) => (a.YearBuilt > b.YearBuilt && 1) || -1); processedData.push(remod); } let data_non_recent_remod_raw = processedData[1], data_recent_remod_raw = processedData[2], data_non_recent_remod = processedData[4], data_recent_remod = processedData[5]; const xYear = d3 .scaleLinear() .domain(d3.extent(processedData[0], (d) => d.YearBuilt)) .nice() .range([margin.left, chartGraphProps.width - margin.right]); const yPsq = d3 .scaleLinear() .domain([0, d3.max(processedData[0], (d) => d.psq)]) .nice() .range([height - margin.bottom, margin.top]); const xYearAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(xYear) .ticks(width / 80) .tickSizeOuter(0) .tickFormat(d3.format("d")) ) // append x axis label .call((g) => g .append("text") .attr("x", chartGraphProps.width) .attr("y", margin.bottom - 9) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-size", "1.1em") .text("Year Built →") ); const yPsqAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yPsq)) .call((g) => g.select(".domain").remove()) // append y axis label .call((g) => g .append("text") .attr("x", -margin.left) .attr("y", 15) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-size", "1.1em") .text("↑ Median Price Per SQFT ($)") ); const remLine = d3 .line() .x((d) => xYear(d.YearBuilt)) .y((d) => yPsq(d.psq)); svg.append("g").call(xYearAxis); svg.append("g").call(yPsqAxis); // Draw 4 lines: 2 for selected area, 2 for whole city const chart_data = [ { data: data_non_recent_remod_raw, color: "#c30771" }, { data: data_non_recent_remod, color: "#c30771", filtered: true }, { data: data_recent_remod_raw, color: "steelblue" }, { data: data_recent_remod, color: "steelblue", filtered: true } ]; for (let i = 0; i < 4; i++) { const cd = chart_data[i]; svg .append("path") .datum(cd.data) .attr("fill", "none") .attr("stroke", cd.color) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("opacity", () => (cd.filtered ? 0 : 0.2)) .attr("d", remLine) .transition() .duration(duration) .style("opacity", () => (cd.filtered ? 1 : 0.2)); } // Lengend svg.append("g").call(RemodelLegned); return svg.node(); }57:T43a,NeighborhoodSalesChartLegned = (g) => { const svg = g .attr("height", chartLegendProps.height) .attr("width", chartGraphProps.width); const columnLength = 20; let columnNumber = 0; // legend const legend = () => { return d3Legend .legendColor() .shape("path", d3.symbol().type(d3.symbolCircle).size(150)()) .shapePadding(15) // cell padding .labelOffset(10) // label offset from the shape .scale(nei_color(columnLength, columnNumber)); }; const totalCol = parseInt(SelectedNeighborhood.length / columnLength); for (let i = 0; i <= totalCol; i++) { columnNumber = i; svg .append("g") .attr("transform", `translate(${chartGraphProps.width + 140 * i}, 20)`) .attr("font-size", `.7em`) .call(legend()); } // Set legends' label svg.selectAll(".legendCells text").each(function (d, i) { const label = d3.select(this).text(); if (neigborhoods.hasOwnProperty(label)) { d3.select(this).text(neigborhoods[label]); } else { d3.select(this).text("Ames City"); } }); }58:Tafc,NeighborhoodSalesChart = ({} = {}) => { const duration = 800; const svg = d3 .create("svg") .attr("height", chartProps.height) .attr("width", chartProps.width); const base_data = [rawdata, filterdata]; const processedData = saleByYearMonth; const processedRaw = processedData["city"]; let maxPrice = 0, minPrice = 0; for (const k of Object.keys(processedData)) { for (const n of processedData[k]) { maxPrice = maxPrice < n.MedianSalePrice ? n.MedianSalePrice : maxPrice; minPrice = minPrice > n.MedianSalePrice ? n.MedianSalePrice : minPrice; } } const keys = Object.keys(processedData).sort(); const xYear = d3 .scaleUtc() .domain(d3.extent(processedRaw, (d) => d.SaleDate)) .nice() .range([margin.left, chartGraphProps.width - margin.right]); const yPsq = d3 .scaleLinear() // Useing max sale price between all data not just processed rawdata // because median for filter could be higher than non filter .domain([minPrice, maxPrice]) .nice() .range([height - margin.bottom, margin.top]); const remLine = d3 .line() .x((d) => xYear(d.SaleDate)) .y((d) => yPsq(d.MedianSalePrice)); for (const k of Object.keys(processedData)) { const cd = processedData[k]; svg .append("path") .datum(cd) .attr("fill", "none") .attr("stroke", nei_color()(k)) .attr("stroke-width", 0) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", remLine) .transition() .duration(duration) .attr("stroke-width", 2); } // Axes const xYearAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(xYear) .ticks(width / 100) .tickSizeOuter(0) ) // append x axis label .call((g) => g .append("text") .attr("x", chartGraphProps.width) .attr("y", margin.bottom - 9) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-size", "1.1em") .text("Time Sold →") ); const yPsqAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yPsq)) .call((g) => g.select(".domain").remove()) // append y axis label .call((g) => g .append("text") .attr("x", -margin.left) .attr("y", 15) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-size", "1.1em") .text("↑ Median Sale Price ($)") ); svg.append("g").call(xYearAxis); svg.append("g").call(yPsqAxis); // Lengend svg.append("g").call(NeighborhoodSalesChartLegned); return svg.node(); }59:Te32,// Based on https://observablehq.com/@d3/bar-chart function BarChart( data, { x = (d, i) => 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 = 90, // the bottom margin, in pixels marginLeft = 50, // the left margin, in pixels width = 640, // the outer width of the chart, in pixels height = chartProps.height, // 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 = "currentColor" // bar fill color } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const duration = 1000; // 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", chartProps.height) .attr("viewBox", [0, 0, 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 gDrawing = svg.append("g"); const bar = gDrawing .attr("fill", color) .selectAll("rect") .data(I) .join("rect") .attr("x", (i) => xScale(X[i])) .attr("y", (i) => height - marginBottom + marginTop - yScale(Y[0])) .attr("height", 0) .attr("width", xScale.bandwidth()); // Add animation gDrawing .selectAll("rect") .transition() .duration(duration) .attr("y", (i) => yScale(Y[i])) .attr("height", (d) => yScale(0) - yScale(Y[d])) .delay((d, i) => i * 20); if (title) bar.append("title").text(title); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); return svg.node(); }5a:T1690,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function LineChart( data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 60, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color = "currentColor", // stroke color of line strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply", // blend mode of lines voronoi // show a Voronoi overlay? (for debugging) } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, (d) => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter((i) => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3 .axisBottom(xScale) .ticks(width / 80) .tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); // Construct a line generator. const line = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()); // An optional Voronoi display (for fun). if (voronoi) svg .append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr( "d", d3.Delaunay.from( I, (i) => xScale(X[i]), (i) => yScale(Y[i]) ) .voronoi([0, 0, width, height]) .render() ); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call( voronoi ? () => {} : (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 path = svg .append("g") .attr("fill", "none") .attr("stroke", color) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, (i) => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("d", ([, I]) => line(I)); const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); dot .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, (i) => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym) ); // closest point path .attr("stroke", ([z]) => (Z[i] === z ? null : "#ddd")) .filter(([z]) => Z[i] === z) .raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) dot.select("text").text(T[i]); svg.property("value", O[i]).dispatch("input", { bubbles: true }); } function pointerentered() { path.style("mix-blend-mode", null).attr("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", "multiply").attr("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } return Object.assign(svg.node(), { value: null }); }5b:T412,// Group by building type (BldgType) salesByBldgType = { const baseData = filterdata; // [rawdata, filterdata]; const processedData = []; let his = {}; let remod = d3.rollup( baseData, (v) => d3.median(v, (d) => d.SalePrice), (d) => d.YrSold, (d) => d.MoSold, (d) => d.BldgType ); // for each record create one sale history remod.forEach((v, y) => { v.forEach((w, m) => w.forEach((p, n) => { let salesHistory = []; if (his.hasOwnProperty(n)) { salesHistory = his[n]; } salesHistory.push({ YrSold: y, MoSold: m, MedianSalePrice: p, BldgType: n, SaleDate: tParser(`${m}/1/${y}`) }); his[n] = salesHistory; }) ); }); // sort sales history based on year then month of sale for (const k of Object.keys(his)) { his[k] = his[k].sort( (a, b) => d3.ascending(a.YrSold, b.YrSold) || d3.ascending(a.MoSold, b.MoSold) || -1 ); } return his; }5c:T4c7,saleByYearMonth = { const base_data = [rawdata, filterdata]; const processedData = []; let his = {}; for (let i = 0; i < 2; i++) { let remod = d3.rollup( base_data[i], (v) => d3.median(v, (d) => d.SalePrice), (d) => d.YrSold, (d) => d.MoSold, // group filtered data with neighborhood, use City with when there is no filter (d) => (i === 0 ? "city" : d.Neighborhood) ); // // for each record create one sale history remod.forEach((v, y) => { v.forEach((w, m) => w.forEach((p, n) => { let salesHistory = []; if (his.hasOwnProperty(n)) { salesHistory = his[n]; } salesHistory.push({ YrSold: y, MoSold: m, MedianSalePrice: p, Neighborhood: n, SaleDate: tParser(`${m}/1/${y}`) }); his[n] = salesHistory; }) ); }); // sort sales history based on year then month of sale for (const k of Object.keys(his)) { his[k] = his[k].sort( (a, b) => d3.ascending(a.YrSold, b.YrSold) || d3.ascending(a.MoSold, b.MoSold) || -1 ); } } return his; }5d:T94c,// Copy and modify code from checkbox in "@jashkenas/inputs" function ColorCheckbox(config = {}) { let { value: formValue, title, description, submit, disabled, options } = Array.isArray(config) ? { options: config } : config; // copy from @observablehq/text-color-annotations-in-markdown let yiq = (color) => { const { r, g, b } = d3.rgb(color); return (r * 299 + g * 587 + b * 114) / 1000 / 255; // returns values between 0 and 1 }; const cityid = "Ames:Ames City"; let allButCity = options.map((d) => d[1]).splice(1); let textcolor = (c) => (yiq(c) >= 0.5 ? "#111" : "white"); let backgroundColor = function (c) { return c == cityid ? "#ccc" : color(c); }; options = options.map((o) => typeof o === "string" ? { value: o, label: o } : { value: o[1], label: o[0] + (o[1] == cityid ? "" : " (" + soldInNeighborhood[o[1].split(":")[0]] + ")") } ); const form = input({ type: "checkbox", title, description, submit, getValue: (input) => { if (input.length) return Array.prototype.filter .call(input, (i) => i.checked) .map((i) => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); form.oninput = function (e) { let values = this.value; form.input.forEach(function (i) { i.checked = values.indexOf(i.value) >= 0; }); }; return form; }5e:Tf5f,uiNames = ({ // From https://www.kaggle.com/c/house-prices-advanced-regression-techniques/data MSSubClass: 'Identifies the type of dwelling involved in the sale. ', MSZoning: 'Identifies the general zoning classification of the sale.', // LotFrontage: 'Linear feet of street connected to property', LotFrontage: 'Linear feet of street', // LotArea: 'Lot size in square feet', LotArea: 'Lot size', Street: 'Type of road access to property', Alley: 'Type of alley access to property', LotShape: 'General shape of property', LandContour: 'Flatness of the property', Utilities: 'Type of utilities available', LotConfig: 'Lot configuration', LandSlope: 'Slope of property', Neighborhood: 'Physical locations within Ames city limits', Condition1: 'Proximity to various conditions', Condition2: 'Proximity to various conditions (if more than one is present)', BldgType: 'Type of dwelling', HouseStyle: 'Style of dwelling', OverallQual: 'Rates the overall material and finish of the house', OverallCond: 'Rates the overall condition of the house', YearBuilt: 'Original construction date', YearRemodAdd: 'Remodel date (same as construction date if no remodeling or additions)', RoofStyle: 'Type of roof', RoofMatl: 'Roof material', Exterior1st: 'Exterior covering on house', Exterior2nd: 'Exterior covering on house (if more than one material)', MasVnrType: 'Masonry veneer type', MasVnrArea: 'Masonry veneer area in square feet', ExterQual: 'Evaluates the quality of the material on the exterior ', ExterCond: 'Evaluates the present condition of the material on the exterior', Foundation: 'Type of foundation', BsmtQual: 'Evaluates the height of the basement', BsmtCond: 'Evaluates the general condition of the basement', BsmtExposure: 'Refers to walkout or garden level walls', BsmtFinType1: 'Rating of basement finished area', BsmtFinSF1: 'Type 1 finished square feet', BsmtFinType2: 'Rating of basement finished area (if multiple types)', BsmtFinSF2: 'Type 2 finished square feet', BsmtUnfSF: 'Unfinished square feet of basement area', TotalBsmtSF: 'Total square feet of basement area', Heating: 'Type of heating', HeatingQC: 'Heating quality and condition', CentralAir: 'Central air conditioning', Electrical: 'Electrical system', LowQualFinSF: 'Low quality finished square feet (all floors)', // GrLivArea: 'Above grade (ground) living area square feet', GrLivArea: 'Living Area (Above Ground)', BsmtFullBath: 'Basement full bathrooms', BsmtHalfBath: 'Basement half bathrooms', FullBath: 'Full bathrooms above grade', HalfBath: 'Half baths above grade', Bedroom: 'Bedrooms above grade (does NOT include basement bedrooms)', Kitchen: 'Kitchens above grade', KitchenQual: 'Kitchen quality', // TotRmsAbvGrd: 'Total rooms above grade (does not include bathrooms)', TotRmsAbvGrd: 'Total rooms above ground', Functional: 'Home functionality (Assume typical unless deductions are warranted)', Fireplaces: 'Number of fireplaces', FireplaceQu: 'Fireplace quality', GarageType: 'Garage location', GarageYrBlt: 'Year garage was built', GarageFinish: 'Interior finish of the garage', GarageCars: 'Size of garage in car capacity', GarageArea: 'Size of garage in square feet', GarageQual: 'Garage quality', GarageCond: 'Garage condition', PavedDrive: 'Paved driveway', WoodDeckSF: 'Wood deck area in square feet', OpenPorchSF: 'Open porch area in square feet', EnclosedPorch: 'Enclosed porch area in square feet', ScreenPorch: 'Screen porch area in square feet', PoolArea: 'Pool area in square feet', PoolQC: 'Pool quality', Fence: 'Fence quality', MiscFeature: 'Miscellaneous feature not covered in other categories', MiscVal: '$Value of miscellaneous feature', MoSold: 'Month Sold (MM)', YrSold: 'Year Sold (YYYY)', SaleType: 'Type of sale', SaleCondition: 'Condition of sale' })5f:[{"id":"12b1f09cb62405bccc1bcf5f260f4523cc9daac029c418973e0062944a1d84de0bc6b0e8c6de89dc47b9f63960a46ebb926124e7af2a5f46c572300c46844a9e","href":"https://static.observableusercontent.com/files/12b1f09cb62405bccc1bcf5f260f4523cc9daac029c418973e0062944a1d84de0bc6b0e8c6de89dc47b9f63960a46ebb926124e7af2a5f46c572300c46844a9e","name":"train@2.csv","type":"text/csv","lastModified":1635457955951.517,"size":498327},{"id":"deaa056745494a680d95a0d10bd9cda024396cad25880e4b0695957d05c6909101d58e76551a732e9771acc29ffe95933a459d3a1ec12b931884fbe9c2517f04","href":"https://static.observableusercontent.com/files/deaa056745494a680d95a0d10bd9cda024396cad25880e4b0695957d05c6909101d58e76551a732e9771acc29ffe95933a459d3a1ec12b931884fbe9c2517f04","name":"Ames_Iowa_Neighborhood_1@1.geojson","type":"application/geo+json","lastModified":1634418745342.348,"size":25326},{"id":"f022c7ab592508b425f9c3d189bdd465257039a42638a31b2604b8194e7a13330ca85d044e54db13d575577c02f3f8b4cd13cb9a1b7e303f6bf30acc1f006503","href":"https://static.observableusercontent.com/files/f022c7ab592508b425f9c3d189bdd465257039a42638a31b2604b8194e7a13330ca85d044e54db13d575577c02f3f8b4cd13cb9a1b7e303f6bf30acc1f006503","name":"Ames_Iowa.geojson","type":"application/geo+json","lastModified":1635395845157.191,"size":30483}] 49:{"id":"1c52764fea319eb0","slug":"final-project-prototype","title":"W209 Final Project","thumbnail":"4c24ca9f89267d07a3eb72014661542cc2e4dfdf24f409e697c8142a39307a72","access_level":"public","create_time":"$D2021-10-16T21:12:25.342Z","update_time":"$D2021-12-06T01:16:33.711Z","view_time":null,"first_public_time":"$D2021-11-01T18:14:02.018Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":3997,"publish_version":3997,"role":null,"authored":false,"authors":[{"type":"individual","id":"afbb9ef42260bfc3","login":"frankyftang","name":"Yungfong Tang","avatar_url":"https://avatars-next.observableusercontent.com/12e00873f5ea7bd341135f536dfd27e537e9a1bf3e0112e342dded9d7d7dc7e5","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"afbb9ef42260bfc3","login":"frankyftang","name":"Yungfong Tang","avatar_url":"https://avatars-next.observableusercontent.com/12e00873f5ea7bd341135f536dfd27e537e9a1bf3e0112e342dded9d7d7dc7e5","tier":null,"role":"editor"},{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"education_2026","role":"viewer"},{"type":"individual","id":"733ded55bddded17","login":"pmotameni","name":"Parham Motameni","avatar_url":"https://avatars-next.observableusercontent.com/841cf16a9d249984bac40a0fd760569ef058e2c45ffb59d6a1055ca17a670320","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"titling":"auto","title":"W209 Final Project","cells":[{"id":1796,"value":"md`# W209 Final Project \n**Group 4** \n- Parham Motameni\n- Frank Yung-fong Tang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"FULLSCREEN = fullscreen({\n breakLayoutAtCell: 5,\n hideAfter: 4,\n hideBefore: 1,\n left: 100,\n right: 0,\n button: html`

Median Sales Price for each Neighborhood

Sales Price vs ${uiNames[perUnit]} (2006-2010)

Median Price For Houses Remodeled vs Not Remodeled

Number of Houses Sold Over Year/Month

Change of Median Sales Price vs Building Type (2006-2010)