// I – Website Link References for San Francisco Real Estate Data Visualizations
// Set the website link references for the visualization
const websiteLinks = {
homepage: “https://www.villaterras.com”,
sanFranciscoPage: “https://www.villaterras.com/san-francisco”,
dataPage: “https://www.villaterras.com/data”,
contactPage: “https://www.villaterras.com/contact”,
blog: “https://www.villaterras.com/blog”
};
// Adding the links to the DOM for reference and easy navigation
document.getElementById(“homepage-link”).href = websiteLinks.homepage;
document.getElementById(“san-francisco-link”).href = websiteLinks.sanFranciscoPage;
document.getElementById(“data-link”).href = websiteLinks.dataPage;
document.getElementById(“contact-link”).href = websiteLinks.contactPage;
document.getElementById(“blog-link”).href = websiteLinks.blog;
// V2 – San Francisco Real Estate Data – Price vs VillaBility Score with Interactive Filter
fetch(‘san_francisco_real_estate_data.json’)
.then(response => response.json())
.then(data => {
const width = 1200, height = 700;
const margin = { top: 20, right: 30, bottom: 50, left: 100 };
const svg = d3.select(“#sf-scatter-plot-v2”)
.append(“svg”)
.attr(“width”, width)
.attr(“height”, height)
.append(“g”)
.attr(“transform”, `translate(${margin.left},${margin.top})`);
// X-axis: VillaBility Score
const x = d3.scaleLinear()
.domain([0, 100]) // VillaBility Score range
.range([0, width – margin.left – margin.right]);
// Y-axis: Price (scaled)
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”)))])
.nice()
.range([height – margin.top – margin.bottom, 0]);
// Append X and Y axes
svg.append(“g”)
.attr(“transform”, `translate(0,${height – margin.top – margin.bottom})`)
.call(d3.axisBottom(x));
svg.append(“g”)
.call(d3.axisLeft(y));
// Generate circles for scatter plot
svg.selectAll(“circle”)
.data(data)
.enter()
.append(“circle”)
.attr(“cx”, d => x(d.villaBilityScore))
.attr(“cy”, d => y(parseInt(d.price.replace(/[^\d.-]/g, ”))))
.attr(“r”, 8)
.attr(“fill”, “green”)
.attr(“opacity”, 0.6)
.on(“mouseover”, function(event, d) {
d3.select(this)
.attr(“opacity”, 1); // Highlight on hover
tooltip.transition().duration(200).style(“opacity”, .9);
tooltip.html(`${d.title}
Price: ${d.price}
VillaBility Score: ${d.villaBilityScore}`)
.style(“left”, (event.pageX + 5) + “px”)
.style(“top”, (event.pageY – 28) + “px”);
})
.on(“mouseout”, function(d) {
d3.select(this)
.attr(“opacity”, 0.6); // Reset opacity
tooltip.transition().duration(500).style(“opacity”, 0);
});
// Tooltip for hover interactions
const tooltip = d3.select(“body”).append(“div”)
.attr(“class”, “tooltip”)
.style(“position”, “absolute”)
.style(“text-align”, “center”)
.style(“padding”, “8px”)
.style(“background-color”, “rgba(0, 0, 0, 0.7)”)
.style(“color”, “#fff”)
.style(“border-radius”, “5px”)
.style(“opacity”, 0);
// Add title and axis labels
svg.append(“text”)
.attr(“x”, (width / 2))
.attr(“y”, 0 – (margin.top / 2))
.attr(“text-anchor”, “middle”)
.style(“font-size”, “16px”)
.style(“font-weight”, “bold”)
.text(“San Francisco, CA Real Estate Data – Price vs VillaBility Score”);
svg.append(“text”)
.attr(“x”, (width / 2))
.attr(“y”, height – 10)
.attr(“text-anchor”, “middle”)
.style(“font-size”, “12px”)
.style(“font-weight”, “bold”)
.text(“VillaBility Score”);
svg.append(“text”)
.attr(“transform”, “rotate(-90)”)
.attr(“x”, 0 – (height / 2))
.attr(“y”, 10)
.attr(“text-anchor”, “middle”)
.style(“font-size”, “12px”)
.style(“font-weight”, “bold”)
.text(“Price ($)”);
// Adding price range filter with slider
const priceFilter = d3.sliderBottom()
.min(d3.min(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”))))
.max(d3.max(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”))))
.step(1000)
.width(300)
.ticks(5)
.default([d3.min(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”))), d3.max(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”)))])
.on(‘onchange’, val => updateChart(val));
svg.append(‘g’)
.attr(‘transform’, ‘translate(20, 650)’)
.call(priceFilter);
function updateChart([minPrice, maxPrice]) {
const filteredData = data.filter(d => parseInt(d.price.replace(/[^\d.-]/g, ”)) >= minPrice && parseInt(d.price.replace(/[^\d.-]/g, ”)) <= maxPrice);
const circles = svg.selectAll("circle")
.data(filteredData);
circles.enter().append("circle")
.merge(circles)
.transition().duration(500)
.attr("cx", d => x(d.villaBilityScore))
.attr(“cy”, d => y(parseInt(d.price.replace(/[^\d.-]/g, ”))))
.attr(“r”, 8)
.attr(“fill”, “green”)
.attr(“opacity”, 0.6);
circles.exit().remove();
}
})
.catch(error => console.error(‘Error loading the JSON data:’, error));
// B – San Francisco Real Estate Data with Filtering and Interactive Features
fetch(‘san_francisco_real_estate_data.json’)
.then(response => response.json())
.then(data => {
const width = 1200, height = 700;
const margin = { top: 20, right: 30, bottom: 50, left: 100 };
const svg = d3.select(“#sf-scatter-plot-b”)
.append(“svg”)
.attr(“width”, width)
.attr(“height”, height)
.append(“g”)
.attr(“transform”, `translate(${margin.left},${margin.top})`);
// X-axis: VillaBility Score
const x = d3.scaleLinear()
.domain([0, 100]) // VillaBility Score range
.range([0, width – margin.left – margin.right]);
// Y-axis: Price (scaled)
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”)))])
.nice()
.range([height – margin.top – margin.bottom, 0]);
// Append X and Y axes
svg.append(“g”)
.attr(“transform”, `translate(0,${height – margin.top – margin.bottom})`)
.call(d3.axisBottom(x));
svg.append(“g”)
.call(d3.axisLeft(y));
// Generate circles for scatter plot
svg.selectAll(“circle”)
.data(data)
.enter()
.append(“circle”)
.attr(“cx”, d => x(d.villaBilityScore))
.attr(“cy”, d => y(parseInt(d.price.replace(/[^\d.-]/g, ”))))
.attr(“r”, 8)
.attr(“fill”, “green”)
.attr(“opacity”, 0.6)
.on(“mouseover”, function(event, d) {
d3.select(this)
.attr(“opacity”, 1); // Highlight on hover
tooltip.transition().duration(200).style(“opacity”, .9);
tooltip.html(`${d.title}
Price: ${d.price}
VillaBility Score: ${d.villaBilityScore}`)
.style(“left”, (event.pageX + 5) + “px”)
.style(“top”, (event.pageY – 28) + “px”);
})
.on(“mouseout”, function(d) {
d3.select(this)
.attr(“opacity”, 0.6); // Reset opacity
tooltip.transition().duration(500).style(“opacity”, 0);
});
// Tooltip for hover interactions
const tooltip = d3.select(“body”).append(“div”)
.attr(“class”, “tooltip”)
.style(“position”, “absolute”)
.style(“text-align”, “center”)
.style(“padding”, “8px”)
.style(“background-color”, “rgba(0, 0, 0, 0.7)”)
.style(“color”, “#fff”)
.style(“border-radius”, “5px”)
.style(“opacity”, 0);
// Add title and axis labels
svg.append(“text”)
.attr(“x”, (width / 2))
.attr(“y”, 0 – (margin.top / 2))
.attr(“text-anchor”, “middle”)
.style(“font-size”, “16px”)
.style(“font-weight”, “bold”)
.text(“San Francisco, CA Real Estate Data – Price vs VillaBility Score”);
svg.append(“text”)
.attr(“x”, (width / 2))
.attr(“y”, height – 10)
.attr(“text-anchor”, “middle”)
.style(“font-size”, “12px”)
.style(“font-weight”, “bold”)
.text(“VillaBility Score”);
svg.append(“text”)
.attr(“transform”, “rotate(-90)”)
.attr(“x”, 0 – (height / 2))
.attr(“y”, 10)
.attr(“text-anchor”, “middle”)
.style(“font-size”, “12px”)
.style(“font-weight”, “bold”)
.text(“Price ($)”);
// Add dynamic filtering for price range
const priceFilter = d3.sliderBottom()
.min(d3.min(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”))))
.max(d3.max(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”))))
.step(1000)
.width(300)
.ticks(5)
.default([d3.min(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”))), d3.max(data, d => parseInt(d.price.replace(/[^\d.-]/g, ”)))])
.on(‘onchange’, val => updateChart(val));
svg.append(‘g’)
.attr(‘transform’, ‘translate(20,
error));
