Vinil Karmilla

Project - 1

This dashboard visualizes international talent in the U.S. from 2011 to 2017, showing H-1B petition outcomes, F-1 enrollment trends, and approval rates through interactive tabs. The main overview presents stacked bar charts and line graphs, while a state map and top-states ranking are available via tab navigation. The visualization uses d3.csv for data loading, Canvas for chart rendering, and SVG for the geographic map, with dynamic updates driven by a year selector.

Apr 27, 2026

Project

This dashboard visualizes international talent dynamics in the U.S. from 2011 to 2017, showing F-1 enrollment trends, H-1B petition outcomes, and state-level sponsorship data. It includes an overview panel with stacked bar charts and line graphs, a trends view comparing approval rates with average wages, and a state map. The visualization uses Canvas for all charts, SVG for the interactive state map with hover tooltips, and JavaScript tab-based filtering to switch between views.

Apr 27, 2026

ICE - 9 - Vinil Karmilla

This interactive visualization gallery explores a business dataset containing monthly records of Sales, Profit, and Customers. The scatter plot demonstrates the relationship between Sales and Profit, while using both point size and color to encode the Customer count, revealing a positive correlation. The accompanying bar and line charts compare and track these metrics over time using standard HTML and CSS layout, with the scatter plot presented as a static image.

Apr 20, 2026

ICE-8-VK-PART-2.3

This example visualizes a force-directed network of city flight routes among six U.S. cities, with nodes as teal circles and links as gray lines. Using D3 v7, it employs `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes. The SVG rendering updates node and label positions on each simulation tick. A custom drag function allows users to move nodes, which temporarily fixes their positions during interaction.

Fork of ICE-8-VK-1.2

This choropleth map of U.S. states displays a custom crime-rate index, with darker blue fills representing higher values and gray indicating missing data. State labels and a gradient legend with an axis clarify the quantitative scale. Built with D3 v7 and TopoJSON, the visualization loads US Atlas states-10m data, applies a geoAlbersUsa projection via d3.geoPath, and maps values through a d3.scaleSequential with an interpolateBlues interpolator. Hover interactions highlight state boundaries, and tooltips are provided through SVG title elements.

Fork of ICE-8-VK - Part - 2

This visualization shows a hierarchical tree of programming languages, organized into web, data, and mobile categories. It uses d3.stratify to convert flat parent-child data into a hierarchy, then applies d3.tree to compute the layout, producing SVG paths for the links with d3.linkHorizontal and styled circles for nodes. Root, middle, and leaf nodes are differentiated with distinct colors via CSS classes. The data is hardcoded as an array of objects, and the entire rendering is done through SVG elements in a 1000 by 600 viewport.

ICE-8-VK

This example displays a world map with six circles positioned over specific countries, where each circle represents the number of students from that country and is sized proportionally. The visualization uses the Natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries with `d3.geoPath`, while loading geographic data from a TopoJSON source through the `topojson-client` library. Student data points are manually defined with country names, student counts, and coordinates, then projected and drawn as SVG circles with labels showing the country name and count.

Fork of ICE - 7.3 Area Chart

This interactive D3.js area chart visualizes temperature trends over 150 days using a synthetic `climate_data.csv` file. The chart displays a light green filled area with a green stroke line, mapping temperature values across the x-axis for "Day" and y-axis for "Temperature." The implementation uses D3.js v7 scale functions (`d3.scaleLinear`) and area generator (`d3.area`) to construct the path, with axes added via `d3.axisBottom` and `d3.axisLeft`. The SVG rendering includes labeled axes and a clean white background, providing a clear view of temperature fluctuations over time.

ICE - 7.2 Line Chart

This visualization displays temperature trends across 150 days using a red line chart, with day on the x-axis and temperature on the y-axis. The code loads climate data from a CSV file using d3.csv, then applies d3.scaleLinear for both axes and d3.line to generate the SVG path. Axes are rendered with d3.axisBottom and d3.axisLeft, while axis labels are added as SVG text elements. The chart uses a white background with a light blue page backdrop, and the line has a stroke width of 2.5 pixels.

Fork of ICE-7.2 - Vinil

This example shows a pie chart of category sales from a CSV file, with each slice labeled and a legend displaying category names and values. Using d3.pie and d3.arc, it generates SVG paths for the pie slices, colored via d3.scaleOrdinal with d3.schemeTableau10. Text labels are positioned with d3.arc centroids, and a legend is built by appending rectangles and text to the SVG.

ICE-7 - Vinil\

This scatter plot shows the relationship between study hours and sleep hours for 100 students, revealing a clear negative correlation where more study time corresponds to less sleep. A reusable scatter plot function is defined, taking data accessors, labels, and color as parameters to generate the visualization. The visualization uses d3.v7 with SVG rendering, employing `d3.scaleLinear` for the axes, `d3.extent` for domain calculation, `d3.axisBottom` and `d3.axisLeft` for axis ticks, and `d3.csv` to load the student dataset.

ICE - PART - 3 - Combined

This visualization compares three climate variables—temperature, humidity, and wind speed—across 150 days of recorded data. Temperature and humidity appear as red and blue line series, while wind speed is shown as green bars, creating a combined chart. The visualization uses D3 v7 (d3.csv, d3.line, d3.scaleLinear) to load the climate_data.csv file and render the SVG elements, including axes, gridlines, and a legend. The approach overlays multiple mark types to highlight relationships between the three measurements over time.

Mar 9, 2026

ICE - PART - 2

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. Each flower is represented by an orange circle. The visualization uses D3.js v7 to load the CSV data, apply linear scales for both axes, and render SVG circles alongside axis components via `d3.axisBottom` and `d3.axisLeft`. Axis labels are added as text elements to identify the variables.

Mar 9, 2026

ICE-6 - PART - 1

A bar chart displays test scores for 120 students, with each bar representing an individual student's score on a scale from 0 to 100. The visualization uses D3.js v7 to load data from a CSV file, then maps student names to a band scale for the x-axis and scores to a linear scale for the y-axis. SVG rectangles are rendered and filled with steelblue, while axes are generated using `d3.axisBottom` and `d3.axisLeft`, with x-axis tick labels filtered to show every tenth student.

Mar 9, 2026