sitaramchallapalli

@sitaramchallapalli·18 public vizzes

d3 x3dom demo

This demo shows a set of steel-blue 3D boxes arranged in a row, whose heights change every 2.5 seconds based on random data. Built with d3.js and x3dom, it uses D3’s data join and transition methods to update each box’s translation and scale attributes, while x3dom renders the WebGL scene. A viewpoint defines the camera angle, and the `setInterval` function triggers new random data generation for continuous animation.

Jul 6, 2022

Loading thumbnail…

Untitled

This example presents an interactive bar chart visualization built with D3 v2 and React, rendering as an SVG with animated transitions. It displays categorical data along the x-axis with corresponding numeric values on the y-axis, using a drop-shadow filter effect on the bars. The chart dynamically rescales its ordinal and linear scales based on the input data, with axis tick labels drawn from a caption mapping. The code leverages jQuery for DOM manipulation, D3’s `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` APIs, and applies a custom SVG filter for visual styling.

Jul 6, 2022

Loading thumbnail…

Untitled

This example shows the frequency of each letter in the English language as a bar chart, with orange bars that darken on hover. A tooltip appears on mouseover to display the precise frequency value. Built with D3 v3, it uses ordinal and linear scales, SVG axes, and the d3-tip plugin for tooltips. The data comes from a TSV file and is parsed with a custom type function.

Jul 6, 2022

Loading thumbnail…

Untitled

This example visualizes state population growth over time for California, Michigan, and Texas using three colored line charts plotted from 1910 to 2010. Each line is labeled with the state’s name and current population. Built with D3 v4 and React, it uses `d3.scaleLinear` for axes, `d3.line` for path generation, and `d3.json` to load data from a static JSON file. A tooltip, triggered by mouse movement over a transparent overlay rectangle, displays the population ranking for the nearest decade and draws a vertical reference line.

Jul 2, 2022

Loading thumbnail…

Fork of ICE 7 Saranya

This visualization shows car model sales data for a month in a donut chart. The chart displays sales totals for each car model as proportional arc segments, with labels and tooltips showing sales figures. Built using D3.js v2 and jQuery, the code loads data from a CSV file and uses `d3.layout.pie` and `d3.svg.arc` to generate the donut shape. Animated color fills and a clickable legend with rectangles and text labels enhance interactivity within a React framework, rendering as SVG.

Jul 2, 2022

Loading thumbnail…

Fork of Fork of Pie Chart

This example visualizes the protein content in a cereal dataset as a pie chart, with each slice representing a cereal name and its corresponding protein grams. Using the d3.pie arc generator, the chart is rendered as SVG paths, while a custom legend displays each cereal name and its value. The code loads data from a GitHub gist via d3.csv, applies a categorical color scale from d3.scaleOrdinal, and formats numbers with d3.format. The visualization is built with D3 v5, using SVG for rendering, and includes custom styling for legend text.

Jul 2, 2022

Loading thumbnail…

Untitled

This example shows a simple donut-style pie chart displaying five categorical items (A through E) with their corresponding counts. It uses the D3.js library to compute arc paths with the `d3.pie` and `d3.arc` functions, renders them as SVG paths, and colors each slice with `d3.scaleOrdinal`. Interactive tooltips appear on hover, displaying the item name and count. The chart is built as a React component, with D3 handling the SVG rendering and styling.

Jul 2, 2022

Loading thumbnail…

Fork of ICE-7 Languages In Pie Chart : Shreeti

A pie chart visualizes the proportional use of 22 major languages in India, with counts in millions. The D3.js visualization orders slices by value and displays a tooltip on hover showing the language name, its count, and calculated percentage of the total. Data is hardcoded in the `index.js` file, and the chart is rendered as a static SVG without animation. The code uses `d3.arc`, `d3.pie`, and `d3.scaleOrdinal` with a categorical color scheme, plus a custom legend built from the same color domain.

Jul 2, 2022

Loading thumbnail…

Fork of ICE-7 Languages In Pie Chart : Shreeti

This visualization shows the distribution of 22 languages spoken in India, with counts in millions, as a pie chart. It uses D3.js version 4.11 to create SVG arcs, with an ordinal color scale from `d3.schemeCategory20c`. Each slice displays a tooltip on hover, showing the language label, count in millions, and its percentage of the total. The chart includes an interactive legend that can be clicked to toggle slices on and off, re-animating the pie accordingly.

Jul 2, 2022

Loading thumbnail…

Fork of ICE-7 Languages In Pie Chart : Shreeti

This example visualizes language use in India as an interactive pie chart, with counts shown in millions. The chart uses a d3.pie layout and d3.arc to generate SVG paths, with a color scale from d3.schemeCategory20c. Hovering over a slice triggers a tooltip that displays the language label, count, and percentage, calculating the percentage based on enabled data entries. The dataset is loaded from an external CSV URL, and the rendering includes SVG elements with animation support for smooth transitions.

Jul 2, 2022

Loading thumbnail…

Fork of ICE 7 Saranya

This example visualizes aggregated sales data as an interactive donut chart, using a pie layout to segment totals across categories. The visualization is rendered in SVG with D3.js v2 within a React framework, employing `d3.layout.pie` and `d3.svg.arc` to compute arc paths. Hovering over or clicking legend items provides additional context through SVG titles. The data originates from an ICE7.csv file, and the chart includes value labels placed via `arc.centroid`. Color encoding uses an ordinal scale with a pre-defined color range, and the entire plot is animated and wrapped in a custom `TransformChartData` aggregation function.

Jul 2, 2022

Loading thumbnail…

Line chart ICE 7 Saranya

The line chart visualizes annual net forest conversion for seven South American countries, with each country’s trend line color-coded via a categorical scale. It uses D3 v5’s `d3.area` to render the paths, `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.nest` to group the data by entity from a CSV file. Hovering over a line displays a tooltip with the entity name, while the chart title and legend are drawn as SVG text elements.

Jul 2, 2022

Loading thumbnail…

Untitled

This example visualizes state population trends from 1910 to 2010 using colored lines for California, Michigan, and Texas. Hovering over the chart reveals a tooltip and a vertical line showing the exact population values for each state at that decade. The visualization is built with d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft, and uses d3.json to load data from a JSON file. It renders as SVG, with a custom tooltip div positioned via d3.event coordinates.

Jul 2, 2022

Loading thumbnail…

Untitled

This visualization displays the population growth of California, Michigan, and Texas from 1910 to 2010 using multi-line charts. Each state is represented by a colored line with a corresponding label at the right edge. Using d3.line, d3.scaleLinear, and d3.axisBottom/axisLeft, the SVG renders population trends. A mouseover tooltip reveals yearly totals and ranks states by population, with a vertical guide line using d3.mouse and d3.event. Data comes from the state-populations.json file.

Jul 2, 2022

Loading thumbnail…

Fork of Fork of area

This area chart visualizes car sales data over time, with a line overlay and interactive tooltip that displays the exact sales value for a given year upon mouse hover. The visualization uses D3 v6 to load CSV data, create time and linear scales, render axes with gridlines, and generate the area path with a basis curve. A tooltip with a circle indicator follows the mouse position to highlight data points, while a title and axis labels provide context for the chart's content.

Jul 2, 2022

Loading thumbnail…

Fork of Fork of Stock price display

This interactive line chart displays Apple stock prices over time, spanning from 1977 through 1982. The visualization uses a green-to-red vertical gradient to encode price levels, with higher values appearing greener and lower values redder. Users can hover over the chart to see a tooltip with the exact price at any date, indicated by a black circular marker that tracks the cursor along the line. The chart is built with D3.js v4 and React, reading data from a remote CSV file, and renders as an SVG with a bisector-based search to find the closest data point to the mouse position.

Jul 2, 2022

Loading thumbnail…

Untitled

This visualization displays the population of various states over time using an interactive line chart. The chart, rendered as an SVG with D3 v4, plots year on the x-axis and population on the y-axis. Hovering over the chart triggers a tooltip that ranks states by their population for that specific decade, with a vertical line marking the selected year. The code uses `d3.line`, `d3.axisBottom`, and `d3.axisLeft` to generate the chart, and it loads data from a CSV file hosted on GitHub Gist.

Jul 2, 2022

Loading thumbnail…

Fork of Area_Chart_facebook_users_anually

This visualization shows Facebook’s annual user growth from 2008 to 2017 as a combined line and area chart, with a curved trend line and a pink filled region beneath it. The SVG chart uses D3 v5’s `scaleLinear` and `scaleTime` for axes, `line()` and `area()` generators with `curveBasis` for smoothing, and `axisBottom`/`axisLeft` to render labeled tick marks. Data is loaded via `csv` from a remote GitHub gist, and axis labels are styled with custom CSS classes.

Jul 2, 2022