chart = {
const width = 1500, //width pixels
height = 1500; //height in pixels
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var c = svg.selectAll('circle')
var p = svg.selectAll('polyline')
// static lines are input here
polyline(plansOutline, 'none', '1', '1', '4.5', 'black')
polyline(plansCut, 'none', '1', '1', '2', 'black')
polyline(plansDoor, 'none', '1', '1', '0.5', 'black')
polyline(plansFurn, 'none', '1', '1', '0.5', 'black')
polyline(plansHatch, 'none', '1', '1', '0.3', 'gray')
polyline(plansMedium, 'none', '1', '1', '0.8', 'black')
polyline(plansThin, 'none', '1', '1', '0.4', 'black')
polyline(plansStair, 'none', '1', '1', '0.6', 'black')
polyline(text, 'none', '1', '1', '2', 'black')
polyline(buttons, 'none', '1', '1', '2', 'black')
function polyline(data, pfill, pOpac, sOpac, sWght, stroke, className = '') {
p = p.data(data); // Bind data to the polyline selection
p.enter().append("polyline") // Enter the new data and append polylines
.attr("points", function(d) { return d }) // Set the points
.style("fill", pfill)
.style("fill-opacity", pOpac)
.style('stroke-opacity', sOpac)
.style("stroke-width", sWght)
.style("stroke", stroke)
.attr("class", className) // Add className for specific styling and selection
}
//Interactive Polylines
polyline(
nextbutton, // Data for the lines
'white', // Fill color
0.25, // Fill opacity
2, // Stroke opacity
4, // Stroke width
'gray', // Stroke color
'button'
);
polyline(
backbutton, // Data for the lines
'white', // Fill color
0.25, // Fill opacity
2, // Stroke opacity
4, // Stroke width
'gray', // Stroke color
'back'
);
polyline(
lvl1rooms, // Data for the lines
'white', // Fill color
0.25, // Fill opacity
1, // Stroke opacity
0, // Stroke width
'white', // Stroke color
'lvl1'
);
polyline(
lvl2rooms, // Data for the lines
'white', // Fill color
0.25, // Fill opacity
1, // Stroke opacity
0, // Stroke width
'white', // Stroke color
'lvl2'
);
polyline(
lvl3rooms, // Data for the lines
'white', // Fill color
0.25, // Fill opacity
1, // Stroke opacity
0, // Stroke width
'white', // Stroke color
'lvl3'
);
function changeFill(event,d){
d3.select(this).style("fill", 'red')
}
function changeFillBack(event,d){
d3.select(this).style("fill", 'white')
}
function changeFillRooms1(event,d){
d3.select(this).style("fill", 'green')
}
function changeFillRooms2(event,d){
d3.select(this).style("fill", 'blue')
}
function changeFillRooms3(event,d){
d3.select(this).style("fill", 'orange')
}
function changeFillBackRooms1(event,d){
d3.select(this).style("fill", 'white')
}
svg.selectAll('.lvl1') // Target only the polyline elements with the 'button' class
.on('mouseover', changeFillRooms1) // Apply the hover effect
.on('mouseout', changeFillBackRooms1) // Revert on mouseout
svg.selectAll('.lvl2') // Target only the polyline elements with the 'button' class
.on('mouseover', changeFillRooms2) // Apply the hover effect
.on('mouseout', changeFillBackRooms1) // Revert on mouseout
svg.selectAll('.lvl3') // Target only the polyline elements with the 'button' class
.on('mouseover', changeFillRooms3) // Apply the hover effect
.on('mouseout', changeFillBackRooms1) // Revert on mouseout
svg.selectAll('.button') // Target only the polyline elements with the 'button' class
.on('mouseover', changeFill) // Apply the hover effect
.on('mouseout', changeFillBack) // Revert on mouseout
.on("click", function() {
// Increment currentIndex and update carousel view
currentIndex = (currentIndex + 1) % views.length; // Loop back to 0 after the last view
updateCarousel(currentIndex); // Update the carousel
})
svg.selectAll('.back') // Target only the polyline elements with the 'button' class
.on('mouseover', changeFill) // Apply the hover effect
.on('mouseout', changeFillBack) // Revert on mouseout
.on("click", function() {
// Decrement currentIndex and update carousel view
currentIndex = (currentIndex - 1 + views.length) % views.length;
updateCarousel(currentIndex); // Update the carousel
});
const carouselGroup = svg.append("g")
.attr("class", "carousel")
.attr("transform", "translate(0, 0)"); // Group for carousel elements
// Define views as an array of objects, each containing two datasets
const views = [
{
lines: view1lines, // lines
hatch: view1hatch, // hatch
outline: view1outline // outline
},
{
lines: view2lines, // lines
hatch: view2hatch, // hatch
outline: view2outline //outline
},
{
lines: view3lines, // lines
hatch: view3hatch, // hatch
outline: view3outline //outline
},
{
lines: view4lines, // lines
hatch: view4hatch, // hatch
outline: view4outline //outline
},
{
lines: view5lines, // lines
hatch: view5hatch, // hatch
outline: view5outline //outline
},
{
lines: view6lines, // lines
hatch: view6hatch, // hatch
outline: view6outline //outline
},
{
lines: view7lines, // lines
hatch: view7hatch, // hatch
outline: view7outline //outline
},
{
lines: view8lines, // lines
hatch: view8hatch, // hatch
outline: view8outline //outline
},
];
// Function to update the carousel
const updateCarousel = (index) => {
svg.selectAll('.carouselGroup').remove();
// Render main lines for the selected view
polyline(
views[index].lines, // Data for the lines
'none', // Fill color
1, // Fill opacity
1, // Stroke opacity
1.5, // Stroke width
'black', // Stroke color
'carouselGroup'
);
polyline(
views[index].hatch, // Data for the lines
'none', // Fill color
1, // Fill opacity
1, // Stroke opacity
0.3, // Stroke width
'gray', // Stroke color
'carouselGroup'
);
polyline(
views[index].outline, // Data for the lines
'none', // Fill color
1, // Fill opacity
1, // Stroke opacity
4, // Stroke width
'black', // Stroke color
'carouselGroup'
);
};
// Initialize with the first view
let currentIndex = 0;
updateCarousel(currentIndex);
return svg.node();
}
lvl1rooms = FileAttachment("LVL1ROOMS.txt").tsv({array:true})
lvl2rooms = FileAttachment("LVL2ROOMS.txt").tsv({array:true})
lvl3rooms = FileAttachment("LVL3ROOMS.txt").tsv({array:true})
backbutton = FileAttachment("BACKBUTTON.txt").tsv({array:true})
nextbutton = FileAttachment("NEXTBUTTON.txt").tsv({array:true})
view4hatch = FileAttachment("VIEW4HATCH.txt").tsv({array:true})
view4lines = FileAttachment("VIEW4LINES.txt").tsv({array:true})
view4outline = FileAttachment("VIEW4OUTLINE.txt").tsv({array:true})
view5hatch = FileAttachment("VIEW5HATCH.txt").tsv({array:true})
view5lines = FileAttachment("VIEW5LINES.txt").tsv({array:true})
view5outline = FileAttachment("VIEW5OUTLINE.txt").tsv({array:true})
view6hatch = FileAttachment("VIEW6HATCH.txt").tsv({array:true})
view6lines = FileAttachment("VIEW6LINES.txt").tsv({array:true})
view6outline = FileAttachment("VIEW6OUTLINE.txt").tsv({array:true})
view7hatch = FileAttachment("VIEW7HATCH.txt").tsv({array:true})
view7lines = FileAttachment("VIEW7LINES.txt").tsv({array:true})
view7outline = FileAttachment("VIEW7OUTLINE.txt").tsv({array:true})
view8hatch = FileAttachment("VIEW8HATCH.txt").tsv({array:true})
view8lines = FileAttachment("VIEW8LINES.txt").tsv({array:true})
view8outline = FileAttachment("VIEW8OUTLINE.txt").tsv({array:true})
view3hatch = FileAttachment("VIEW3HATCH.txt").tsv({array:true})
view3lines = FileAttachment("VIEW3LINES.txt").tsv({array:true})
view3outline = FileAttachment("VIEW3OUTLINE.txt").tsv({array:true})
view2hatch = FileAttachment("VIEW2HATCH.txt").tsv({array:true})
view2lines = FileAttachment("VIEW2LINES.txt").tsv({array:true})
view2outline = FileAttachment("VIEW2OUTLINE.txt").tsv({array:true})
view1hatch = FileAttachment("VIEW1HATCH.txt").tsv({array:true})
view1lines = FileAttachment("VIEW1LINES.txt").tsv({array:true})
view1outline = FileAttachment("VIEW1OUTLINE.txt").tsv({array:true})
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.
