Skip to content

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

Add tooltip to line chart

parent f8041687
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 55 deletions
index.html
View file @ 631d4972
......@@ -10,7 +10,7 @@
<body>
<div id="scatterplot-container" style="display: none;">
<div id="scatterplot-tooltip">fdsfds</div>
<div id="scatterplot-tooltip"></div>
<svg id="scatterplot"></svg>
<ul class="legend" id="scatterplot-legend">
<p>Filter by level:</p>
......@@ -20,13 +20,14 @@
</ul>
</div>
<div id="area-chart-container">
<div id="line-chart-container">
<div id="line-chart-tooltip"></div>
<div class="heading">
<p class="title">S&P 500 Index</p>
<span class="select-text">Start year</span><input type="number" min="2015" max="2020" value="2015"
onkeydown="return false;" id="area-chart-year-input">
onkeydown="return false;" id="line-chart-year-input">
</div>
<svg id="area-chart"></svg>
<svg id="line-chart"></svg>
</div>
<script type="module" src="/src/ts/main.ts"></script>
</body>
......
src/css/style.css
View file @ 631d4972
......@@ -117,28 +117,41 @@ body {
/* #region Area chart */
#area-chart-container .area {
#line-chart-container .area {
fill: #e9eff5;
position: relative;
}
#area-chart-container .line {
#line-chart-container .line {
fill: none;
stroke: #537591;
stroke-width: 2.5px;
}
#area-chart-container .title {
#line-chart-container .title {
font-weight: 900;
font-size: 40px;
}
#area-chart-container .select-text {
#line-chart-container .select-text {
font-weight: 900;
margin-right: 0.5em;
}
#area-chart-container .heading {
#line-chart-container .heading {
margin-left: 3em;
}
#line-chart-tooltip {
position: absolute;
display: none;
text-align: center;
padding: 5px;
background: #537591;
color: white;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
/* #endregion */
\ No newline at end of file
src/ts/areaChart.ts → src/ts/lineChart.ts
View file @ 631d4972
......@@ -3,20 +3,23 @@ import { Chart } from "./chart";
import { ChartConfiguration } from "./chartConfiguration";
export class AreaChart extends Chart {
xScale: any;
yScale: any;
xAxis: any;
yAxis: any;
xAxisGroup: any;
yAxisGroup: any;
lineGenerator: d3.Line<[number, number]>;
areaGenerator: d3.Area<[number, number]>;
xValue: (d: any) => any;
yValue: (d: any) => any;
private xScale: any;
private yScale: any;
private xAxis: any;
private yAxis: any;
private xAxisGroup: any;
private yAxisGroup: any;
private lineGenerator: d3.Line<[number, number]>;
private xValue: (d: any) => any;
private yValue: (d: any) => any;
private tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>;
private bisectDate: (array: ArrayLike<any>, x: any, lo?: number, hi?: number) => number;
private tooltipCircle: any;
constructor(_config: ChartConfiguration, _data?: any[]) {
super(_config, _data);
this.bisectDate = d3.bisector((d: any) => d.date).left;
this.initVis();
}
protected getDefaultMargins(): { top: number; right: number; bottom: number; left: number; } {
......@@ -67,42 +70,16 @@ export class AreaChart extends Chart {
.x((d: any) => vis.xScale(d.date))
.y((d: any) => vis.yScale(d.close));
// Define area generator
vis.areaGenerator = d3.area()
.x((d: any) => vis.xScale(d.date))
.y0(vis.height)
.y1((d: any) => vis.yScale(d.close));
// tooltip
vis.tooltip = d3.select("#line-chart-tooltip");
vis.tooltipCircle = vis.chart.append("circle")
.attr("r", 5)
.attr("stroke", "green")
.attr("fill", "white")
.style("display", "none");
}
protected renderVis(): void {
const vis = this;
// Bind data to area paths
const areaSelection = vis.chart.selectAll(".area")
.data([vis.data]); // Wrap data in an array for a single area
// Enter selection for area
areaSelection.enter()
.append("path")
.attr("class", "area")
.attr("d", vis.areaGenerator)
.transition()
.duration(1000)
.attr("opacity", 1);
// Update selection for area
areaSelection
.transition()
.duration(1000)
.attr("d", vis.areaGenerator);
// Exit selection for area
areaSelection.exit()
.transition()
.duration(1000)
.attr("opacity", 0)
.remove();
// Bind data to line paths
const lineSelection = vis.chart.selectAll(".line")
.data([vis.data]);
......@@ -140,6 +117,41 @@ export class AreaChart extends Chart {
.duration(1000)
.call(vis.yAxis);
// Create a transparent tracking area
vis.chart.append('rect')
.attr('width', vis.width)
.attr('height', vis.height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on('mouseenter', () => {
vis.tooltip.style('display', 'block');
vis.tooltipCircle.style('display', 'block');
})
.on('mouseleave', () => {
vis.tooltip.style('display', 'none');
vis.tooltipCircle.style('display', 'none');
})
.on('mousemove', (event: any) => {
const xPos = d3.pointer(event, this)[0] - vis.config.margin.left;
const date = vis.xScale.invert(xPos);
// Use the bisector to find the nearest left point
const index = vis.bisectDate(vis.data, date, 1);
const a = vis.data[index - 1];
const b = vis.data[index];
const d = b && (date - a.date > b.date - date) ? b : a; // seelect nearest point
if (d) {
vis.tooltip.transition()
vis.tooltip.html(`Close: ${d.close}`)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
vis.tooltipCircle
.attr("cx", vis.xScale(d.date))
.attr("cy", vis.yScale(d.close));
}
});
}
public updateVis(): void {
const vis = this;
......
src/ts/main.ts
View file @ 631d4972
import { AreaChart } from './areaChart';
import { ChartConfiguration } from './chartConfiguration';
import { AreaChart } from './lineChart';
import { Scatterplot } from './scatter';
import '/src/css/style.css';
import * as d3 from 'd3';
......@@ -53,9 +54,9 @@ import * as d3 from 'd3';
* Load data from CSV file asynchronously and render scatter plot
*/
const areaChart = new AreaChart(new ChartConfiguration("#area-chart"));
const areaChart = new AreaChart(new ChartConfiguration("#line-chart"));
let areaChartData: any[];
d3.select('#area-chart-year-input')
d3.select('#line-chart-year-input')
.on('input', function () {
// Get the current value of the input
let value = d3.select(this).property('value');
......
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