Manoj Kolluri

@ManojKolluri·9 public vizzes

Networktree

This example visualizes a small network of six academic subjects, grouped into three clusters, using a force-directed layout. It shows the relationships between nodes as weighted links, with line thickness proportional to the link weight and node labels displayed beside circles. The code uses `d3.layout.force` from D3 v4 to simulate the physics and positions elements in an SVG container. It loads data from a local JSON file, applies CSS styling to links and nodes, and updates positions on each tick event.

Jul 17, 2022

Loading thumbnail…

Simple Tree

This example visualizes a hierarchical tree of physics topics, showing the breakdown from general categories like Classic and Modern Physics down to specific subfields. A static, non-interactive layout renders the data as a series of linked nodes, with each link’s color corresponding to the `level` property of the descendant node. The visualization is built using the D3.js v6 library, employing the `d3.tree()` layout algorithm on hierarchical data and using SVG paths for the links. The tree data is embedded directly in the source code as a JavaScript object.

Jul 17, 2022

Loading thumbnail…

Country

This example displays a map of India rendered in red on a blank SVG canvas. Using the D3.js v4 library, it loads GeoJSON country data, filters the features to isolate India, and projects it with `d3.geoMercator` and `d3.geoPath`. The map is centered using specific latitude and longitude coordinates and scaled to fit an 840x500 pixel SVG, with data sourced from a GitHub gist.

Jul 17, 2022

Loading thumbnail…

World Map

This example shows a world map rendered as an SVG, with countries filled in tan and outlined in black, set against a light blue sphere. It uses the D3.js library (v5) to load a TopoJSON file from a GitHub gist, extract country features via the `topojson` API, and project them using `d3.geoNaturalEarth1` and `d3.geoPath`. The map is drawn by appending path elements to an SVG element, with styling applied via CSS classes.

Jul 17, 2022

Loading thumbnail…

Area Chart

This example visualizes carbon emissions over time using an area chart. The x-axis represents total emissions, while the y-axis represents the year, with the green filled area and blue stroke line showing the trend. Built with D3 v5 and React, it loads CSV data and renders as an SVG. The code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` for smooth interpolation, along with custom axis labels and title styling.

Jul 7, 2022

Loading thumbnail…

Line Chart

This line chart visualizes carbon emissions from 1740, plotting year against total emissions as a smooth, rounded curve. The graph uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the SVG path, while `csv` loads external data. The chart includes labeled axes, a title, and gridlines, with a maroon stroke for the line and sans-serif text styling.

Jul 7, 2022

Loading thumbnail…

Untitled

This example shows a donut-style pie chart of population by age groups, with colored arcs labeled directly on the chart and a legend listing each age range alongside its population count. The chart uses d3.csv to load age-pop.csv from a remote URL, d3.layout.pie to compute arc angles from the population field, and d3.svg.arc to render the segments. Colors come from d3.scale.category20(), while the legend and arc labels are added as SVG text and rect elements appended to the same svg container.

Jul 7, 2022

Loading thumbnail…

Reusable Scatter Plot

This interactive scatter plot visualizes Olympic medal data, mapping bronze medal counts against total medals while using circle size and color to indicate gold and silver medal tallies for the USA, China, and Japan. Built with React and D3, the visualization uses an animated `setInterval` to rotate through different x-axis columns, including total, silver, and bronze medals. The code leverages D3's `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render SVG circles and axes, with a custom legend and country-based color coding.

Jul 7, 2022

Loading thumbnail…

Untitled

This example shows a simple data-summary message about a CSV file, displayed as text alongside a static SVG dragonball logo on a gold background. The page uses D3 v7 to load the CSV from a GitHub gist, then calculates and presents the file size in kilobytes, row count, and column count in a `<pre>` element. It also logs the same information to the browser console. The SVG rendering is purely decorative, featuring a yellow circle with an orange star.

Jul 3, 2022