K

Kumar Danam

@kumardanam·18 public vizzes

Loading thumbnail…

Fork of ICE 8 Task 2B Kumar Danam

This interactive network visualization shows direct flight routes between six U.S. cities as a force-directed graph. Nodes represent cities, and gray lines depict connections. Users can drag nodes to reposition them within the layout. The implementation uses D3 v7’s `forceSimulation` API to calculate the graph layout, combining `forceLink` with a `forceManyBody` charge and a `forceCenter` force, while `d3.drag` handles interactive node manipulation. The graph is rendered as an SVG element with circles and labels.

Loading thumbnail…

ICE 8 Task 2B Kumar Danam

This example visualizes a hierarchical dataset of food categories—Food, Fruits, Vegetables, and Grains—as a vertical tree. It shows the nested structure with color-coded nodes by depth: blue for the root, orange for first-level children, and green for leaves, with links as curved paths. Built with D3.js v7, it uses `d3.hierarchy` and `d3.tree` to compute the layout, `d3.linkVertical` for the connecting paths, and SVG circles and text for node rendering. The hardcoded data is displayed in a 600×400 SVG.

Loading thumbnail…

Fork of ICE-8 1A kumar danam

This example presents two side-by-side SVG map visualizations: a world map showing population data and a U.S. map displaying crime rates. The world map uses the `d3.geoNaturalEarth1` projection with a sequential color scale (`d3.scaleSequential` with `d3.interpolateYlOrRd`) to encode population values from a hardcoded dataset, while U.S. states are rendered via `d3.geoAlbersUsa`. Both maps load TopoJSON data from `world-atlas@2` and `us-atlas@3`, converting it with `topojson.feature` and drawing paths using `d3.geoPath`. Graticules and tooltips via SVG `<title>` elements enhance the display.

Loading thumbnail…

ICE-8 1A kumar danam

This choropleth map visualizes a small dataset of numeric values for selected countries using a dark-to-light blue-green color scale. It displays world country boundaries from the `world-atlas` TopoJSON source, rendered as SVG paths via `d3.geoPath` with a Natural Earth projection. The map uses `topojson.feature` to process countries, `d3.scaleSequential` with an `interpolateYlGnBu` scheme for coloring, and a legend built with `d3.axisBottom`. Hovering over a country reveals its ISO numeric ID and value via a tooltip, with missing data shown in gray.

Loading thumbnail…

Fork of ICE-8 1A kumar danam

This example shows a choropleth world map using Natural Earth projection to display numeric values for selected countries, with a sequential YlGnBu color scale indicating magnitude. Tooltips reveal ISO numeric country IDs and their values on hover. It loads world-atlas TopoJSON data, renders via SVG, and employs d3.geoNaturalEarth1, d3.geoPath, d3.scaleSequential, and d3.csvParse. A gradient legend with a linear axis communicates the value range at the bottom.

Loading thumbnail…

Kumar Danam area chart

This area chart visualizes the average car horsepower by year, using data from a car performance CSV loaded via `d3.csv`. The chart aggregates raw Horsepower values into yearly averages with `d3.rollup`, then renders a semi-transparent filled area, an overlaid blue line, and interactive circles. It uses `d3.area`, `d3.line`, and `d3.scaleLinear` within an SVG, with a custom mouseover tooltip. The axes are labeled "Year" and "Horsepower," and the visualization is built entirely with D3.js v7.

Loading thumbnail…

Kumar Danam - LINE CHART

A line chart displays average car horsepower per year, with an overlaid scatterplot of individual data points, each circle colored by car model. The average trend is shown as a blue line, while hovering over any point reveals a tooltip with the model, year, and horsepower. The visualization aggregates the CSV data using `d3.rollup` and computes the mean horsepower, then renders the SVG with `d3.line` for the average line and `d3.scaleOrdinal` for color mapping. Interactive tooltips are enabled through `d3.select` and mouse event handlers.

Loading thumbnail…

Kumar Danam pie chart

This pie chart visualizes the distribution of horsepower across car models from a CSV dataset loaded via `d3.csv`. Each slice is rendered using `d3.pie` and `d3.arc` in an SVG, with labels positioned along an outer arc. Hovering a slice triggers a tooltip showing the model, horsepower value, and percentage of total. A color-coded legend, built with `d3.scaleOrdinal` and the Tableau10 scheme, accompanies the chart.

Loading thumbnail…

Kumar Danam -pie chart

This example shows the distribution of energy consumption across six sources—Coal, Natural Gas, Hydro, Nuclear, Solar, and Wind—using a pie chart with a color-coded legend and slice labels. The SVG visualization is built with D3 v7, using `d3.pie()` to compute arc angles and `d3.arc()` to generate the slices. Data is loaded from an external CSV file via `d3.csv()`, and a categorical color scale (`d3.scaleOrdinal` with `schemeTableau10`) assigns distinct hues to each energy source. The chart includes a title and a right-aligned legend, with white strokes separating the slices.

Loading thumbnail…

Kumar-Reusable-Scatter

This reusable scatter plot displays the relationship between horsepower and miles per gallon for ten car models, using orange-red circles positioned by linear scales. Built with d3.v7 and the reusable chart pattern, the module encapsulates configurable accessor functions, axis labels, dimensions, and color through chainable setters. The visualization loads car_performance.csv via d3.csv with d3.autoType, filters for valid numeric values, and renders an SVG with d3.axisBottom and d3.axisLeft, updating circles through the join pattern.

Loading thumbnail…

Kumar Danam Reusable scatter plot

This example demonstrates a reusable scatter plot of car data from a CSV file, showing horsepower and miles per gallon. It renders SVG circles with axes and labels, with the visualization automatically alternating the x- and y-axis assignments every two seconds. The code uses d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and the scatterPlot function pattern for reusability in D3 v6.

Loading thumbnail…

Kumar Danam Reusable Scatter Plot ICE-7

This reusable scatter plot displays calorie count against price for a menu of drinks and snacks, with each point colored by a category-specific hex value from the dataset. Built with D3.js v7, the chart uses the `d3.scaleLinear` API for axis scaling and `d3.axisBottom`/`d3.axisLeft` for tick marks, while tooltips appear on hover via mouse events. The SVG rendering follows a configurable function that accepts data, attribute names, and dimensions, making the visualization portable across different datasets.

Loading thumbnail…

Fork of Fork of reusable scatter plot kumar danam

This reusable scatter plot visualizes the relationship between horsepower and miles per gallon using a dataset of cars. Written with d3.v6, the component maps the data to circular SVG elements, with axes and labels generated via d3.axisBottom and d3.axisLeft. The visualization alternately swaps the x and y axes every three seconds, animating how the data can be interpreted from different perspectives.

Loading thumbnail…

ICE6

This example shows yearly profit as blue bars on a left axis and the average unit price as a red line on a right axis, using data loaded from a CSV via `d3.csv`. It computes yearly aggregates with `d3.rollup` and `d3.sum`. The visualization renders with `d3.select` and `append` into an SVG, using `d3.scaleBand` and `d3.scaleLinear` for the axes, and draws the line with `d3.line`.

Loading thumbnail…

Fork of ICE6-Kumar Danam

This fork of ICE6-Kumar Danam visualizes yearly sales performance with a dual-axis chart: blue bars represent total sales in millions of dollars on the left axis, while an orange line tracks total units sold on the right axis. It loads a remote CSV dataset and aggregates it with `d3.rollup`. The chart uses `d3.scaleBand` and `d3.scaleLinear`, rendered as SVG with `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`, along with a legend and axis labels.

Loading thumbnail…

ICE6-Kumar Danam

This visualization shows yearly sales performance, combining bar charts for total sales in millions of dollars with a line chart for total units sold. The code uses d3.rollup to aggregate the raw CSV data by year, then d3.scaleBand and two d3.scaleLinear instances create dual axes. SVG rendering displays the bars and line, with axes, labels, and a legend using d3.axisBottom, d3.axisLeft, d3.axisRight, and d3.join.

Loading thumbnail…

ICE6- Kumar Danam

This scatter plot visualizes the relationship between units sold and total sales revenue for a dataset of products. It uses a linear scale for both axes, with each product represented as a semi-transparent green circle, enabling a quick assessment of correlation between the two variables. The visualization is built using the D3.js v7 library, employing `d3.csv` to load the data and `d3.scaleLinear` to map the data values to screen coordinates. SVG rendering is used to draw the axes, labels, and data points, with the chart titled “Relationship Between Units Sold and Sales.”

Loading thumbnail…

ICE6-Kumar Danam

This stacked bar chart displays total brand sales in millions of dollars, broken down by region, using a Tableau10 color scheme to distinguish each region. D3.js (v7) loads CSV data from a GitHub gist, groups and aggregates sales per brand and region, then renders the visualization as SVG. The chart uses `d3.stack` for stacking, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and includes rotated brand labels, axis titles, and a legend.