chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const radius = 3.5;
// marker rectangle in oerview
let overviewMarker = {
x: 0,
y: 0,
w: width,
h: height
};
let transform = d3.zoomIdentity;
let zoom = d3
.zoom()
.extent([[0, 0], [width, height]])
.translateExtent([[0, 0], [width, height]])
.scaleExtent([1, 10])
.on("zoom", zoomed);
//Detail View that shows all
const detailview = svg.append("g");
detailview
.append("rect")
.attr("transform", transform)
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#ECEFF1");
detailview
.selectAll("circle")
.data(data)
.join("circle")
.attr("fill", "#263238")
.attr("cx", ([x]) => x)
.attr("cy", ([, y]) => y)
.attr("r", radius)
.attr("fill", (d, i) => d3.interpolateCool(i / data.length))
.attr("stroke-width", 1)
.attr("stroke", "#263238");
//Task 2
//Hint: Create a zoomIdentity object and set the translate
//and scale acoording to overviewSize, width, and height values
const overviewTransform = d3.zoomIdentity
.translate(width - (overviewSize * (width / height)), height * 0.75 )
.scale(overviewSize / height , overviewSize / width);
const overview = svg
.append("g")
.attr("transform", overviewTransform)
.attr("viewBox", [0, 0, width, height]);
overview
.append("rect")
.attr("x",0)
.attr("y", 0)
//Set width, heigth, Fill, StrokeWidth, Stroke Color
//Hint: Append the data points in the overview object
.attr("width", width)
.attr("height", height)
.attr("fill", "#ECEFF1")
.attr("stroke", "black")
.attr("stroke-width",1);
overview
.selectAll("circle")
.data(data)
.join("circle")
.attr("fill", "#263238")
.attr("cx", ([x]) => x)
.attr("cy", ([, y]) => y)
.attr("r", radius*1,5)
.attr("fill", (d, i) => d3.interpolateCool(i / data.length))
.attr("stroke-width", 1)
.attr("stroke", "#263238");
function zoomed() {
transform = d3.event.transform;
}
const markerRect = overview
.append("rect")
.datum(overviewMarker)
//Set x, y, width, height and opacity
//Hint: check the difference between datum and data
//Set stroke width, stroke color
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill-opacity", 0.025)
.attr("stroke-width", 5)
.attr('stroke','red');
function updateMarkerRect() {
overviewMarker.x = transform.invertX(0);
overviewMarker.y = transform.invertY(0);
overviewMarker.w = transform.invertX(width) - overviewMarker.x;
overviewMarker.h = transform.invertY(height) - overviewMarker.y;
markerRect
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("width", d => d.w)
.attr("height", d => d.h);
}
function updateMarkerDrag(d) {
//Task 3
//Hint: Use the overview and overviewMarkers parameter
//to set a min and Max constrain for the adjustment of the overviewMarker
var x, y;
if(d3.event.x < 0){
x = 0 // Min
}
else{
x = d3.event.x // Max
};
if(d3.event.y < 0){
y = 0 //Min
}
else{
y = d3.event.y //Max
};
d3.select(this)
.attr("x", d.x = x )
.attr("y", d.y = y );
//Hint use d3.zoomIdentity to scale and translate. Substitute 1 with the correct values
let t = d3.zoomIdentity.scale(zoomSlider.value).translate(-d.x, -d.y);
detailview.call(zoom.transform, t);
detailview.attr("transform", transform);
}
function startMarkerDrag(d) {
//Task 3
//Change the apearance of the marker when the user
//interact with it
d3.select(this);
this.attr('color', 'red')
.attr("stroke-width",5);
}
function endMarkerDrag(d) {
//Task 3
//Return the marker to its static view
d3.select(this)
.attr("stroke", "red")
.attr("stroke-width",5);
}
let markerDrag = d3
.drag()
.on("start", startMarkerDrag)
.on("drag", updateMarkerDrag)
.on("end", endMarkerDrag);
markerRect.call(markerDrag);
//Task 1:
//Hint set the slider step, min and max parameters using the zoom parameter
// zoomSlider;
zoomSlider.max=10;
zoomSlider.min=1;
zoomSlider.step=1;
function sliderZoom(d) {
//Task 1-2:
//Hint task 2: Use the overview and overviewMarkers parameter
//to set a min and Max constrain for the adjustment of the overviewMarker when the slider value changes
overviewMarker.x=width;
overviewMarker.y=height;
//Hint task 1: use d3.zoomIdentity to scale and translate. Substitute 1 with the real values
let t = d3.zoomIdentity
.translate(0.5*width,0.5*height)
.scale(zoomSlider.value)
.translate(-0.5*width, -0.5*height);
detailview.call(zoom.transform, t);
detailview.attr("transform", transform);
updateMarkerRect();
//Hint:First achieve to scale properly the detail view and then show that on the overViewmarker, details can be done later, like center the scaling or add constrains to the overviewMarker.
}
d3.select(zoomSlider)
.on("input", sliderZoom);
return svg.node();
}
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.
