mendemrudula@gmail.com

ICE 8 - Network

ICE - 8 Tree

ICE - 8

This example shows a choropleth-style map of the United States, with each state filled in a uniform green color and separated by white borders. It uses the Albers USA projection via `d3.geoAlbersUsa()` and renders the map as an SVG path using `d3.geoPath`. State boundaries are loaded from the TopoJSON `us-atlas` dataset and converted to GeoJSON features with `topojson.feature`. A single `path` element draws the entire collection of states.

Fork of Fork of ICE7-Q3 Area

Fork of ICE7-Q2b Line

This visualization shows the relationship between hours worked and tasks completed for a small team, using a smooth Catmull-Rom curve to suggest a productivity trend. Individual employees appear as teal dots on the purple line, with departments encoded in the CSV data but not visually distinguished. The chart loads employee_productivity.csv with d3.csv and d3.autoType, sorts the data by hours, and renders axes, gridlines, and the line using d3.line with curveCatmullRom.alpha(0.5). D3 v7 generates the SVG output, with axis labels and a title added manually.

ICE7-Q2a Pie

This doughnut chart displays the share of total tasks completed by each department—Engineering, Marketing, and HR—in the employee productivity dataset. Slices are sized proportionally to aggregated task counts, with percentage labels positioned at each arc’s centroid and a legend showing absolute values. The visualization uses D3 v7’s `d3.csv`, `d3.rollup`, `d3.pie`, and `d3.arc` to process data and generate SVG paths, with a pastel teal, purple, and blue color scale.

ICE 7

This scatter plot shows employee productivity by mapping hours worked against tasks completed, with each dot colored by department (teal for Engineering, purple for Marketing, blue for HR). Built with D3 v7, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for categorical colors, and `d3.axisBottom` and `d3.axisLeft` for the ticks. The chart reads from the CSV file `employee_productivity.csv`, parsing values with `d3.autoType`. Labels, a title, and an SVG background with rounded corners and a subtle shadow come from the accompanying CSS.

Sdv_6_Mrudula

This visualization presents a full year of synthetic weather data, combining four daily measurements into a single multi-series chart. The chart blends line series for temperature, humidity, and wind speed with a bar series for rainfall, all plotted against the day of the year. The code generates its own data using mathematical functions and randomness, then renders the chart with Chart.js on an HTML canvas element. The result provides a compact overview of seasonal trends and variability across the different weather metrics.

Sdv_6_Mrudula

This interactive scatter plot visualizes the Iris dataset, showing the relationship between sepal length and sepal width for 150 flowers. Each point represents a single iris, with color mapping to the setosa species, though the visualization appears to only display setosa samples. The chart uses Chart.js within an HTML canvas element, retrieving data from hardcoded arrays in the JavaScript file rather than parsing the accompanying CSV. The chart includes axis labels with units in centimeters and a title, but no legend, as all displayed points share the same species classification.

Sdv_6_Mrudula

Fork of Sdv_6_Mrudula

This fork of Sdv_6_Mrudula renders a static HTML page with a single centered message. The code uses plain HTML, CSS, and JavaScript, with the `index.js` file logging “hello world” to the console via `console.log`. The page displays the text “Hello HTML!” styled with a 12em font size and center alignment, created through the `styles.css` file. No external visualization libraries or data sources are present; the example demonstrates a minimal web page structure rather than a data-driven graphic.

Sdv_6_Mrudula

Sdv_6_Mrudula

Mrudula_SDV_6

This example displays a static message, "Hello HTML!", centered on the page. The rendering is achieved through a simple HTML structure with a CSS class that sets the font size and text alignment. The accompanying JavaScript file only logs "hello world" to the console and does not alter the visual output. The visualization relies on standard HTML and CSS properties, including the `font-size` and `text-align` declarations within the `styles.css` file.

Mrudula_SDV_6

This bar chart displays sales data from a global superstore, presenting aggregated values as vertical bars on a canvas. The visualization uses the Chart.js library, which is loaded via CDN and configured to render the chart within an HTML `<canvas>` element. The code defines a fixed chart size of 800 by 400 pixels, with a title indicating the dataset’s scope. The underlying data and axis details are not shown in the provided files, leaving the chart’s specific values unspecified, while the rendering relies entirely on Chart.js’s default bar chart behavior.

ICE6

A horizontal bar chart ranks the top 10 car brands by mean price, using 150 synthetic records from Automobiles.csv. Brand names label the y-axis, while price in dollars spans the x-axis. The React app loads the CSV with d3.csv, computes averages with d3.rollups, and renders rounded rectangles whose widths map to average price. Axes are drawn with d3.axisBottom and d3.axisLeft. Hovering reveals a tooltip with the brand and exact average price.

ICE-6

Fork of HTML Starter