Skip to content

D
DV-HW4
Commit 88f5d2aa authored by Almouhannad Hafez's avatar Almouhannad Hafez
Browse files
Options

rename area to line

parent 631d4972
Hide whitespace changes
Inline Side-by-side
Showing with 57 additions and 57 deletions
index.html
View file @ 88f5d2aa
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<body> <body>
<div id="scatterplot-container" style="display: none;"> <div id="scatterplot-container">
<div id="scatterplot-tooltip"></div> <div id="scatterplot-tooltip"></div>
<svg id="scatterplot"></svg> <svg id="scatterplot"></svg>
<ul class="legend" id="scatterplot-legend"> <ul class="legend" id="scatterplot-legend">
......
src/ts/lineChart.ts
View file @ 88f5d2aa
...@@ -2,7 +2,7 @@ import * as d3 from 'd3'; ...@@ -2,7 +2,7 @@ import * as d3 from 'd3';
import { Chart } from "./chart"; import { Chart } from "./chart";
import { ChartConfiguration } from "./chartConfiguration"; import { ChartConfiguration } from "./chartConfiguration";
export class AreaChart extends Chart { export class LineChart extends Chart {
private xScale: any; private xScale: any;
private yScale: any; private yScale: any;
private xAxis: any; private xAxis: any;
...@@ -117,7 +117,7 @@ export class AreaChart extends Chart { ...@@ -117,7 +117,7 @@ export class AreaChart extends Chart {
.duration(1000) .duration(1000)
.call(vis.yAxis); .call(vis.yAxis);
// Create a transparent tracking area // add a transparent tracking space
vis.chart.append('rect') vis.chart.append('rect')
.attr('width', vis.width) .attr('width', vis.width)
.attr('height', vis.height) .attr('height', vis.height)
......
src/ts/main.ts
View file @ 88f5d2aa
import { ChartConfiguration } from './chartConfiguration'; import { ChartConfiguration } from './chartConfiguration';
import { AreaChart } from './lineChart'; import { LineChart } from './lineChart';
import { Scatterplot } from './scatter'; import { Scatterplot } from './scatter';
import '/src/css/style.css'; import '/src/css/style.css';
import * as d3 from 'd3'; import * as d3 from 'd3';
// const selectedDifficulties: string[] = []; const selectedDifficulties: string[] = [];
// let data: any[] = []; let data: any[] = [];
// const scatterplot = new Scatterplot(new ChartConfiguration("#scatterplot")); const scatterplot = new Scatterplot(new ChartConfiguration("#scatterplot"));
// function handleLevelSelectionEvent(element: any, difficulty: string) { function handleLevelSelectionEvent(element: any, difficulty: string) {
// const index = selectedDifficulties.indexOf(difficulty); const index = selectedDifficulties.indexOf(difficulty);
// if (index > -1) { if (index > -1) {
// // Difficulty is in the array, remove it // Difficulty is in the array, remove it
// selectedDifficulties.splice(index, 1); selectedDifficulties.splice(index, 1);
// d3.select(element).style("opacity", 1); d3.select(element).style("opacity", 1);
// } else { } else {
// // Difficulty is not in the array, add it // Difficulty is not in the array, add it
// selectedDifficulties.push(difficulty); selectedDifficulties.push(difficulty);
// d3.select(element).style("opacity", 0.5); d3.select(element).style("opacity", 0.5);
// } }
// const filteredData = data.filter(item => !selectedDifficulties.includes(item.difficulty)); const filteredData = data.filter(item => !selectedDifficulties.includes(item.difficulty));
// scatterplot.data = filteredData; scatterplot.data = filteredData;
// scatterplot.updateVis(); scatterplot.updateVis();
// } }
// const difficulties = ["Easy", "Intermediate", "Difficult"] const difficulties = ["Easy", "Intermediate", "Difficult"]
// // Add click event listeners for each difficulty level // Add click event listeners for each difficulty level
// for (const level of difficulties) { for (const level of difficulties) {
// const id = `#scatterplot-legend-${level}` const id = `#scatterplot-legend-${level}`
// d3.select(id) d3.select(id)
// .on("click", function () { .on("click", function () {
// handleLevelSelectionEvent(this, level); handleLevelSelectionEvent(this, level);
// }); });
// } }
// /** /**
// * Load data from CSV file asynchronously and render scatter plot * Load data from CSV file asynchronously and render scatter plot
// */ */
// d3.csv('/data/vancouver_trails.csv') d3.csv('/data/vancouver_trails.csv')
// .then(inputData => { .then(inputData => {
// // Convert strings to numbers // Convert strings to numbers
// inputData.forEach((d: any) => { inputData.forEach((d: any) => {
// d.time = +d.time; d.time = +d.time;
// d.distance = +d.distance; d.distance = +d.distance;
// }); });
// data = inputData; data = inputData;
// // Initialize chart // Initialize chart
// scatterplot.data = inputData; scatterplot.data = inputData;
// // Show chart // Show chart
// scatterplot.updateVis(); scatterplot.updateVis();
// }) })
// .catch(error => console.error(error)); .catch(error => console.error(error));
/** /**
* Load data from CSV file asynchronously and render scatter plot * Load data from CSV file asynchronously and render scatter plot
*/ */
const areaChart = new AreaChart(new ChartConfiguration("#line-chart")); const lineChart = new LineChart(new ChartConfiguration("#line-chart"));
let areaChartData: any[]; let lineChartData: any[];
d3.select('#line-chart-year-input') d3.select('#line-chart-year-input')
.on('input', function () { .on('input', function () {
// Get the current value of the input // Get the current value of the input
let value = d3.select(this).property('value'); let value = d3.select(this).property('value');
value = +value; value = +value;
console.log(areaChartData[0].date); console.log(lineChartData[0].date);
const areaChartFilteredData = areaChartData.filter(item => item.date.getFullYear() >= value); const lineChartFilteredData = lineChartData.filter(item => item.date.getFullYear() >= value);
areaChart.data = areaChartFilteredData; lineChart.data = lineChartFilteredData;
areaChart.updateVis(); lineChart.updateVis();
}); });
...@@ -76,8 +76,8 @@ d3.csv('/data/sp_500_index.csv') ...@@ -76,8 +76,8 @@ d3.csv('/data/sp_500_index.csv')
d.close = +d.close; d.close = +d.close;
}); });
areaChartData = inputData; lineChartData = inputData;
areaChart.data = inputData; lineChart.data = inputData;
areaChart.updateVis(); lineChart.updateVis();
}) })
.catch(error => console.error(error)); .catch(error => console.error(error));
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