Skip to content

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