chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// square version
// svg.append("g")
// .attr("stroke", "white")
// .attr("stroke-width", 0.5)
// .attr("fill", "none")
// .selectAll("path")
// .data(finalData)
// .join("path")
// .attr('fill', d => fillScale(d.Perc_Tourist))
// .attr('d', d => square(d))
// .attr('transform', d => `translate(${x(d.x)},${y(d.y)})`)
// circle version
svg.selectAll("circle")
.data(finalData)
.join("circle")
.attr('r', 3)
.attr('cx', d => x(d.x))
.attr('cy', d => y(d.y))
.attr('fill', d => fillScale(d.Perc_Tourist))
return svg.node();
}
chart1 = {
const svg = d3.select(DOM.svg(width, height));
svg.append('g')
.call(popAxis)
svg.append('g')
.call(airbnbAxis)
svg.selectAll('circle')
.data(finalData)
.join('circle')
.attr('cx', d => popScale(d.population))
.attr('cy', d => airbnbScale(d.airbnb))
.attr('r', 5)
.attr('fill', blue)
.attr('opacity', 0.7)
return svg.node()
}
chart2 = {
const svg = d3.select(DOM.svg(width, height));
svg.append('g')
.call(popAxis_noBCN)
svg.append('g')
.call(airbnbAxis_noBCN)
svg.selectAll('circle')
.data(finalData_noBCN)
.join('circle')
.attr('cx', d => popScale_noBCN(d.population))
.attr('cy', d => airbnbScale_noBCN(d.airbnb))
.attr('r', 5)
.attr('fill', blue)
.attr('opacity', 0.7)
return svg.node()
}
chart3 = {
const svg = d3.select(DOM.svg(width, height));
svg.append('g')
.call(popAxis_noBCN)
svg.append('g')
.call(airbnbPerAxis)
svg.selectAll('circle')
.data(finalData)
.join('circle')
.attr('cx', d => popScale_noBCN(d.population))
.attr('cy', d => airbnbPerScale(d.perc_Airbnb))
.attr('r', 5)
.attr('fill', blue)
.attr('opacity', 0.7)
return svg.node()
}
chart4 = {
const svg = d3.select(DOM.svg(width, height));
svg.append('g')
.call(popAxis_noBCN)
svg.append('g')
.call(airbnbPerAxis)
svg.selectAll('circle')
.data(finalData)
.join('circle')
.attr('cx', d => popScale_noBCN(d.population))
.attr('cy', d => airbnbPerScale(d.perc_Airbnb))
.attr('r', 5)
.attr('fill', d => d.brand == 'Costa Brava' ? yellow : blue)
.attr('opacity', 0.7)
return svg.node()
}
blue = '#7bd2ed'
yellow = '#ffd208'
finalData_noBCN = finalData.filter(d => d.municipality !== 'Barcelona')
popScale = d3.scaleLinear() // this is an x axis
.domain(d3.extent(finalData, d => d.population)).nice()
.range([margin.left, width - margin.right])
popScale_noBCN = d3.scaleLinear() // this is an x axis
.domain(d3.extent(finalData_noBCN, d => d.population)).nice()
.range([margin.left, width - margin.right])
popAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(popScale).ticks(width / 80))
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", -22)
.attr('y', 25)
.attr("text-anchor", "start")
.attr('font-weight', 'bold')
.text('population'))
popAxis_noBCN = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(popScale_noBCN).ticks(width / 80))
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", -22)
.attr('y', 25)
.attr("text-anchor", "start")
.attr('font-weight', 'bold')
.text('population'))
airbnbPerScale = d3.scaleLinear() // this is a y axis
.domain(d3.extent(finalData, d => d.perc_Airbnb)).nice()
.range([height - margin.bottom, margin.top])
airbnbPerAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(airbnbPerScale))
.call(g => g.select(".domain"))
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr('font-weight', 'bold')
.text('percent AirBnB'))
airbnbScale = d3.scaleLinear() // this is a y axis
.domain(d3.extent(finalData, d => d.airbnb)).nice()
.range([height - margin.bottom, margin.top])
airbnbScale_noBCN = d3.scaleLinear() // this is a y axis
.domain(d3.extent(finalData_noBCN, d => d.airbnb)).nice()
.range([height - margin.bottom, margin.top])
airbnbAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(airbnbScale))
.call(g => g.select(".domain"))
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr('font-weight', 'bold')
.text('AirBnBs'))
airbnbAxis_noBCN = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(airbnbScale_noBCN))
.call(g => g.select(".domain"))
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr('font-weight', 'bold')
.text('AirBnBs'))
finalData_raw = FileAttachment("RealData.csv").csv({typed: true})
finalData = finalData_raw.map(d => { return {
Perc_Tourist: +d.Perc_TuristicHouseholds_INE,
x: d.x,
y: d.y,
INECode: d.INECode,
IdescatCode: d.IdescatCode,
municipality: d.Municipality,
brand: d.brand,
province: d.province,
population: d.Population,
perc_Airbnb: d.perc_AirbnbOk,
airbnb: d.airbnb
}})
d3.extent(finalData, d => d.perc_Airbnb)
finalData.filter(d => d.perc_Airbnb == 0)
square = d3.symbol().type(d3.symbolSquare).size(width/3);
data2 = Object.assign(d3.csvParse(await FileAttachment("tiles.csv").text()))
data4 = data2
.map(d => {return{
muni : d.nom_muni,
codemuni: d.municipi,
centroix : +d.V1,
centroiy : +d.V2,
Perc_Tourist: +d.Perc_TuristicHousehols
};})
data3 = data2
.map(d => {return{
muni : d.Municipality,
codemuni: d.IdescatCode,
codemuni: d.brand,
centroix : +d.X,
centroiy : +d.Y,
Perc_Tourist: +d.Perc_TuristicHousehols
};})
x = d3.scaleLinear()
.domain(d3.extent(data4, d => d.centroix)).nice()
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(data4, d => d.centroiy)).nice()
.range([height - margin.bottom, margin.top])
grid = g => g
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.1)
.call(g => g.append("g")
.selectAll("line")
.data(x.ticks())
.join("line")
.attr("x1", d => 0.5 + x(d))
.attr("x2", d => 0.5 + x(d))
.attr("y1", margin.top)
.attr("y2", height - margin.bottom))
.call(g => g.append("g")
.selectAll("line")
.data(y.ticks())
.join("line")
.attr("y1", d => 0.5 + y(d))
.attr("y2", d => 0.5 + y(d))
.attr("x1", margin.left)
.attr("x2", width - margin.right));
margin = ({top: 25, right: 30, bottom: 35, left: 40})
width = 600
height = 600
fillScale = d3.scaleSequential(chroma.interpolateGnBu)
d3 = require("d3@6")
chroma = require('d3-scale-chromatic')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
