Welcome to my little world. My name is Aidin, and I'm thrilled to share my work highlights with you. I'm a Web application expert based in Maryland, with a journey that's taken me through some fantastic stops like HZDG, BOOZ ALLEN, NIH and NADA.
These days, my focus is on UI/UX, as well as developing fast loading websites that shine across different browsers and devices. Throughout my career, I've had the pleasure of collaborating with incredibly talented folks on projects like Volkswagen US, Washington Harbour, DC's football team, Rockefeller Center, as well as USPS, FDA and NCI.
As a UI/UX Developer, I work with cool tech like JavaScript, Python, and modern frameworks such as React, along with popular design tool Figma.
Apart from geeking out over code, I'm fluent in English, Farsi, and German. When I’m away from my keyboard, I enjoy spending time with family and friends, discovering new places, and expressing my passion for cars, bikes, and music."
Coding examples
React and D3 graphs and API with drill down
XCopy
// App.js
import React, { useState, useEffect } from 'react';
import * as d3 from 'd3'; // Import D3 library
import './App.css'; // Import CSS file
import monthsData from './months.json'; // Import months data
import daytempData from './daytemp.json'; // Import day temperature data
// Function to get short month names
const getShortMonthName = (month) => {
const shortNames = {
"January": "Jan",
"February": "Feb",
"March": "Mar",
"April": "Apr",
"May": "May",
"June": "Jun",
"July": "Jul",
"August": "Aug",
"September": "Sep",
"October": "Oct",
"November": "Nov",
"December": "Dec"
};
return shortNames[month];
};
// Functional component for Bar Chart
const BarChart = ({ data, color, showShortNames, onBarClick }) => {
const svgRef = React.useRef(); // Reference for SVG element
// Function to draw the chart
const drawChart = React.useCallback(() => {
if (!data || data.length === 0) return; // Return if data is empty
// Define chart dimensions and margins
const width = 540; // Reduce width by 10%
const height = 360; // Reduce height by 10%
const marginTop = 54; // Increase margin top to maintain position
const marginLeft = 54; // Increase margin left to maintain position
const margin = { top: marginTop, right: 40, bottom: 40, left: marginLeft };
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// Select SVG element
const svg = d3.select(svgRef.current);
svg.selectAll("*").remove(); // Remove existing elements
// Append chart group
const chart = svg.append("g")
.attr("class", "chart-group") // Add class attribute
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// Create scales
const x = d3.scaleBand()
.domain(data.map(d => d.day))
.range([0, width])
.padding(0.2);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.nice()
.range([height, 0]);
// Append bars
chart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("id", (d, i) => `bar-${i}`) // Add id attribute
.attr("x", d => x(d.day))
.attr("width", x.bandwidth())
.attr("y", d => height)
.attr("height", 0)
.attr("fill", color)
.on("click", (event, d) => {
if (onBarClick) {
onBarClick(d.fullMonth, d.day); // Pass month and day to the parent component
}
})
.transition()
.duration(1000)
.attr("y", d => y(d.value))
.attr("height", d => height - y(d.value));
// Append bar labels
chart.selectAll(".bar-label")
.data(data)
.enter().append("text")
.attr("class", "bar-label")
.attr("x", d => x(d.day) + x.bandwidth() / 2)
.attr("y", d => y(d.value) - 5)
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("fill", "black")
.text(d => Math.round(d.value));
// Append month labels
chart.selectAll(".month-label")
.data(data)
.enter().append("text")
.attr("class", "month-label")
.attr("x", d => x(d.day) + x.bandwidth() / 2)
.attr("y", height + 25)
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("fill", "black")
.text(d => showShortNames ? getShortMonthName(d.fullMonth) : d.fullMonth);
// Append day labels
chart.selectAll(".day-label")
.data(data)
.enter().append("text")
.attr("class", "day-label")
.attr("x", d => x(d.day) + x.bandwidth() / 2)
.attr("y", height + 15)
.attr("text-anchor", "middle")
.attr("font-size", "10px")
.attr("fill", "black")
.text(d => d.day);
}, [data, color, showShortNames, onBarClick]); // Dependencies for the drawChart function
useEffect(() => {
drawChart(); // Call drawChart function when component mounts or dependencies change
}, [drawChart]);
return ; // Return SVG element with id and class attributes
};
// Main App component
const App = () => {
const [selectedMonth, setSelectedMonth] = useState("January"); // State for selected month
const [monthData, setMonthData] = useState([]); // State for month data
const [myYear, setMyYear] = useState([]); // State for yearly data
const [showMonthlyChart, setShowMonthlyChart] = useState(false); // State to toggle monthly chart visibility
const [selectedDay, setSelectedDay] = useState(null); // State for selected day
// Function to handle yearly bar click
const handleYearlyBarClick = (month) => {
setSelectedMonth(month);
setShowMonthlyChart(true);
};
// Function to handle day bar click
const handleDayBarClick = (month, day) => {
setSelectedDay(day); // Update selected day state
const selectedMonthDropdown = document.getElementById("month-dropdown");
const selectedMonthValue = selectedMonthDropdown.value;
console.log("Selected Day :", day);
console.log("Selected Month:", selectedMonthValue); // Log selected month
// Loop through each month index (0 to 11)
for (let i = 0; i < 12; i++) {
const selectedMonthData = daytempData.find(item => Object.keys(item)[i] === selectedMonthValue);
if (selectedMonthData) {
const monthData = selectedMonthData[selectedMonthValue];
const selectedDayData = monthData.days.find(dayData => dayData.day === day);
if (selectedDayData) {
console.log(`Data for ${selectedMonthValue}, Day ${day}:`, selectedDayData);
// Render new chart
renderDayChart(selectedDayData);
} else {
console.log(`Data not found for ${selectedMonthValue}, Day ${day}`);
}
return; // Exit the loop once the data is found
}
}
console.log(`Data not found for ${selectedMonthValue}`);
};
// Function to render the new chart for the selected day
const renderDayChart = (temperatures) => {
let selectedDaySelected = temperatures.day;
let selectedTempratures = temperatures.temperatures;
const chartContainer = document.getElementById("day-chart-container"); // Select chart container
// Check if chart container exists
if (!chartContainer) {
console.error("Chart container not found");
return;
}
chartContainer.innerHTML = ""; // Clear previous chart
// Define chart dimensions and margins
const width = 600;
const height = 400;
const marginTop = 60; // Increased margin top
const marginLeft = 60; // Increased margin left
const margin = { top: marginTop, right: 40, bottom: 40, left: marginLeft };
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// Create SVG element
const svg = d3.select(chartContainer)
.append("svg")
.attr("width", width)
.attr("height", height);
// Create the title using the selected month and day
const title = `Every 6 hours temperature of ${selectedMonth} ${selectedDaySelected}`;
// Append title
svg.append("text")
.attr("class", "chart-title")
.attr("x", 225) // Set x-coordinate to 225
.attr("y", margin.top / 2 + 5 + 5) // Adjusted y-coordinate with a margin of 10 pixels
.attr("text-anchor", "middle")
.attr("font-size", "16px")
.text(`Every 6 hours temperature of ${selectedMonth} ${selectedDaySelected}`);
// Create scale for x-axis
const xScale = d3.scaleLinear()
.domain([0, d3.max(selectedTempratures)])
.range([margin.left, innerWidth - margin.right]); // Adjusted range to leave space for the bars
// Create scale for y-axis
const yScale = d3.scaleBand()
.domain(selectedTempratures.map((_, i) => i))
.range([margin.top, innerHeight])
.padding(0.1);
// Append bars
svg.selectAll(".bar")
.data(selectedTempratures)
.enter().append("rect")
.attr("class", "bar")
.attr("x", margin.left)
.attr("y", (d, i) => yScale(i))
.attr("width", d => xScale(d) - margin.left) // Adjusted width calculation
.attr("height", yScale.bandwidth())
.attr("fill", "steelblue")
.transition()
.duration(1000)
.attr("width", d => xScale(d) - margin.left - 20); // Adjusted width calculation
// Append temperature labels
svg.selectAll(".temperature-label")
.data(selectedTempratures)
.enter().append("text")
.attr("class", "temperature-label")
.attr("x", d => xScale(d) + 5)
.attr("y", (d, i) => yScale(i) + yScale.bandwidth() / 2 - 10) // Adjusted y-coordinate
.attr("dy", "0.35em")
.attr("font-size", "12px")
.attr("fill", "black")
.text(d => d)
.style("opacity", 0) // Start with opacity 0 for animation
.transition()
.duration(1000)
.style("opacity", 1); // Transition to full opacity
};
// useEffect to compute yearly averages
useEffect(() => {
const yearAverages = [];
const fullMonthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
for (const monthObj of monthsData) {
const month = Object.keys(monthObj)[0];
const data = monthObj[month];
const sum = data.reduce((acc, cur) => acc + cur.value, 0);
const average = sum / data.length;
yearAverages.push({ day: getShortMonthName(month), fullMonth: month, value: average });
}
const uniqueMonths = [...new Set(yearAverages.map(item => item.day))];
const filteredYearData = yearAverages.filter(item => uniqueMonths.includes(item.day));
setMyYear(filteredYearData);
}, []);
// useEffect to set monthly data
useEffect(() => {
const selectedMonthData = monthsData.find(month => Object.keys(month)[0] === selectedMonth);
setMonthData(selectedMonthData[selectedMonth]);
}, [selectedMonth]);
return (
