A

amulyakannam

@amulyakannam·21 public vizzes

Loading thumbnail…

Fork of Social Network Graph_ICE8 _ A_K

This visualization shows a social network of eight people as an interactive node-link diagram, with orange circles representing individuals and labeled arrows showing friendship connections. The graph uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, while d3.drag enables users to move nodes. Hovering highlights a node with a gray border. The data is loaded from a JSON file containing nodes with group assignments and links with relationship types and values, and the SVG renders markers on link endpoints to indicate direction.

Loading thumbnail…

Fork of ICE8_Family Tree _A_K

This example visualizes a family tree as an interactive, animated hierarchy using D3 v3. The tree layout renders nodes as color-coded rectangles with labels and links, including arrows and tooltips, from a JSON data source. The visualization uses `d3.layout.tree` for positioning, D3’s zoom and drag behavior, and SVG for rendering. The code also demonstrates collision detection between nodes and dynamic resizing of the SVG based on tree depth and breadth, all within a green-themed, boxed design.

Loading thumbnail…

Fork of ICE 8 - Country Map_AK

This example displays a map of the United States, rendered with orange state boundaries against a blue ocean background. The visualization uses D3 v4’s `d3.geoPath` and `d3.geoAlbersUsa` projection to draw the states from TopoJSON data loaded via `topojson.feature`. The map is positioned within an SVG container, with styling applied through CSS. The code reads the us-atlas states-10m dataset from a CDN and draws each state as a separate path element.

Loading thumbnail…

Fork of World Map with D3.js!_AK

This example displays a world map using an equirectangular projection, with countries filled in orange and outlined in blue against a light blue ocean sphere. The visualization highlights individual countries in red when hovered over, providing interactive feedback. It loads world country boundaries from the world-atlas TopoJSON dataset via `d3.json`, converts them to GeoJSON with `topojson.feature`, and renders them using `d3.geoPath` with `d3.geoEquirectangular`. The SVG elements are styled through CSS classes for the sphere and countries.

Loading thumbnail…

Ak's_ACt

This chart shows the annual number of social media users from 2008 to 2018 using a combined line and area chart rendered as an SVG. The line emphasizes the trend over time, while the filled area beneath it highlights the magnitude of growth. The visualization loads CSV data from a GitHub gist and uses D3 v5 APIs including `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, `line`, `area`, and `curveBasis` to generate the paths and axes. Custom tick formatting and labeled axes are applied via D3's `format` and axis components, with styling defined in an external stylesheet.

Loading thumbnail…

Ak's_AreaChart

This area chart visualizes Android user data over time, with the x-axis representing years and the y-axis representing user counts. The chart uses a smoothed curve to display the trend of user growth. Built with D3 v6, the visualization employs `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the filled area, and `axisBottom`/`axisLeft` for ticks. The SVG renders a single orange path, with data sourced from a Gist-hosted CSV file.

Loading thumbnail…

AK's_AreaChart

This example shows a smoothed area chart of mobile phone prices over time, with monthly cost values plotted on the y-axis and time on the x-axis. The SVG visualization uses D3 v5 scales (`scaleTime`, `scaleLinear`) and generators (`line`, `area`) with `curveBasis` to create the filled curve. Data is loaded from a CSV file and parsed with `d3.timeParse`. Axes are rendered with `axisBottom` and `axisLeft`, including grid lines via tick sizing. The chart is built within a React project but uses direct DOM manipulation through D3 selections.

Loading thumbnail…

Ak's_Line Chart

The line chart visualizes US auto sales from 2005 to 2022, using a time-based x-axis for years and a linear y-axis for sales volume, with the trend line rendered in blue over a tan background. The visualization employs D3 v5 APIs including `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, `line` for the path generator, and `extent` and `max` for domain calculations. Data is loaded asynchronously via `csv` from a public GitHub Gist, and the SVG output includes rotated axis labels and a descriptive title.

Loading thumbnail…

AK's_PieChart

This D3.js pie chart visualizes social media usage percentages across ten countries, with each slice labeled by its corresponding value. The chart uses `d3.pie` to compute arc segments, `d3.arc` for generating the path geometry, and `d3.scaleOrdinal` to map categorical colors to each country. Data is loaded asynchronously from a CSV file using `d3.csv`. A legend on the right pairs each country with its percentage, and all text labels are formatted using `d3.format`. The SVG canvas is 960 by 500 pixels with a black background.

Loading thumbnail…

Untitled

This pie chart visualizes the number of deaths by country, with each slice labeled with its value in thousands and a corresponding legend. The chart is built using the D3.js library, pulling data from a CSV file and rendering it with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for colors. A separate version of the same visualization uses Google Charts' `PieChart` class, fetching data from a Gist URL and displaying it within an HTML div.

Loading thumbnail…

Pie_Chart_ICE7

This pie chart displays the top 10 countries by total number of movies and shows in the Amazon Prime library. The dataset is loaded from a CSV file and sorted in descending order before rendering. Using D3 v5, the visualization employs `d3.pie` and `d3.arc` to generate the donut-shaped segments, while `d3.scaleOrdinal` with `schemeCategory10` assigns colors. A legend on the right lists each country with its corresponding value, and hovering over a segment logs the data to the console.

Loading thumbnail…

Fork of Amulya_kannam

This fork of Amulya_kannam combines a static scatterplot with an animated cycling of x-axis variables. SVG circles represent data points whose horizontal position shifts through four columns from a CSV file (`RideWidthCm`, `RoadWidthCm`, `RideLengthCm`, `RoadLengthCm`) on a timer, while the y-axis remains fixed on road length. A hardcoded legend maps categories (word-wrap, word-color, word-country) to fill colors. The example uses D3 v5 for SVG rendering and `setInterval` to trigger modal updates, alongside jQuery for DOM element selection.

Loading thumbnail…

Amulya_kannam

This interactive animated scatterplot compares Texas county voter turnout and partisan margins between 2012 and 2018, with circles sized by population. The visualization includes a dropdown menu to highlight individual counties, and hover interactions add activation classes. It uses D3 v5 with SVG rendering, loading CSV data from an Amazon S3 bucket, and animates axes through a `setInterval` loop cycling among different data columns. The code also builds connecting lines with arrowheads between election years and displays a color-coded legend for word-wrap categories.

Loading thumbnail…

AK_viz

AK_viz visualizes Texas county-level election results, comparing voter turnout and partisanship between 2012 and 2018 Senate races. Each circle represents a county positioned by its partisan margin and turnout, with size encoding population, while lines with arrowheads connect the same county’s two-year transition. The SVG animation uses D3 v5 transitions and scales, with mouseover handlers highlighting counties and a dropdown menu for selection. Data is loaded from a CSV and processed via ES6 modules, with random values generated for 2018 metrics.

Loading thumbnail…

Fork of Scatterplot test

A scatterplot maps Texas counties by voter turnout against the margin of victory in the 2012 and 2018 Senate elections, with circle size scaled to population. Arrows connect each county’s 2012 position to its 2018 position, showing change over time. Built with D3 v5 and jQuery, the visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with interactive mouseover events that highlight counties and a dropdown menu to filter selections. Data is loaded from CSV files and rendered as SVG.

Loading thumbnail…

Fork of Temperature in San Fran Liniendiagramm

This visualization displays one week of diesel fuel prices from multiple San Francisco gas stations, plotting price against time with a smooth curved line using D3 v7. The chart shows diesel price fluctuations across hourly data points from January 1–2, 2021. It loads CSV data via `d3.csv`, parses dates and numeric values, and renders an SVG line chart with `scaleTime` and `scaleLinear` axes. The implementation uses `d3.line` with `curveBasis`, `axisBottom`, `axisLeft`, and includes axis labels and a title in German, with gridlines from tick marks.

Loading thumbnail…

Fork of Fork of Visualization of data using React

This example shows a pie chart rendered as an SVG, where each slice’s fill color is taken directly from a `hex` field in the loaded data. The chart uses React to manage the component state and lifecycle, while D3 v7’s `csv` loads the remote dataset, and the `arc` and `pie` generators compute the geometry. The data file, fetched from a GitHub gist, contains color values per row, and the visualization outputs a fixed set of slices regardless of row count. Only the SVG paths are drawn, with no labels or tooltips.

Loading thumbnail…

Fork of Visualization of data using React

This example visualizes data from a remote CSV file as a pie chart, with each slice colored using the `hex` value from the dataset. It uses React hooks (`useState`, `useEffect`) to load the data asynchronously via `d3.csv`, then renders SVG paths computed with `d3.pie` and `d3.arc`. The page also displays file size, row, and column counts by reading the CSV text in the `index.html` script. The chart updates once the data arrives.

Loading thumbnail…

Fork of Smiley Face Part I

A clown face built with React and D3 renders in SVG, featuring a yellow circular head with black outlines, pink blush ellipses, and a red nose. The code constructs arcs for the mouth and decorative cap paths using d3.arc, while circles and ellipses define the eyes, nose, and cheeks. The React component generates the SVG elements declaratively, with D3 providing geometric calculations for arcs and positions, creating a whimsical portrait with layered shapes and strokes.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face built with React and D3 v5, with customized facial features including eyes, eyebrows, a purple nose, hair, and a rotated mouth. The face is rendered as SVG, using D3’s `arc` generator to create the mouth and eyebrow shapes. Distinct arcs for the mouth and eyebrows are rotated and translated via SVG transforms, while the eyes and pupils are simple circles. The code uses React’s `ReactDOM.render` to mount the SVG, and D3 is imported via the `arc` function from the `d3` package.

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a static, cartoonish smiley face constructed from SVG primitives rendered through React’s `createElement` API. A large yellow circle forms the head, with smaller black circles for eyes and white highlights, thick black lines for eyebrows, and a black circle for a mouth. The code uses ReactDOM to mount the `App` component, which returns a single `<svg>` element with hard-coded coordinates and styling. The rendering approach relies entirely on SVG shapes, with no interactivity or data-driven behavior.