Skip to content

D
DV-HW4
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 @@ ...@@ -9,6 +9,7 @@
<body> <body>
<div id="scatterplot-container"> <div id="scatterplot-container">
<div id="scatterplot-tooltip">fdsfds</div>
<svg id="scatterplot"></svg> <svg id="scatterplot"></svg>
<ul class="legend" id="scatterplot-legend"> <ul class="legend" id="scatterplot-legend">
<p>Filter by level:</p> <p>Filter by level:</p>
......
src/css/style.css
View file @ 0843bcc2
...@@ -93,4 +93,24 @@ body { ...@@ -93,4 +93,24 @@ body {
color: #2a8d46; 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 */ /* #endregion */
\ No newline at end of file
src/ts/scatter.ts
View file @ 0843bcc2
...@@ -15,6 +15,7 @@ export class Scatterplot extends Chart { ...@@ -15,6 +15,7 @@ export class Scatterplot extends Chart {
private xValue: (d: any) => any; private xValue: (d: any) => any;
private yValue: (d: any) => any; private yValue: (d: any) => any;
private idValue: (d: any) => any; private idValue: (d: any) => any;
private tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>;
constructor(_config: ChartConfiguration, _data?: any[]) { constructor(_config: ChartConfiguration, _data?: any[]) {
super(_config, _data); super(_config, _data);
...@@ -76,6 +77,8 @@ export class Scatterplot extends Chart { ...@@ -76,6 +77,8 @@ export class Scatterplot extends Chart {
.attr('y', 0) .attr('y', 0)
.attr('dy', '.71em') .attr('dy', '.71em')
.text('Hours'); .text('Hours');
vis.tooltip = d3.select("#scatterplot-tooltip");
} }
public updateVis(): void { public updateVis(): void {
...@@ -95,6 +98,7 @@ export class Scatterplot extends Chart { ...@@ -95,6 +98,7 @@ export class Scatterplot extends Chart {
protected renderVis() { protected renderVis() {
let vis = this; let vis = this;
vis.idValue = (d: any) => d.trail; vis.idValue = (d: any) => d.trail;
// Bind data to circles // Bind data to circles
const circles = vis.chart.selectAll('.point') const circles = vis.chart.selectAll('.point')
.data(vis.data, (d: any) => vis.idValue(d)); .data(vis.data, (d: any) => vis.idValue(d));
...@@ -106,7 +110,26 @@ export class Scatterplot extends Chart { ...@@ -106,7 +110,26 @@ export class Scatterplot extends Chart {
.attr('r', 4) .attr('r', 4)
.attr('fill', (d: any) => vis.colorScale(vis.colorValue(d))) .attr('fill', (d: any) => vis.colorScale(vis.colorValue(d)))
.attr('cy', vis.yScale(0)) // Start from y=0 .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() circlesEnter.transition()
.duration(1000) .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