av.dj.2000@gmail.com

Fork of ICE-7 Line Chart

This visualization shows the relationship between Glucose and BMI across a dataset of countries, plotting each as a single connected line graph on an SVG canvas. The code uses D3 v5 to load the CSV data and apply the `d3.line` generator, with `d3.scaleLinear` for both axes and `d3.axisLeft` and `d3.axisBottom` for tick marks. A red path traces the ordered points, while axis labels and a title are appended as SVG text elements. The line plot is rendered within a centered SVG with explicit margins and tick sizing.

Fork of Line Chart - Project 16

This visualization shows the relationship between glucose levels and BMI across countries, with each line representing a country's trajectory through the dataset. The chart uses a D3 line generator with curve basis to create smooth paths, scales from d3.scaleLinear for both axes, and d3.scaleOrdinal with schemeCategory10 for color encoding. Data is loaded from a CSV file using d3.csv, nested by country with d3.nest, and rendered as SVG. A custom colorLegend component displays the categorical color mapping.

PIE-CHART Project!

This visualization presents a pie chart comparing countries against their highest pregnancy counts, using data from a GitHub-hosted CSV dataset limited to the first 11 records. The chart renders as an SVG with colored arc segments, value labels positioned via `d3.arc` centroid calculations, and a legend showing country names and corresponding values. It employs D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `format` to generate the chart, with styling applied through external CSS.

Fork of Area Chart - DV - Project

This visualization shows the relationship between BMI and average blood pressure across many countries, with data points smoothed into a single line and area chart. The implementation uses D3 version 5 within a React application, leveraging `scaleLinear`, `line()`, `area()`, and `curveBasis` to construct the SVG paths. The chart renders from a CSV file containing health metrics, with axes labeled and styled. The line and area are drawn as black and light green SVG paths, respectively, with a vertical axis showing average blood pressure and a horizontal axis for BMI.

Project - Network Graph

This network graph visualizes friendships among eight individuals, using white nodes with labels and directional links with markers. It leverages D3 v6’s `forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while drag interactions allow manual rearrangement. The SVG is rendered in React, with data loaded from `data.json`, and hover highlighting is applied via the `focusNode` and `blurNode` functions.

Project 3D Bar Graph

This example shows a 3D multi-series bar graph tracking pregnancy and BMI values for various countries, using a dataset loaded from a CSV file. The visualization renders two bars per country through the d3-x3d and x3dom libraries, which integrate D3 selections with X3D scenes. The code uses d3.csv to parse the data, d3.scaleLinear for scaling, and the barChartMultiSeries chart component to generate the 3D bars. The chart is automatically initialized with random data before being updated with the real CSV data.

ICE-7 Area Graph

This area graph displays the highest recorded temperatures in Celsius from 2000 to 2010, using a smooth curve to emphasize temperature trends over time. The visualization is rendered as an SVG using D3 v5, with axes created through `scaleTime` for the year-based x-axis and `scaleLinear` for the temperature y-axis. The line and area paths are generated using D3’s `line` and `area` generators with a basis curve, while the underlying temperature data comes from the Data Canvas - Sense Your City project.

Project - Map

This choropleth map visualizes internet users per 100 people across countries using 2021 data, with color intensity representing usage rates from a green scale. The map includes hover tooltips showing exact percentages and supports zooming via `d3.zoom` with adjustable stroke widths. Built with D3 v7 and TopoJSON, it renders countries using `d3.geoNaturalEarth1` projection and `d3.geoPath`, with a custom color legend and graticule overlay.

ICE-7 PIE CHART

This pie chart shows the highest recorded temperatures per year from 2000 to 2010. Each slice represents a year, labeled with its temperature value and colored according to a categorical scale. The chart is built with D3 v5, using the `pie` and `arc` generators to create SVG paths, and a `scaleOrdinal` for colors. Data is loaded from a raw GitHub CSV via `d3.csv`.

BAR GRAPH - Project

A bar graph displays the fifteen countries with the highest recorded pregnancy counts from a CSV dataset, ranking them along a horizontal axis. The visualization uses React to manage state and D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `max` functions to load data, compute scales, and render SVG rectangles. Axes are drawn manually with grid lines and text labels, while margins and dimensions are defined as constants. The chart updates reactively when data loads, showing a clean, horizontal bar layout for comparison.

ICE-6

This bar chart displays the magnitudes of earthquakes across different states in India, ranking the first 50 records from a CSV dataset. The visualization uses React for component structure and D3 v5 scales and SVG rendering to map state names to a y-axis band scale and magnitude values to an x-axis linear scale. Blue gridlines and labeled axes help compare the relative severity of seismic activity across regions, with data loaded asynchronously via D3’s `csv` function and rendered as horizontal rectangles.

Tree and Network - Network Graph(ICE-8)

This example visualizes a social network graph depicting friendship relationships among eight individuals, with nodes representing people and directed links showing connections. The network layout uses d3.forceSimulation with forceLink, forceManyBody, and forceCollide to position nodes dynamically. Rendered as SVG, the graph features white circles with text labels and arrowhead markers on links, while hovering highlights nodes with a pink stroke. The visualization loads JSON data containing node groups and link relationship types from data.json, making the social connections immediately visible through interactive, force-directed positioning.

Tree and Network - Family Tree(ICE-8)

This visualization presents a plant classification hierarchy as an interactive tree diagram, with nodes for categories like "PLANT," "NON-SEEDS," "SEEDS," and individual species such as "FERNS" and "SUNFLOWER." Built with D3 v3 and jQuery, it uses the `d3.layout.tree` layout and renders nodes as colored rectangles in an SVG, with green links and arrow markers. The tree supports zooming and dragging via `d3.behavior.zoom`, and includes tooltips on hover. Data is loaded from `mydata.json` and styled with custom CSS.

Making Maps - Country Map(ICE-8)

This example renders a choropleth-style map of India using SVG. The code loads GeoJSON data containing Indian state boundaries, converts it with `topojson.feature`, and projects it using `d3.geoMercator` with `d3.geoPath`. States are drawn as stroked paths, with colors assigned via `d3.scaleOrdinal` and `schemeCategory10`. A `d3.zoom` handler enables panning and zooming on the map.

Making Maps - World Map(ICE-8)

This interactive world map visualizes countries and landmasses using the Natural Earth projection, rendered as SVG paths in a React application. The code employs d3.geoNaturalEarth1 for projection, d3.geoPath for generating geographic shapes, and d3.geoGraticule for grid lines. TopoJSON data from the world-atlas package provides country boundaries, with interiors highlighted as black borders. The map uses a blue color scheme for land and lighter fills for the sphere, with styled class names for distinct geographic elements. The visualization demonstrates geographic data integration with React state management for asynchronous loading.

Bonus ICE Scatter plot using D3.js

This example displays agricultural data from India as a 3D scatter plot, with each trace mapping different variables—crop, production, and district on the first trace, and crop year, season, and area on the second. It uses the Plotly.js library to render the `scatter3d` markers, loading CSV data through D3.js v3’s `d3.csv` method. The code defines two marker traces with distinct colors and opacity, then plots them in a single `myDiv` container with zero margins for a clean view.

Apr 6, 2023

Fork of Bonus ICE

A 3D scatter plot displays the Palmer Penguins dataset, mapping body mass, culmen length, and flipper length along the three axes. Points are colored by species using a custom Plotly colorscale, with steel blue for Adelie, salmon for Chinstrap, and gold for Gentoo penguins. The visualization uses Plotly’s `scatter3d` trace type via `Plotly.newPlot`, while D3’s `csv` loads the data from a remote file. Each axis includes a colored background and white gridlines, with markers outlined in white for clarity.

Apr 6, 2023

Bonus ICE - 3D Bar Chart using D3.js

This example presents a 3D bar chart visualizing the hourly climbing distances of athletes over five consecutive hours. Built with React and D3.js v5, it uses the `d3.x3d.chart.barChartMultiSeries` API to render the multi-series data as 3D bars, relying on the d3-3d and X3DOM libraries for the 3D scene. The data is fetched from a CSV file using D3’s `csv` function and parsed into a key-value structure before being passed to the chart.

Apr 6, 2023

Fork of 3D Bar chart - Bonus_ICE

This example presents a 3D bar chart visualizing employee attrition across multiple departments, with each department’s data broken down into five hourly time segments. It uses the `d3-x3d` library and the X3DOM runtime to render the chart in a browser, integrating with D3 v5 for data processing. The data is loaded from a CSV file hosted on GitHub, parsed with `d3.csv`, and plotted via the `barChartMultiSeries` API. The chart is embedded in an HTML page using a React-like `d3.select` approach, with axes and styling handled through the same library.

Apr 5, 2023

Fork of Fork of 3D Bar chart

This example displays a 3D multi-series bar chart showing monthly sales rates for fruits across different states. The visualization uses the d3-x3d library to render the bars in an interactive X3D scene, with D3 v5 handling data loading and parsing from a CSV file hosted on GitHub. The chart presents each state as a series of bars for months including "Year_2015," Feb, Mar, and others through Dec. The code creates a bar chart using `d3.x3d.chart.barChartMultiSeries()` and binds the parsed data to the chart holder div via D3’s `datum` and `call` methods.

Apr 5, 2023

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot animates through the Iris dataset, cycling through four possible feature pairings for the x-axis while keeping petal width on the y-axis. The visualization uses D3.js v6 within a React context to render SVG circles colored by species, with a static legend and axis labels. The code employs `scaleLinear` for mapping data to coordinates, `axisLeft` and `axisBottom` for axes, and `setInterval` to trigger sequential updates via the reusable `scatterPlot` module, which re-computes scales and redraws marks on each step.

ICE-7 - Reusable scatter plot with different symbol

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with different D3 symbols and colors. Built as a reusable D3 component, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render points, axes, and margins dynamically. The SVG output updates based on window size, with data loaded via `csv` and parsed before rendering.

ICE-7 - Fork for Reusable_D3_Scatter_Plot.

This interactive scatter plot, built with React and D3, visualizes the Iris dataset, mapping petal and sepal measurements. The plot cycles through four x-axis variables on a timer, animating the data points with D3's `selectAll` and `join` operations. It uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and renders via SVG. Data is loaded from a CSV URL, and the visualization includes a custom color legend for species, with `setInterval` driving the periodic updates.

ICE-7 Line Chart

This D3.js example visualizes the highest recorded temperatures from 2000-2010 as a line chart, with years on the x-axis and degrees on the y-axis. The chart uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the scales and axes, while d3.line generates the path. Data is loaded from a CSV file hosted on GitHub using d3.csv. SVG rendering is used, with a red line styled via CSS.

ICE-6 Part 2

This example visualizes earthquake data from a CSV file, plotting latitude against longitude as a scatter plot with each point sized by depth. The chart uses D3 v6 to load and parse the data, then renders SVG circles with color-coded species markers. Axes are generated using `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The visualization dynamically fills the browser window and includes labeled latitude and longitude axes.

Mar 23, 2023

Untitled

This example demonstrates a minimal React setup where an HTML page uses CSS and JavaScript to render interactive content. It leverages React’s component-based architecture to manage the user interface, with the page structure defined in `index.html` and logic handled through JavaScript. The code follows a starter template pattern, emphasizing a bare-bones approach to integrating React with standard web technologies. It does not incorporate data visualization libraries like D3 or Three.js, focusing instead on foundational React rendering and styling techniques.

Mar 9, 2023

Assignment - 5 (ICE)

This example displays a static Earth image embedded as a pattern fill inside an SVG rectangle. It uses D3 v7 to load the visualization, while the base64-encoded JPEG data provides the Earth imagery. The rectangle’s fill references an SVG pattern that maps the image onto the canvas, with CSS styling controlling background color and text presentation. The SVG is defined entirely in raw HTML, with no interactive or dynamic elements.

Mar 9, 2023