nagalakshmibadineedi2@gmail.com

@lakshmi629·13 public vizzes

q2

This example displays a network graph of a simplified diabetes dataset, connecting three patient nodes (Patient A, B, C) to attribute nodes representing glucose levels, BMI categories, and diabetic outcome. The force-directed layout positions nodes based on simulated physical forces. Built with D3 v7, the visualization uses `d3.forceSimulation` to handle the physics, combining `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` for centering. Nodes are colored by group (patient, glucose, BMI, outcome) using `d3.scaleOrdinal` with the `schemeCategory10` palette; node positions update on each simulation tick, rendering with SVG `line` and `circle` elements.

Apr 9, 2025

Loading thumbnail…

q1

This visualization combines two distinct scenes: a serene landscape with a golden Buddha statue, a recursive tree, and animated clouds, alongside a hierarchical tree diagram of diabetes data. The landscape uses React components to render SVG elements, with clouds animating across the sky via `setInterval` and offset states. The tree employs recursive branch drawing, while the data tree uses D3's `d3.hierarchy` and `d3.tree` APIs to display the dataset, with nodes colored by outcome and glucose levels.

Apr 9, 2025

Loading thumbnail…

Fork of Fork of Network Graph

This example shows a manually created hierarchical tree of diabetes data, grouping patients by age range and displaying binary outcomes as colored nodes. Blue and red circles represent outcome 0 and 1, while gray marks the root and branch nodes. Using d3.hierarchy and d3.tree, the layout positions nodes, with d3.linkHorizontal drawing curved paths for links. The SVG rendering applies fill colors based on the data type and positions labels with adjusted text anchors.

Apr 9, 2025

Loading thumbnail…

Fork of VEENA

This example displays a static choropleth-style world map using SVG, rendering country boundaries from TopoJSON data through d3.geoPath. The visualization presents a single, unlabeled world map centered in a light-gray background, with no interactive features or color encoding beyond the default styling. The code loads D3 v6 and TopoJSON from CDNs, and the map is generated from a separate worldMap.js script, which is not included in the visible files. The project consists of a minimal HTML page, a stylesheet with placeholder classes, and an index.js that merely logs “hello world” to the console.

Apr 8, 2025

Loading thumbnail…

Fork of VEENA

This visualization displays a world map using a Mercator projection rendered as SVG paths. Each country is drawn from TopoJSON data loaded via `d3.json` from the world-atlas package and converted to GeoJSON features with `topojson.feature`. The map uses `d3.geoMercator` and `d3.geoPath` to generate the country outlines, filling them with a teal color and white strokes. The code includes error logging to the console for data-loading failures.

Apr 7, 2025

Loading thumbnail…

Fork of Fork of Fork of ice-7 q4

An orange semi-transparent area chart displays the monthly U.S. unemployment rate from 1948 to 2021. The visualization loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and renders an SVG path using the `d3.area` generator. Time and linear scales (`d3.scaleTime`, `d3.scaleLinear`) position the axes, which are drawn with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled axes and a title, with all styling applied via CSS classes.

Apr 1, 2025

Loading thumbnail…

Fork of Fork of ice-7 q3

A single line chart shows the monthly U.S. unemployment rate from 1948 to 2021, with the x-axis as a time scale for dates and the y-axis as a linear scale for the percentage rate. The SVG chart, built with d3.v7, uses `d3.csv` to load unemployment data, `d3.timeParse` to convert date strings, and `d3.line` to generate the steel-blue path. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the chart includes a title and axis labels.

Apr 1, 2025

Loading thumbnail…

Fork of ice-7 q2

This example shows the distribution of air quality categories—such as Good, Moderate, Unhealthy, and Unhealthy for Sensitive Groups—as a pie chart with an interactive legend and tooltip. Using d3.rollup to aggregate counts from a hardcoded dataset, the SVG chart assigns each category a color-coded slice and displays its proportion. The code relies on D3 v7’s pie and arc generators, plus d3.select for DOM manipulation, with a tooltip that appears on hover.

Apr 1, 2025

Loading thumbnail…

ice-7 q1

This scatter plot visualizes air quality by comparing PM2.5 and NO2 AQI values across global cities. Each circle represents a city, with its position determined by the two pollutant levels; hovering highlights a point in orange and a tooltip displays the city and country name. Built with D3.js v7, the visualization renders as an SVG with hardcoded data from the first 100 rows of the v3 source dataset. The chart includes labeled axes and uses standard D3 scales to map the data values to pixel coordinates.

Apr 1, 2025

Loading thumbnail…

Fork of activity6 tutorial 3.1

This visualization is an interactive scatter plot of the Iris dataset, displaying petal length and petal width for three flower species—setosa, versicolor, and virginica—distinguished by color. The plot uses D3 v6 APIs, including `csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for rendering the scales. It renders circles as SVG marks, with additional sepal measurements stored as properties but not used in the visual encoding. The chart is sized to the full window, with green axis labels and a red title.

Apr 1, 2025

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot that maps categorical car models on the x-axis to their numeric prices on the y-axis using blue circular marks. Built with D3 v6, it employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick rendering. The chart is rendered as SVG, with a title and rotated x-axis labels. Sample data is embedded in the code for demonstration.

Apr 1, 2025

Loading thumbnail…

scatterplot

This scatterplot visualizes the relationship between car mileage (in kmpl) and price (in USD) for eight car models across various manufacturers. Each orange circle represents a car, positioned by its mileage on the x-axis and price on the y-axis. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` to generate the tick marks. Axis labels are added as SVG text elements, with data embedded directly in the code.

Mar 31, 2025

Loading thumbnail…

Fork of Bar chart

This fork of a D3.js v7 bar chart displays car model names on the x-axis against their price in USD on the y-axis using steel-blue rectangles. The code loads data from a hardcoded array of eight vehicles, using `d3.scaleBand` for the categorical axis and `d3.scaleLinear` with `.nice()` for the continuous price scale. Axis labels are added via SVG `text` elements, and the chart renders entirely as an SVG inside an HTML page with no external data source.

Mar 25, 2025