Dhanusree Kodali

@Dhanu0725·14 public vizzes

ICE-8 World Map (Dhanusree Kodali)

This visualization presents a world map with data points plotted from a SPARQL query against the Netwerk Digitaal Erfgoed API. It uses a natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries with `d3.geoPath` from TopoJSON data. Each retrieved location appears as an animated circle that transitions from zero to its final radius using `d3.easeBounce`, with staggered delays. The map is drawn with SVG elements styled in CSS, and the code relies on D3 v5 and the TopoJSON library.

Sep 27, 2022

Loading thumbnail…

ICE-8 Gujarat State Map (India) Dhanusree Kodali

This D3.js and React visualization presents an interactive SVG map of the Indian state of Gujarat, styled as a choropleth with sky-blue districts outlined in black. A Mercator projection via `d3.geoMercator` and `d3.geoPath` renders the geographic boundaries, while hover effects—triggered through CSS `.feature:hover`—highlight districts in pale violet. The map originates from a TopoJSON file fetched over HTTPS, processed with the `topojson` library’s `feature` and `mesh` functions to isolate state and district borders. The visualization’s design emphasizes clarity through bold colors and a light background.

Sep 27, 2022

Loading thumbnail…

ICE-8 Tree_Plant Kingdom (Dhanusree Kodali)

This visualization presents a hierarchical classification of the Plant Kingdom as an animated, collapsible tree diagram. It shows the breakdown from the root into Non-Vascular and Vascular categories, further subdividing into Seed/Spore Bearing groups and specific examples like Angiosperms and Grasses. Built with D3.js v3 and jQuery, it uses `d3.layout.tree` for layout and SVG rendering. Node colors vary by type, and interactions include click-to-collapse, zooming via `d3.behavior.zoom`, and animated transitions for expanding and collapsing branches.

Jul 10, 2022

Loading thumbnail…

ICE-8 Social Network Graph (Dhanusree Kodali)

This interactive network graph visualizes a social network of nine individuals and their connections, using node-link diagrams to represent people and their relationships. The visualization is built with D3.js v4 and React, rendering SVG elements with animation. The force-directed layout is powered by `d3.layout.force()` with custom gravity, distance, and charge parameters, while nodes are draggable and display tooltips on hover. Data is loaded from an external JSON file containing node groups and weighted links, with link thickness proportional to connection weight.

Jul 9, 2022

Loading thumbnail…

ICE-7 Line_Graph (Dhanusree Kodali)

This line graph shows the number of Walmart employees in millions from 2009 to 2022, based on an employees.csv dataset. Interactive hover selection highlights the nearest data point, displaying its exact value as a label and drawing a red vertical rule at that year. Built with Vega-Lite's API through `vl.markLine`, `vl.markCircle`, and `vl.markRule`, it uses `vl.selectSingle` for mouseover interactions and configures axis styling via a custom config.js.

Jul 7, 2022

Loading thumbnail…

BONUS ICE 3D-ScatterPlot (Dhanusree Kodali)

This 3D scatter plot visualizes insurance charges as a function of age and BMI, with each point colored by the insured person’s region (southeast, southwest, northwest, northeast) using a custom four-color scale. The visualization uses Plotly.js’s `scatter3d` trace type to render markers within an interactive 3D scene. The code loads a CSV of insurance data via `d3.csv` and maps the `region` field to numeric color values, which are then passed to the `marker` object along with a `pl_colorscale`. Each axis is given a distinct pastel background color, while the chart itself is embedded in a simple HTML page with a pink background and styled title.

Jul 7, 2022

Loading thumbnail…

Bonus ICE - 3D Bar chart

A 3D bar chart visualizes total sales for seven car brands, with each brand’s column split into six car types (Convertible, SUV, Sedan, Coupe, Hatchback, Station Wagon). Using Highcharts with the highcharts-3d module, the chart applies a column series with stacking, grouping disabled, and 3D options such as alpha, beta, viewDistance, and depth. The axes represent car brands on the x-axis, total sales on the y-axis, and car types on the z-axis, all rendered via jQuery’s container selection.

Jul 6, 2022

Loading thumbnail…

ICE-7 Area_Graph (Dhanusree Kodali)

This example uses an area graph to show the number of runs scored by Virat Kohli in the Indian Premier League across multiple years. It layers a circle mark, area mark, and interactive text and rule marks, with a single selection tied to the x-axis that highlights data points on mouseover. The visualization is built with Vega-Lite API and d3.v5, pulling CSV data from a GitHub gist, and uses custom configuration for axis styling and tooltip formatting.

Jul 3, 2022

Loading thumbnail…

ICE-7 Reusable Scatter Plot with Menu (Dhanusree Kodali)

This interactive scatter plot visualizes daily climate data, allowing users to explore relationships between date and various wind measurements (such as average, peak, and sustained wind speed/direction) through a dropdown menu that changes the y-axis attribute. The plot uses SVG rendering with React components and D3 scales (including `scaleTime`, `scaleLinear`, and `scaleOrdinal`), displaying colored circles that represent different weather stations. A color legend provides interactive filtering, where hovering over a station name highlights only that station's data points while fading others, using D3's `scaleOrdinal` for categorical color mapping and custom React components for axes and marks. The visualization demonstrates a reusable architecture by separating axis, legend, mark, and dropdown functionality into modular JavaScript files.

Jul 3, 2022

Loading thumbnail…

ICE-7 Pie_Chart (Dhanusree Kodali)

This pie chart displays the number of COVID-19 deaths in Asian countries, using raw values for eleven nations with India and Indonesia prominently highlighted. Each slice is rendered as an SVG path via d3.pie and d3.arc, with color from d3.scaleOrdinal and d3.schemeCategory20. Hovering triggers mouseover and mousemove events that adjust slice opacity and append a tooltip group with white background text.

Jul 1, 2022

Loading thumbnail…

ICE-6 (Dhanusree Kodali)

This example visualizes the total number of COVID-19 cases reported in Asian countries, displaying the top 15 countries as a horizontal bar chart with a logarithmic-like linear scale. The visualization uses React and D3 v5, with D3’s `scaleBand` and `scaleLinear` for axes and bar positioning, and `csv` to load data from a GitHub-hosted CSV file. Bars are rendered as SVG `<rect>` elements within a React component, with axis ticks generated via D3’s `axisBottom` and `axisLeft` methods. The chart reads case counts in millions from United Nations World Population Prospects 2019 data.

Jun 29, 2022

Loading thumbnail…

ICE-6 ScatterPlot (Dhanusree Kodali)

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while encoding species with distinct colors. Points are rendered as SVG circles using D3 v6’s scaleLinear, extent, axisLeft, axisBottom, and join methods. The visualization also stores sepal measurements as additional properties on each mark, though they are not displayed. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with axes labeled and styled through D3’s selection API.

Jun 29, 2022

Loading thumbnail…

ICE-5 Dhanusree Kodali

This web page presents an interactive online order system interface. It displays a title, welcome message, and a home appliance SVG image, all styled with custom CSS for colors and layout. The visualization leverages an embedded SVG with a base64-encoded JPEG image pattern, while the system uses D3.v5 for potential data manipulation, with the page structure built using React.

Jun 22, 2022

Loading thumbnail…

ICE-4 (Dhanusree Kodali)

This example renders a large, stylized smiley face centered in an SVG canvas, constructed from layered geometric shapes including concentric circles for the eyes, arcs for eyebrows and a smile, and lines for hair and other facial details. The visualization is built with React and D3 v7, using D3’s `arc` generator to create the curved mouth and eyebrow paths. All elements are drawn with SVG primitives such as `circle`, `line`, `ellipse`, and `path`, with explicit styling for fills, strokes, and rotations applied via transform attributes.

Jun 18, 2022