A

Ashrith Kudidhi

@kudidhiashrith·21 public vizzes

Loading thumbnail…

Social Network

This social network graph visualizes the friendships between ten people using a force-directed layout. Nodes represent individuals and links show their connections, with all nodes colored orange and link thickness indicating relationship strength. Built with D3 v6, the visualization uses `d3.forceSimulation` with link, many-body, collision, and center forces to position nodes. Users can drag nodes to rearrange the network. Data comes from the embedded `data.json` file, with nodes labeled directly and rendered as SVG circles and lines.

Loading thumbnail…

India Map

This example displays a map of India with each state rendered as a filled green path. It demonstrates the core D3 geo capabilities, using `geoMercator` to project geographic coordinates and `geoPath` to generate the SVG path strings for the map features. The visualization is built with React, fetching GeoJSON data from a GitHub gist and converting it from TopoJSON using the `topojson` `feature` function. The Map component imports these D3 functions to transform the data into the final SVG rendering.

Loading thumbnail…

Swedish map

This example displays a choropleth map of Swedish counties using SVG paths generated from TopoJSON data. The visualization loads geojson features from a UK counties dataset and renders them with D3’s geoMercator projection and geoPath. Built with React, the map uses a custom `useData` hook to fetch and transform the topology, while the `Map` component iterates over features to draw each region. The code demonstrates ES6 module imports, D3 integration via UNPKG, and React state management for asynchronous data loading.

Loading thumbnail…

Family Tree

This example shows a family tree visualization with nodes colored by generation and animated SVG paths connecting parents to children. The tree layout uses d3.stratify() and d3.tree() to compute node positions from the hierarchical data. Circles and text labels are rendered as SVG elements, with d3 transitions animating the connecting paths and node sizing. Generation colors are assigned via a custom switch function, and the SVG fills the browser viewport.

Loading thumbnail…

ICE 8 - WORLD MAP

This example displays a world map using a natural Earth projection, rendering each country as a purple SVG path with white borders against a pink background. It loads geographic data from the `world-atlas` TopoJSON dataset and converts it to GeoJSON using the `feature` function from `topojson`. The visualization is built with D3 v5, using `geoNaturalEarth1` for the projection, `geoPath` to generate SVG paths, and `select`/`json` for DOM manipulation and asynchronous data loading. A gray sphere outlines the earth's boundary.

Loading thumbnail…

ice

A 3D column chart visualizes daily visitor counts for seven Hyderabad restaurants, comparing six menu items including Masala Dosa, Fried Rice, and Biryani. The Highcharts library with its highcharts-3d extension renders the chart, using plotOptions for depth and stacking configurations. The chart presents categories on the x-axis, visitor counts on the y-axis, and a z-axis labeled "Various Sources." The data consists of static arrays of coordinate-value pairs embedded within the series definitions.

Loading thumbnail…

ice

This 3D column chart compares daily visitor counts across seven Hyderabad restaurants, with each restaurant’s bars grouped by six menu items such as Masala Dosa, Fried Rice, and Biryani. The chart uses Highcharts with the highcharts-3d module, enabling an isometric view via alpha, beta, and depth settings, and stacks columns along a z-axis labeled “Various Sources.” Data values are hardcoded as arrays in the series definitions.

Loading thumbnail…

Untitled

This example shows a 3D scatter plot comparing two sets of data points across three variables: a1/s1/h1 and a2/s2/h2. The visualization uses two distinct marker styles—one with black outlines and one with pink circles and green outlines—to differentiate the datasets. The code loads CSV data from a GitHub gist using the D3.js `d3.csv` function, then constructs the plot with Plotly's `scatter3d` trace type. The layout removes all margins to maximize the plot area, and the chart is rendered into a div using `Plotly.newPlot`.

Loading thumbnail…

Untitled

This example visualizes the average price per head at restaurants in Hyderabad, India, using a bar chart rendered as SVG with D3 v4. The chart displays restaurant names on the x-axis and prices on the y-axis, with bars animating into place. Hovering over a bar highlights it in orange and displays its price, using the `d3.select`, `d3.scaleBand`, and `d3.scaleLinear` APIs along with D3 transitions. The data is loaded from a remote CSV file, and the chart includes labeled axes and gridlines.

Loading thumbnail…

Untitled

This example visualizes the price per head at Hyderabad restaurants using a bar chart, with an animated entrance and interactive highlighting on mouseover. Built with D3 v4 and SVG, bars transition in sequentially, while hovering enlarges a bar and displays its price in rupees. The code uses `d3.scaleBand`, `d3.scaleLinear`, and `transition` for animation, with event handlers `onMouseOver` and `onMouseOut` to toggle highlighting and show tooltip-like text.

Loading thumbnail…

Assignment 7 Area chart

This area chart displays movie ticket rates over the past year, with month on the x-axis and rates on the y-axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth green filled region beneath the line. Data is loaded from a CSV file via `d3.csv`, and axes are rendered with `axisBottom` and `axisLeft`, including grid lines and custom labels. The SVG output includes a title and axis annotations, styled through external CSS.

Loading thumbnail…

ICE-7 - Scatter Plot

This animated scatter plot maps student performance metrics, such as scores in tenth, twelfth, and college, along with time spent, against each other. The plot cycles through different x-axis variables, updating the visualization in a loop, and colors data points by hobby categories: Cinema, Sports, and Others. Built with D3 v6, it uses `d3.csv` to load the data and a custom `scatterPlot` module that constructs axes and circles, rendering the SVG animation with a legend and labels.

Loading thumbnail…

Assignment 7 line chart

This line chart visualizes movie ticket prices over the last year, with months on the x-axis and rates on the y-axis. The chart is rendered as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for the axes, and `line` with `curveBasis` to create a smooth trend line. Data is loaded from a CSV file hosted on GitHub, and the visualization is styled via a separate CSS file.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the minimal structure of a VizHub project, showing how D3.js and local ES6 modules interact within a simple web page. It displays the text "Hello VizHub!" centered on the screen, using a D3 selection to set the content of an HTML `div` element. The page loads D3 v5 from the UNPKG CDN in `index.html`, while `index.js` imports the `select` function from D3 and a custom `message` string from a local module. The accompanying `styles.css` uses CSS to format the message with a large font size.

Loading thumbnail…

Assignmnet 7 Pie Chart

This pie chart visualizes the proportion of COVID-19 cases across the top five nations, with each slice labeled with its percentage and a color-coded legend listing country names and values. It loads CSV data from a GitHub gist and renders the chart using D3 v5’s pie and arc generators, with a scaleOrdinal for slice colors. Text labels are positioned via arc.centroid, and the legend is assembled manually with rect and text elements. The SVG is selected and sized from the HTML attributes, and data processing occurs asynchronously with async/await.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal and sepal measurements across four dimensions. The chart cycles through different variable pairings every two seconds, dynamically updating the x-axis while points shift and recolor by species (green, yellow, red). The reusable chart pattern from Bostock’s “Towards Reusable Charts” uses d3.scaleLinear, axisBottom, axisLeft, and SVG circles. Data loads via d3.csv from a GitHub gist, with viewport-sized rendering and custom label annotations.

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal and sepal dimensions as colored points that cycle through different axis combinations every two seconds. Built with React and D3.js, the visualization uses SVG circles with animated transitions, where each species (setosa, versicolor, virginica) receives a distinct color. The code fetches CSV data via d3.csv, renders the plot using the custom scatterPlot component, and includes axis labels for petal length and sepal length.

Loading thumbnail…

ICE-6

This visualization displays the Iris dataset, plotting petal dimensions along the axes while mapping sepal measurements to circle properties. The SVG uses `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for scales and ticks. Circles are colored by species (setosa, versicolor, virginica) via a switch function, with `rx` and `ry` attributes derived from sepal length and width. The data loads from a CSV using D3’s `csv` method with type coercion, and the chart resizes to the viewport.

Loading thumbnail…

ICE-6

This example displays a horizontal bar chart of the ten least populated U.S. states, filtered from a CSV dataset. The chart uses a React component with D3.js v5 helper functions like `scaleBand` and `scaleLinear` to map state names and population values to SVG rectangles. Axes are rendered using D3 `ticks`, and the SVG output includes green grid lines. The data is loaded asynchronously via D3’s `csv` function.

Loading thumbnail…

ASSIGNMENT-5

This example displays a summary of a perfume sales dataset, showing the data size, row count, and column count in a large, styled text block. The visualization uses D3.js to load a CSV file from a GitHub gist and computes the data’s total size in kilobytes. The page also embeds a static SVG image, likely depicting a chart of the same data. The code relies on the D3 `csv` and `csvFormat` methods to fetch and measure the dataset, while custom CSS styling applies vibrant background colors to the headline and data summary.

Loading thumbnail…

AK OWN FACE

This SVG portrait of a face, rendered by React, is drawn from the fictional character Danny Phantom. The code constructs the face using basic geometric shapes: a large circle forms the head, with nested circles for the eyes, irises, and pupils, while rectangles create tilted eyebrows. A path derived from the `d3.arc` API forms the mouth, and a polyline and polygon define the nose and hair. The design scales with the browser window, using window dimensions to center all elements.