Skip to content

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

Add AreaChart

parent 0843bcc2
Hide whitespace changes
Inline Side-by-side
Showing with 526 additions and 37 deletions
data/sp_500_index.csv 0 → 100644
View file @ 6c16b023
date,close
2015-09-28,1951.359985
2015-10-05,2014.890015
2015-10-12,2033.109985
2015-10-19,2075.149902
2015-10-26,2079.360107
2015-11-02,2099.199951
2015-11-09,2023.040039
2015-11-16,2089.169922
2015-11-23,2090.110107
2015-11-30,2091.689941
2015-12-07,2012.369995
2015-12-14,2005.550049
2015-12-21,2060.98999
2015-12-28,2043.939941
2016-01-04,1922.030029
2016-01-11,1880.329956
2016-01-18,1906.900024
2016-01-25,1940.23999
2016-02-01,1880.050049
2016-02-08,1864.780029
2016-02-15,1917.780029
2016-02-22,1948.050049
2016-02-29,1999.98999
2016-03-07,2022.189941
2016-03-14,2049.580078
2016-03-21,2035.939941
2016-03-28,2072.780029
2016-04-04,2047.599976
2016-04-11,2080.72998
2016-04-18,2091.580078
2016-04-25,2065.300049
2016-05-02,2057.139893
2016-05-09,2046.609985
2016-05-16,2052.320068
2016-05-23,2099.060059
2016-05-30,2099.129883
2016-06-06,2096.070068
2016-06-13,2071.219971
2016-06-20,2037.410034
2016-06-27,2102.949951
2016-07-04,2129.899902
2016-07-11,2161.73999
2016-07-18,2175.030029
2016-07-25,2173.600098
2016-08-01,2182.870117
2016-08-08,2184.050049
2016-08-15,2183.870117
2016-08-22,2169.040039
2016-08-29,2179.97998
2016-09-05,2127.810059
2016-09-12,2139.159912
2016-09-19,2164.689941
2016-09-26,2168.27002
2016-10-03,2153.73999
2016-10-10,2132.97998
2016-10-17,2141.159912
2016-10-24,2126.409912
2016-10-31,2085.179932
2016-11-07,2164.449951
2016-11-14,2181.899902
2016-11-21,2213.350098
2016-11-28,2191.949951
2016-12-05,2259.530029
2016-12-12,2258.070068
2016-12-19,2263.790039
2016-12-26,2238.830078
2017-01-02,2276.97998
2017-01-09,2274.639893
2017-01-16,2271.310059
2017-01-23,2294.689941
2017-01-30,2297.419922
2017-02-06,2316.100098
2017-02-13,2351.159912
2017-02-20,2367.340088
2017-02-27,2383.120117
2017-03-06,2372.600098
2017-03-13,2378.25
2017-03-20,2343.97998
2017-03-27,2362.719971
2017-04-03,2355.540039
2017-04-10,2328.949951
2017-04-17,2348.689941
2017-04-24,2384.199951
2017-05-01,2399.290039
2017-05-08,2390.899902
2017-05-15,2381.72998
2017-05-22,2415.820068
2017-05-29,2439.070068
2017-06-05,2431.77002
2017-06-12,2433.149902
2017-06-19,2438.300049
2017-06-26,2423.409912
2017-07-03,2425.179932
2017-07-10,2459.27002
2017-07-17,2472.540039
2017-07-24,2472.100098
2017-07-31,2476.830078
2017-08-07,2441.320068
2017-08-14,2425.550049
2017-08-21,2443.050049
2017-08-28,2476.550049
2017-09-04,2461.429932
2017-09-11,2500.22998
2017-09-18,2502.219971
2017-09-25,2519.360107
2017-10-02,2549.330078
2017-10-09,2553.169922
2017-10-16,2575.209961
2017-10-23,2581.070068
2017-10-30,2587.840088
2017-11-06,2582.300049
2017-11-13,2578.850098
2017-11-20,2602.419922
2017-11-27,2642.219971
2017-12-04,2651.5
2017-12-11,2675.810059
2017-12-18,2683.340088
2017-12-25,2673.610107
2018-01-01,2743.149902
2018-01-08,2786.23999
2018-01-15,2810.300049
2018-01-22,2872.870117
2018-01-29,2762.129883
2018-02-05,2619.550049
2018-02-12,2732.219971
2018-02-19,2747.300049
2018-02-26,2691.25
2018-03-05,2786.570068
2018-03-12,2752.01001
2018-03-19,2588.26001
2018-03-26,2640.870117
2018-04-02,2604.469971
2018-04-09,2656.300049
2018-04-16,2670.139893
2018-04-23,2669.909912
2018-04-30,2663.419922
2018-05-07,2727.719971
2018-05-14,2712.969971
2018-05-21,2721.330078
2018-05-28,2734.620117
2018-06-04,2779.030029
2018-06-11,2779.659912
2018-06-18,2754.879883
2018-06-25,2718.370117
2018-07-02,2759.820068
2018-07-09,2801.310059
2018-07-16,2801.830078
2018-07-23,2818.820068
2018-07-30,2840.350098
2018-08-06,2833.280029
2018-08-13,2850.129883
2018-08-20,2874.689941
2018-08-27,2901.52002
2018-09-03,2871.679932
2018-09-10,2904.97998
2018-09-17,2929.669922
2018-09-24,2913.97998
2018-10-01,2885.570068
2018-10-08,2767.129883
2018-10-15,2767.780029
2018-10-22,2658.689941
2018-10-29,2723.060059
2018-11-05,2781.01001
2018-11-12,2736.27002
2018-11-19,2632.560059
2018-11-26,2760.169922
2018-12-03,2633.080078
2018-12-10,2599.949951
2018-12-17,2416.620117
2018-12-24,2485.73999
2018-12-31,2531.939941
2019-01-07,2596.26001
2019-01-14,2670.709961
2019-01-21,2664.76001
2019-01-28,2706.530029
2019-02-04,2707.879883
2019-02-11,2775.600098
2019-02-18,2792.669922
2019-02-25,2803.689941
2019-03-04,2743.070068
2019-03-11,2822.47998
2019-03-18,2800.709961
2019-03-25,2834.399902
2019-04-01,2892.73999
2019-04-08,2907.409912
2019-04-15,2905.030029
2019-04-22,2939.879883
2019-04-29,2945.639893
2019-05-06,2881.399902
2019-05-13,2859.530029
2019-05-20,2826.060059
2019-05-27,2752.060059
2019-06-03,2873.340088
2019-06-10,2886.97998
2019-06-17,2950.459961
2019-06-24,2941.76001
2019-07-01,2990.409912
2019-07-08,3013.77002
2019-07-15,2976.610107
2019-07-22,3025.860107
2019-07-29,2932.050049
2019-08-05,2918.649902
2019-08-12,2888.679932
2019-08-19,2847.110107
2019-08-26,2926.459961
2019-09-02,2978.709961
2019-09-09,3007.389893
2019-09-16,2992.070068
2019-09-23,2961.790039
2019-09-30,2952.01001
2019-10-07,2970.27002
2019-10-14,2986.199951
2019-10-21,3022.550049
2019-10-28,3066.909912
2019-11-04,3093.080078
2019-11-11,3120.459961
2019-11-18,3110.290039
2019-11-25,3140.97998
2019-12-02,3145.909912
2019-12-09,3168.800049
2019-12-16,3221.219971
2019-12-23,3240.02002
2019-12-30,3234.850098
2020-01-06,3265.350098
2020-01-13,3329.620117
2020-01-20,3295.469971
2020-01-27,3225.52002
2020-02-03,3327.709961
2020-02-10,3380.159912
2020-02-17,3337.75
2020-02-24,2954.219971
2020-03-02,2972.370117
2020-03-09,2711.02002
2020-03-16,2304.919922
2020-03-23,2541.469971
2020-03-30,2488.649902
2020-04-06,2789.820068
2020-04-13,2874.560059
2020-04-20,2836.73999
2020-04-27,2830.709961
2020-05-04,2929.800049
2020-05-11,2863.699951
2020-05-18,2955.449951
2020-05-25,3044.310059
2020-06-01,3193.929932
2020-06-08,3041.310059
2020-06-15,3097.73999
2020-06-22,3009.050049
2020-06-29,3130.01001
2020-07-06,3185.040039
2020-07-13,3224.72998
2020-07-20,3215.629883
2020-07-27,3271.120117
2020-08-03,3351.280029
2020-08-10,3372.850098
2020-08-17,3397.159912
2020-08-24,3508.01001
2020-08-31,3426.959961
2020-09-07,3340.969971
2020-09-14,3319.469971
2020-09-21,3298.459961
2020-09-28,3363
\ No newline at end of file
index.html
View file @ 6c16b023
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
</head> </head>
<body> <body>
<div id="scatterplot-container">
<div id="scatterplot-container" style="display: none;">
<div id="scatterplot-tooltip">fdsfds</div> <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">
...@@ -18,6 +19,15 @@ ...@@ -18,6 +19,15 @@
<li id="scatterplot-legend-Difficult"><span class="legend-e difficult"></span> Difficult</li> <li id="scatterplot-legend-Difficult"><span class="legend-e difficult"></span> Difficult</li>
</ul> </ul>
</div> </div>
<div id="area-chart-container">
<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"
id="area-chart-year-input">
</div>
<svg id="area-chart"></svg>
</div>
<script type="module" src="/src/ts/main.ts"></script> <script type="module" src="/src/ts/main.ts"></script>
</body> </body>
......
src/css/style.css
View file @ 6c16b023
...@@ -113,4 +113,32 @@ body { ...@@ -113,4 +113,32 @@ body {
color: gray; color: gray;
} }
/* #endregion */
/* #region Area chart */
#area-chart-container .area {
fill: #e9eff5;
}
#area-chart-container .line {
fill: none;
stroke: #537591;
stroke-width: 2.5px;
}
#area-chart-container .title {
font-weight: 900;
font-size: 40px;
}
#area-chart-container .select-text {
font-weight: 900;
margin-right: 0.5em;
}
#area-chart-container .heading {
margin-left: 3em;
}
/* #endregion */ /* #endregion */
\ No newline at end of file
src/ts/areaChart.ts 0 → 100644
View file @ 6c16b023
import * as d3 from 'd3';
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;
constructor(_config: ChartConfiguration, _data?: any[]) {
super(_config, _data);
this.initVis();
}
protected getDefaultMargins(): { top: number; right: number; bottom: number; left: number; } {
return {
top: 20,
right: 30,
bottom: 30,
left: 50
};
}
protected getDefaultContainerSize(): { width: number; height: number; } {
return {
width: 800,
height: 500
};
}
protected initVis(): void {
const vis = this;
// Initialize scales (output range only)
// Input domain will be updated in updateVis method
// Set up scales
vis.xScale = d3.scaleTime()
.range([0, vis.width]);
vis.yScale = d3.scaleLinear()
.nice()
// Reverse for ordering
.range([vis.height, 0]);
// Initialize axes
vis.xAxis = d3.axisBottom(vis.xScale);
vis.yAxis = d3.axisLeft(vis.yScale);
// Append empty x-axis group and move it to the bottom of the chart
vis.xAxisGroup = vis.chart.append("g")
.attr("transform", "translate(0," + vis.height + ")")
.call(vis.xAxis);
// Append y-axis group
vis.yAxisGroup = vis.chart.append("g")
.call(vis.yAxis);
// Define line generator
vis.lineGenerator = d3.line()
.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));
}
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]);
// Enter selection for line
lineSelection.enter()
.append("path")
.attr("class", "line")
.attr("d", vis.lineGenerator)
.transition()
.duration(1000)
.attr("opacity", 1);
// Update selection for line
lineSelection
.transition()
.duration(1000)
.attr("d", vis.lineGenerator);
// Exit selection for line
lineSelection.exit()
.transition()
.duration(1000)
.attr("opacity", 0)
.remove();
// Update the axes/gridlines
vis.xAxisGroup
.transition()
.duration(1000)
.call(vis.xAxis);
vis.yAxisGroup
.transition()
.duration(1000)
.call(vis.yAxis);
}
public updateVis(): void {
const vis = this;
// Specificy accessor functions
vis.xValue = (d: any) => d.date;
vis.yValue = (d: any) => d.close;
// Set the scale input domains
vis.xScale.domain(d3.extent(vis.data, vis.xValue));
vis.yScale.domain(d3.extent(vis.data, vis.yValue));
vis.renderVis();
}
}
\ No newline at end of file
src/ts/main.ts
View file @ 6c16b023
import { AreaChart } from './areaChart';
import { ChartConfiguration } from './chartConfiguration'; import { ChartConfiguration } from './chartConfiguration';
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
// */
// 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 * Load data from CSV file asynchronously and render scatter plot
*/ */
d3.csv('/data/vancouver_trails.csv') const areaChart = new AreaChart(new ChartConfiguration("#area-chart"));
d3.csv('/data/sp_500_index.csv')
.then(inputData => { .then(inputData => {
// Convert strings to numbers const dateParser = d3.timeParse("%Y-%m-%d");
inputData.forEach((d: any) => { inputData.forEach((d: any) => {
d.time = +d.time; d.date = dateParser(d.date);
d.distance = +d.distance; d.close = +d.close;
}); });
data = inputData;
// Initialize chart areaChart.data = inputData;
scatterplot.data = inputData; areaChart.updateVis();
// Show chart
scatterplot.updateVis();
}) })
.catch(error => console.error(error)); .catch(error => console.error(error));
setTimeout(() => {
const dateParser = d3.timeParse("%Y-%m-%d");
let t: any = { date: '2025-10-29', close: 0 };
t.date = dateParser(t.date);
t.close = +t.close;
areaChart.data.push(t);
areaChart.updateVis();
}, 1000);
\ No newline at end of file
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