jgaur96@gmail.com

ICE-8_CanadaMap

This example visualizes a map of Canada with its provinces distinguished by light blue fill and white borders, rendered as scalable vector graphics. It loads TopoJSON data from a GitHub gist and uses d3.geoMercator for projection, with d3.geoPath converting geographic coordinates into SVG paths. The code employs topojson.feature for extracting province geometries and topojson.mesh for drawing internal boundaries, while d3.json handles asynchronous data loading.

ICE8_Worldmap_Happiness_Level

ICE8_Conceptual_n/w_CityRoute

Eight Indian cities form a force-directed network, with labeled circular nodes connected by gray links to represent conceptual city routes. The visualization uses d3.forceSimulation to model the network, applying forceLink, forceManyBody, and forceCenter physics to position the cities. Each city is rendered as a draggable SVG circle with a text label, and node positions update dynamically during the simulation's tick events. The graph highlights connectivity between major metropolitan areas like Delhi, Mumbai, and Bengaluru through the defined link list.

ICE8-2(a)_Food_Tree

This interactive tree diagram categorizes foods into fruits, vegetables, and dairy, with further subcategories like citrus and leafy greens. It uses D3.js v7’s `d3.hierarchy` and `d3.tree` to create the layout, with `d3.linkVertical` for the connecting links. Nodes are drawn as distinct SVG shapes—diamonds, circles, triangles, and squares—based on tree depth, using D3’s `d3.symbol` API. Each node is colored by hierarchical level, and the SVG is rendered and styled via a linked CSS file.

ICE_7_Line_Chart

This visualization shows the average monthly temperature trend as a smooth line chart, with blue strokes highlighting temperature changes over time. The code loads weather data from a CSV file via the GitHub Gist URL, parses date and temperature fields, and aggregates daily readings into monthly averages using d3.rollups. The line is rendered with d3.line and d3.curveMonotoneX, with time and linear scales for axes. The chart includes labeled x- and y-axes, using d3.axisBottom and d3.axisLeft, and is built with D3 v7 within an SVG viewBox.

ICE7_Pie_Chart_EV

This pie chart shows the distribution of electric vehicle sales by company, aggregating data from a linked CSV file and displaying the top ten manufacturers alongside an "Other" category for the remainder. It encodes proportions as colored slices with percentage labels for segments of at least 4% of total sales, and includes a legend listing each company. The visualization uses D3 v7's `d3.csv`, `d3.rollups`, `d3.sum`, `d3.pie`, and `d3.arc` to compute and render the chart as SVG paths and text, with a Tableau10 color scheme applied via `d3.scaleOrdinal`.

ICE_6_Amalgamated_Bar_Line

This visualization presents quarterly retail sales data in two complementary views. The first chart uses multiple line series with d3.line and d3.scalePoint to compare sales trends across North, West, and East regions. The second chart combines bar and line marks, using d3.scaleBand for advertising spending and a second linear scale for total sales, with data aggregated from a CSV file. The SVG rendering uses d3.axisBottom and d3.axisLeft for axes, while custom legends identify series colors.

Ice_6_Bar_Chart

This bar chart visualizes total electric vehicle sales per company, sorted in descending order, using data from a CSV file. The chart is built with React and D3 v7, using `d3.csv` to load data, `d3.rollups` to aggregate sales by company, and `d3.scaleBand` and `d3.scaleLinear` to map companies and sales totals. It renders as an SVG, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and includes rotated tick labels for readability.

ICE5

This example displays a static SVG scene of a house, tree, sun, and surrounding landscape, paired with a summary of a medical insurance dataset loaded from a GitHub-hosted CSV file. The page uses D3 v7’s `d3.csv` to fetch and parse the data, then reports the dataset’s size in kilobytes, row count, and column count in both the console and a styled `<pre>` container. The visualization itself is a hand-coded SVG illustration embedded via an `<img>` tag, while the page layout and typography are styled with CSS gradients and custom fonts.