S

SreejaBellamkonda

@SreejaBellamkonda·32 public vizzes

Loading thumbnail…

Movie Review Sentiment Analysis

This example is a web app for analyzing the sentiment of movie reviews. Instead of a traditional visualization, it presents a simple text input form where users type a review and submit it for analysis. The application then displays a plain-text sentiment result, such as "positive" or "negative," beneath the form. Built with React and styled with CSS, it uses a JavaScript-based backend to process the submitted text, though the interface itself relies on standard HTML form elements and event handling rather than a charting library.

Loading thumbnail…

ICE - 8: Tree Map

This interactive tree map displays a family tree with three generations of the Rao family, where each node represents a person and links show parent-child relationships. The visualization uses D3.js layout and SVG rendering with animation, and supports click-to-expand/collapse functionality. Built with React, the tree layout is computed using `d3.layout.tree()`, while `d3.svg.diagonal()` draws the curved links. The animation transitions nodes into place with `transition().duration(750)`, adjusting positions smoothly as users toggle branches open and closed.

Loading thumbnail…

ICE-8 USA Country Map

This visualization presents a choropleth map of the United States, displaying state boundaries and interior divisions against a light blue landmass. The map is rendered as an SVG using React, with the D3.js geoAlbers projection and geoPath functions drawing the geographic shapes. Data is loaded via the us-atlas TopoJSON dataset, processed with the topojson feature and mesh APIs to create the state land and interiors. A graticule is also defined via geoGraticule, though its styling suggests a subtle visual grid.

Loading thumbnail…

ICE-8 World Map

This example presents a world map in an equirectangular-style view using the Natural Earth projection, with countries rendered as light green shapes against a blue ocean sphere. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them using TopoJSON’s `feature` method. It uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths, with the sphere background and country outlines styled through CSS classes.

Loading thumbnail…

ICE-8: Social Network

A small social network graph displays six named individuals connected by weighted links, with line thickness reflecting relationship strength. The visualization uses a force-directed layout created with the d3.layout.force API in d3.v4, rendering nodes as blue circles with labels in an SVG canvas. Data is loaded from a local JSON file containing node names, group assignments, and link weights. Node positions update dynamically through the force simulation’s tick handler, while drag behavior is enabled via force.drag.

Loading thumbnail…

Untitled

A force-directed network graph visualizes six nodes and five weighted links, with node size representing group membership and link thickness indicating connection strength. The graph uses D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position circles and lines in an SVG. Data loads asynchronously from a remote JSON file, and the `ticked` function updates node coordinates and link endpoints after each simulation iteration. The visualization renders as a simple, static SVG with no interaction.

Loading thumbnail…

Untitled

This example shows a force-directed network graph where nodes and links are positioned using D3’s physics simulation. The visualization uses `d3.forceSimulation` with link, charge, and center forces to arrange connected nodes, which are rendered as fixed-size circles and joined by gray lines. It loads JSON data from a remote GitHub repository and applies D3 v4, with the layout updating via the simulation’s `tick` event to adjust node coordinates. The design is minimal, with no interactive behavior.

Loading thumbnail…

Fork of Swedish map

This map visualizes Swedish counties, with each region filled in teal and interior borders highlighted in cyan. The data originates from a TopoJSON file of simplified Swedish county boundaries. Built with React and D3 v5, the visualization uses `geoMercator` projection and `geoPath` to render the geographic features and mesh outlines. The projection is fitted to the specified extent using `fitExtent`, and the map is drawn as SVG paths within a React component.

Loading thumbnail…

Fork of Forkcountry map

This example displays a world map with countries filled in light green against a blue sphere, using a natural Earth projection. It renders geographic features as SVG paths by loading world-atlas TopoJSON data and converting it to GeoJSON with topojson’s `feature` method. The map’s paths are generated with `d3.geoPath` and `geoNaturalEarth1`, while styling is applied through CSS classes for the sphere and country boundaries.

Loading thumbnail…

Forkcountry map

This forkcountry map displays world countries in light green on a blue sphere using a Natural Earth projection. The visualization renders geographic boundaries as SVG paths, with the sphere and country outlines drawn via the `d3.geoPath` API. Country data comes from the world-atlas TopoJSON file, processed through the TopoJSON `feature` function. The static map uses D3 v5 for SVG generation and styling.

Loading thumbnail…

Fork India map

This example displays a choropleth map of India, with each state filled by a categorical color scale and labeled with its name. Using D3 v5, the map is rendered as SVG paths generated by `d3.geoPath` with a `geoMercator` projection. The code loads TopoJSON data from the world-atlas package, specifically targeting the `india-districts-2019-734` object, and assigns colors via `scaleOrdinal` with `schemeCategory10`. State labels are positioned at each path’s centroid using `pathGenerator.centroid`.

Loading thumbnail…

Fork of Swedish map

This visualization displays the counties of Sweden as filled geographic regions, with interior borders highlighted in a contrasting color. The map is rendered using React and D3 v5, employing `d3.geoMercator` projection and `d3.geoPath` to draw features from TopoJSON data in the world-atlas dataset. The code applies `projection.fitExtent` to fit the map within the SVG canvas. The dataset source is the Data Canvas Sense Your City project, with geographic boundaries from the world-atlas countries-10m.json file.

Loading thumbnail…

Fork of ICE 7 Area Chart

A smoothed line and area chart visualizes supermarket sales in India over time, with the line marking yearly sales values and the orange area emphasizing the trend beneath the curve. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisBottom` and `axisLeft` for gridlines. Sales data is parsed from a CSV file, formatted as years via `d3.timeParse`, and styled with custom CSS for axis labels and chart elements.

Loading thumbnail…

Fork of Line Chart

This line chart displays US auto sales from 2005 to 2022, with years on the x-axis and sales figures on the y-axis. Using D3 v5, the code loads CSV data from a GitHub gist, parses the Year and Sales fields, and renders an SVG with d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line. Axes include tick marks, labels, and a title. The line path appears in red with a 4-pixel stroke, while grid lines and a rotated y-axis label enhance readability.

Loading thumbnail…

ICE 7 Pie chart

This pie chart visualizes the top 10 countries in the world by population in 2022, with each slice labeled with its population value in thousands and accompanied by a color-coded legend. The visualization uses d3.pie and d3.arc to compute and render the SVG segments, while d3.scaleOrdinal maps section colors to population values. Data is loaded asynchronously from a CSV file using d3.csv, and the chart is drawn on an SVG canvas with text labels positioned via arc centroid calculations.

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes CO2 emissions over time, with the x-axis representing total emissions and the y-axis showing years. The chart uses a maroon filled area with a smoothed curve to display the data trend. Built with React and D3 v5, the visualization employs d3.scaleLinear, d3.area with curveBasis, and d3.axisBottom/axisLeft, rendering as an SVG. Data is loaded from a CSV file using d3.csv, and the chart includes labeled axes and a title.

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes India’s population over time, using a smooth curve to show the trend and an orange filled region beneath it. The chart includes labeled axes for year and sales, with grid lines and a bold title. Built with D3 v5, it uses `d3.line`, `d3.area`, and `curveBasis` to generate the path, with `scaleTime` and `scaleLinear` mapping data to SVG coordinates. Population data is loaded from a CSV file and parsed with `d3.csv` and `d3.timeParse`.

Loading thumbnail…

ICE 7 Line chart

A line chart displays total car sales per year from 2013 to 2021, sourced from a CSV loaded via `d3.csv`. The SVG rendering uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` path generator to draw the trend. Axes are created with `d3.axisBottom` and `d3.axisLeft`, with gridlines and rotated axis labels. The chart highlights sales fluctuations over time in red.

Loading thumbnail…

ICE 7 Pie chart

A pie chart ranks the top 10 countries by air-pollution-related deaths in 2020, labeling each slice with its death count and placing a matching legend to the side. The chart uses the D3 `pie` layout with `arc` shapes, a categorical `scaleOrdinal` color scheme, and `format` for axis tick labels. Data is loaded via D3's `csv` parser, and the SVG is rendered with D3's selection and append methods.

Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the population of different countries using data loaded from a CSV file. The code renders SVG arcs with D3.js v3, using the `d3.layout.pie` and `d3.svg.arc` APIs to compute and draw each slice, with colors assigned via `d3.scale.category20`. A legend on the right lists each country name and its corresponding population value, while labels are placed at arc centroids using `arc.centroid`. The chart emphasizes the distribution of population across nations.

Loading thumbnail…

ICE 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and distinguishing species through different SVG symbols. It uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols for species markers, and d3.axisLeft/axisBottom for tick marks. The code loads CSV data via d3.csv and employs a reusable chart pattern with the scatterPlot function, rendering marks as generated path data through d3.symbol and d3.symbolGenerator.

Loading thumbnail…

Fork of Pie Chart

This visualization displays the top 10 countries in the world for 2022, showing each country’s population as a slice of a pie chart with a corresponding color-coded legend. The data is loaded from a CSV file hosted on GitHub Gist. The code uses d3.pie, d3.arc, d3.scaleOrdinal, and d3.format to compute the pie segments, assign colors, and format population values in thousands. It renders the chart and legend as SVG elements, with the pie centered on a 960×500 canvas.

Loading thumbnail…

ICE 7 PIE CHART

This pie chart visualizes the populations of the top 10 countries in 2022, with each slice labeled with its population value and accompanied by a color-coded legend. It uses D3 v5 APIs including `pie()`, `arc()`, `scaleOrdinal()`, and `format()` to generate the SVG paths, slice labels, and legend. The data is loaded asynchronously from a CSV via `d3.csv()`, and the chart is rendered with an inner radius of zero and an outer radius of 175 pixels, centered at (250,250) in an SVG canvas.

Loading thumbnail…

ICE 7 Pie chart

This pie chart displays the top 10 countries by deaths in 2020 attributed to air pollution, with each slice labeled in thousands and a corresponding legend. The data is loaded from a CSV file using `d3.csv`, and the pie layout is computed with `d3.pie`. Slices are drawn as SVG paths via `d3.arc`, with colors assigned by `d3.scaleOrdinal`. Text labels and legend entries are positioned using the arc centroid method, and numbers are formatted with `d3.format`. The chart is rendered entirely in SVG within a D3 v5 environment.

Loading thumbnail…

ICE 7 Pie chart

This pie chart displays 2022 US auto sales by brand, with each slice sized proportionally to year-to-date sales figures. The chart renders as an SVG with a legend showing brand names and sales totals formatted in thousands. The visualization loads data from a CSV file containing supermarket sales data, though the title references auto sales. Built with D3 v5, the code uses the `pie()` layout, `arc()` generator, and `scaleOrdinal()` for color mapping. Legends are manually positioned using SVG groups, with each entry containing a colored rectangle and text labels for brand and value.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying points that correspond to different flower measurements. The chart cycles through four attribute combinations every two seconds, alternating which flower features are mapped to the x-axis while keeping sepal length on the y-axis. Built with D3 v6, the visualization uses reusable chart functions, `scaleLinear` for axis scaling, and `setInterval` to drive the animation. SVG circles and axes render the data, sourced from a GitHub-hosted CSV file, with a custom font applied to all text elements.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, displays the Iris dataset, plotting petal width against sepal length as colored circles. The visualization cycles through four different numerical columns every two seconds, animating the scatter plot’s axes and points to show different feature relationships. The chart uses D3’s `scaleLinear` for scales, `axisLeft` and `axisBottom` for axes, and a custom `scatterPlot` module with a fluent interface for configuration. The rendered SVG updates via `setInterval`, with circles colored by iris species.

Loading thumbnail…

Creating a Scatter Plot with D3.js

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length and width to the x- and y-axes and coloring each point by species (setosa, versicolor, and virginica). It uses D3.js v6 with SVG rendering, loading data via `d3.csv`, scaling with `d3.scaleLinear`, and adding axes with `d3.axisLeft` and `d3.axisBottom`. The code also includes custom axis labels for sepal length and petal length.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This visualization shows the classic Iris dataset as a scatter plot, mapping petal length and width for three flower species colored blue, red, and black. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select`. It loads the dataset from a GitHub gist URL, parses numeric fields, and renders circles as SVG elements sized by sepal measurements. The axes display species separation, with circle positions computed via linear scales that map data values to pixel coordinates across the full window dimensions.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays supermarket sales data, showing the unit price for different product lines. Built with React and D3 v5, it renders as an SVG with vertical grid lines and horizontal bars. The visualization uses D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and loads data from a CSV file via `d3.csv`. React’s state management handles the asynchronous data loading and updates the chart accordingly.

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing CSV data from a remote URL using D3.js v7. It displays the dataset’s size in kilobytes, row count, and column count directly on the page, alongside a static traffic-related SVG image. The code uses `d3.csv()` to fetch and parse the data asynchronously, and also shows an alternative approach with `fetch()` and `d3.csvParse()`. Results are rendered into HTML `<pre>` elements, with the parsed data’s metadata logged to the console as well.

Loading thumbnail…

Sreeja Bellamkonda smile

A yellow smiley face is drawn within an SVG, centered on a blue circular face with a black outline. The composition includes two dark eyes and a curved mouth arc, all positioned relative to a central transform. The visualization is built with React, using D3’s `arc` API to generate the mouth path, while the face and eyes are simple SVG circles. The code runs in a minimal HTML page that loads React 17 and D3 7, rendering the graphic directly into the DOM.