Skip to content

D
DV-HW4
You need to sign in or sign up before continuing.
Commit 0843bcc2 authored by Almouhannad Hafez's avatar Almouhannad Hafez
Browse files
Options

Add tooltip to scatter plot

parent 61556da8
Hide whitespace changes
Inline Side-by-side
Showing with 45 additions and 1 deletion
index.html
View file @ 0843bcc2
......@@ -9,6 +9,7 @@
<body>
<div id="scatterplot-container">
<div id="scatterplot-tooltip">fdsfds</div>
<svg id="scatterplot"></svg>
<ul class="legend" id="scatterplot-legend">
<p>Filter by level:</p>
......
src/css/style.css
View file @ 0843bcc2
......@@ -93,4 +93,24 @@ body {
color: #2a8d46;
}
#scatterplot-tooltip {
position: absolute;
display: none;
background: white;
border: 1px solid #9a9a9a;
padding: 5px;
margin-left: 0;
border-radius: 5px;
pointer-events: none;
}
#scatterplot-tooltip .tooltip-title {
font-weight: 800;
}
#scatterplot-tooltip .tooltip-second-title {
font-weight: 600;
color: gray;
}
/* #endregion */
\ No newline at end of file
src/ts/scatter.ts
View file @ 0843bcc2
......@@ -15,6 +15,7 @@ export class Scatterplot extends Chart {
private xValue: (d: any) => any;
private yValue: (d: any) => any;
private idValue: (d: any) => any;
private tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>;
constructor(_config: ChartConfiguration, _data?: any[]) {
super(_config, _data);
......@@ -76,6 +77,8 @@ export class Scatterplot extends Chart {
.attr('y', 0)
.attr('dy', '.71em')
.text('Hours');
vis.tooltip = d3.select("#scatterplot-tooltip");
}
public updateVis(): void {
......@@ -95,6 +98,7 @@ export class Scatterplot extends Chart {
protected renderVis() {
let vis = this;
vis.idValue = (d: any) => d.trail;
// Bind data to circles
const circles = vis.chart.selectAll('.point')
.data(vis.data, (d: any) => vis.idValue(d));
......@@ -106,7 +110,26 @@ export class Scatterplot extends Chart {
.attr('r', 4)
.attr('fill', (d: any) => vis.colorScale(vis.colorValue(d)))
.attr('cy', vis.yScale(0)) // Start from y=0
.attr('cx', (d: any) => vis.xScale(vis.xValue(d)));
.attr('cx', (d: any) => vis.xScale(vis.xValue(d)))
.on('mouseover', (_event: any, d: any) => {
vis.tooltip.style('display', 'block')
.html(`
<div class="tooltip-title">${d.trail}</div>
<div class="tooltip-second-title">${d.region}</div>
<ul>
<li>${d.distance} km, ~${d.time} hours</li>
<li>${d.difficulty}</li>
<li>${d.season}</li>
</ul>`
);
})
.on('mousemove', (event: any) => {
vis.tooltip.style('left', (event.pageX + 10) + 'px')
.style('top', (event.pageY + 10) + 'px');
})
.on('mouseleave', () => {
vis.tooltip.style('display', 'none');
});
circlesEnter.transition()
.duration(1000)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab