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
Show 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