Vinay Vemuri

@vinayvemuri09·33 public vizzes

Crime Data Analysis - Top 10 Crime Status

This pie chart displays the top 10 crime statuses from a CSV dataset, showing their relative proportions with labels that include percentages. The chart is built using D3.js v7, which loads the data via `d3.csv`, counts occurrences of each status, sorts them, and slices the top 10. `d3.pie` generates the arc data, while `d3.arc` creates the SVG paths and labels. A `d3.scaleOrdinal` with the `schemeCategory10` palette assigns colors to each slice.

Jul 27, 2023

Loading thumbnail…

Crime Data Analysis - Crime Spots

This visualization displays crime incident locations across a geographic area as individual map markers, with popups revealing details about crime type, weapon used, and date. The map is built using Leaflet with OpenStreetMap base tiles, centered on New York City at coordinates 40.7128, -74.0060. Crime data is loaded from an external CSV file via d3.csv, and each row’s latitude and longitude values are parsed to create markers using L.marker. The popup content is constructed with HTML strings embedding the crime attributes. The visualization provides an immediate spatial overview of crime distribution across the region.

Jul 27, 2023

Loading thumbnail…

Crime Data Analysis - Top 15 Most Commonly Used Weapons

This chart displays the 15 most frequently used weapons in a crime dataset as a horizontal bar chart. Longer bars indicate higher weapon usage counts, with each bar labeled by weapon name and its total count. The visualization is built with D3.js version 7, loading CSV data from a GitHub Gist. The code counts weapon occurrences, sorts them, and renders the top 15 using SVG rectangles, with d3.scaleBand and d3.scaleLinear defining the axes.

Jul 27, 2023

Loading thumbnail…

Crime Data Analysis - Location type

This example visualizes crime incidents by location type, with each slice of the pie chart representing a category such as a street, residence, or business. The data is loaded from a CSV file hosted on GitHub Gist using d3.csv, and the pie layout (d3.pie) calculates the arc segments. The SVG rendering applies a categorical color scale (d3.scaleOrdinal with d3.schemeSet2) and labels each slice with its location type and count, while title text appears above the chart.

Jul 27, 2023

Loading thumbnail…

Crime Data - Crime Type Occurence Analysis

This bar chart displays the number of occurrences for each crime type in a dataset, with rotated labels along the x-axis to accommodate longer category names. The visualization uses D3.js v7 to load a CSV file via `d3.csv`, aggregate counts with JavaScript objects, and render the chart as SVG. It employs `d3.scaleBand` and `d3.scaleLinear` for positioning, along with `d3.axisBottom` and `d3.axisLeft` to generate axes. The chart includes a title and axis labels, showing that theft or similar categories likely dominate the distribution.

Jul 27, 2023

Loading thumbnail…

Your Website

This example demonstrates a basic multi-page website structure with a navigation bar, homepage content, and interactive button functionality. The page uses plain HTML with linked CSS styling and a JavaScript script. The CSS defines a dark navigation bar with hover effects and page typography, while the JavaScript uses the `querySelector` and `addEventListener` APIs to trigger an alert dialog when a button is clicked. The data is static HTML content, with no external libraries or data sources referenced.

Jul 24, 2023

Loading thumbnail…

Network Graph

This social network graph visualizes a small group of people as nodes with green circles and blue, arrow-tipped links representing friendships. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`, while nodes are draggable via `d3.drag`. Friend connection strength is encoded by line thickness, based on the `value` field in the loaded `graph.json`. Hovering a node highlights it via CSS class changes, and all elements are rendered as SVG.

Jul 23, 2023

Loading thumbnail…

MuscleCars tree

A hierarchical tree visualization maps muscle car models to their manufacturers, showing Ford and Dodge as parent nodes with models like Mustang, Torino, Charger, and Challenger nested beneath, including sub-models like Hellcat and SRT. The d3.v3 layout computes node positions, while SVG and animation handle the rendering. Color-coded node types (gray, blue, red, orange) reflect the hierarchy, and interactive behaviors include click-to-expand or collapse, zoom via d3.behavior.zoom, and tooltips. The data comes from a static JSON file defining the tree structure.

Jul 23, 2023

Loading thumbnail…

Activity 8 Country

This visualization shows a map of India rendered as an SVG path, with the country outlined and filled using geographic projection. The example loads world country boundaries from the world-atlas TopoJSON dataset, extracts the India geometry, and applies a Mercator projection fitted to the map’s dimensions. Using d3.geoPath with the projection, it draws the country shape onto a 960-by-500-pixel SVG canvas. The code leverages d3.json for data loading and topojson-client to convert TopoJSON into GeoJSON, demonstrating a minimal setup for choropleth or boundary-focused mapping.

Jul 23, 2023

Loading thumbnail…

Activity 8 Map

This interactive world map displays countries as light green regions with indigo borders on a sky-blue sphere, and highlights each country in maroon when hovered. The visualization uses D3.js v5 with the `geoEquirectangular` projection and `geoPath` to render geographic features, while the TopoJSON `feature` function converts country data from the world-atlas JSON source. Pan and zoom interactions are enabled through D3’s `zoom` event handler, which applies a transform to the SVG element.

Jul 23, 2023

Loading thumbnail…

Area Chart Activity 8-4

This area chart visualizes the cost of sales from 2000 to 2013 using D3 v5. The SVG rendering displays a smoothed line over a light-green area, with red tick labels and an orange axis label. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, `d3.area`, and `d3.curveBasis` to generate the chart. Data is loaded from a CSV file via `d3.csv`, with the year parsed as a date and cost as a number.

Jul 23, 2023

Loading thumbnail…

linechart -Activity-8-3

This line chart visualizes the cost of sales from 2000 to 2013, using a light green stroke and red axis labels. The SVG is created with D3 v7, using `scaleBand` for the year axis and `scaleLinear` for cost, with data loaded from a local `data.csv` file. The chart includes labeled axes for "Year" and "cost," and the line path is drawn with `d3.line` and a bandwidth offset.

Jul 23, 2023

Loading thumbnail…

Pie Chart - Actvity-8-2

A pie chart shows the distribution of students across academic majors at UNT, with each slice labeled with a count in thousands and a color-coded legend displaying major names and values. The visualization loads data from a CSV file hosted on GitHub, uses D3 v5 to fetch and parse the data, and renders the chart as SVG. It applies D3’s `pie` and `arc` generators to compute slice geometry, `scaleOrdinal` for categorical colors, and custom text and legend elements to annotate the graph.

Jul 23, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, cycling through four feature combinations on the x-axis every few seconds via setInterval. The visualization uses D3 v6 modules including csv, select, scaleLinear, extent, axisLeft, and axisBottom to render SVG circles colored by species—skyblue for setosa, lightgreen for versicolor, and orange for virginica. A legend and axis labels update dynamically, while the reusable scatterPlot ES6 module encapsulates the chart configuration.

Jul 23, 2023

Loading thumbnail…

Activity 7 - Task 1

This visualization shows a horizontal bar chart comparing the populations of ten countries in 2010, using green bars sorted by country name on the y-axis. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for bars. CSV data is loaded via `useData` with `d3.csv`, while custom `AxisBottom` and `AxisLeft` components render ticks and labels. Population values are formatted with `d3.format` and tooltips appear on hover via SVG `title` elements.

Jul 23, 2023

Loading thumbnail…

Bubble chart - Activity-7-5

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across car makes, using circle size for MPG and color for car brand. It is built with D3 v7, rendering SVG elements with interactive hover tooltips that display the car make. The chart includes a legend for bubble size and color, and reads data from a CSV file.

Jul 23, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape - Activity7-4

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length for three iris species. Each species is represented by a distinct geometric shape, with a legend positioned on the right identifying the corresponding labels. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal with d3.symbolsFill for shape encoding, and d3.symbol to generate the SVG path marks. Data is loaded via CSV parsing and rendered using the d3.v7 library's selection and join methods.

Jul 23, 2023

Loading thumbnail…

Activity 7 Scatter Plot - 3

This scatter plot visualizes the Iris dataset, showing petal length against petal width, with each point colored by species (setosa, versicolor, or virginica) using a simple switch-based color mapping. The visualization loads data from a remote CSV file via `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG elements using `d3.select` and data joins. Axis labels are added with rotating text, and the layout adapts to the window size using `window.innerWidth` and `innerHeight`.

Jul 23, 2023

Loading thumbnail…

IMDb Movie ratings - Activity 7-2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar segmented into five rating categories from “below 5.0” to “above 8.5” as proportions summing to 100%. The visualization uses d3.stack() to compute the stacked segments and d3.scaleOrdinal for color encoding, rendered as SVG rectangles. Hovering over any segment triggers a tooltip displaying the exact percentage for that rating level within the genre. The data comes from a local CSV file structured with genre names and rating proportion columns.

Jul 23, 2023

Loading thumbnail…

Social Network Graph with d3.js

This example displays a small social network of five people—John, Alice, Bob, Emily, and Michael—as a node-link diagram rendered in SVG. The graph shows connections between individuals as green links, with each person represented by a large light-green circle and a text label. The layout is computed using d3.forceSimulation with link, charge, collision, and centering forces, while d3.drag enables interactive repositioning of nodes. Hovering over a node triggers a class change to color it steelblue.

Jul 23, 2023

Loading thumbnail…

Tree Visualization with D3.js

This visualization presents a hierarchical tree of fruit categories, using circles to represent nodes and curved horizontal links to show parent-child relationships. It loads D3 v7 via UNPKG and builds the layout with `d3.tree()` on a `d3.hierarchy` data structure. The SVG renders colored node circles based on fruit-specific color data, while labels position differently for internal nodes versus leaves. The code uses `d3.linkHorizontal()` to generate paths and dynamically adjusts the SVG height from the computed tree extent.

Jul 23, 2023

Loading thumbnail…

USA state Map

A choropleth map of the United States colors states based on a numeric value from a CSV file, with a linear color scale mapping low values to light red and high values to dark red. The map is rendered as SVG using D3 v6 and topojson, with the `d3.geoPath` generator drawing state boundaries and `d3.scaleLinear` adjusting fill colors. States without matching data appear blue. The CSV is loaded via `d3.csv`, and state boundaries come from the us-10m.v1.json TopoJSON file.

Jul 23, 2023

Loading thumbnail…

World Map Visualization

A choropleth world map colors countries according to population values loaded from a CSV file. The visualization uses d3.geoNaturalEarth1 for the map projection and d3.geoPath to render GeoJSON country boundaries. A d3.scaleQuantize with a d3.schemeBlues color range maps numeric population data to fill colors, while countries without matching data appear green. The example demonstrates loading external GeoJSON from a GitHub repository and joining CSV data to map features.

Jul 23, 2023

Loading thumbnail…

Reusable Scatter Plot with d3.js

This example creates a reusable scatter plot of sample car data, showing each vehicle’s horsepower against its miles per gallon via colored SVG circles. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines, and d3.selectAll with data binding to append circles. A color map assigns distinct hues per car make, and each circle includes a title element for hover tooltips. The chart is generated by a configurable createScatterPlot function that accepts container, dimensions, and data keys as options.

Jul 23, 2023

Loading thumbnail…

Marketing Data Bubble Chart

This D3.js v7 bubble chart visualizes marketing campaign performance by plotting clicks on the x-axis and conversions on the y-axis, with each circle’s radius scaled to its budget. The SVG output uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring, and a static legend listing each campaign. The chart renders a hardcoded array of ten campaigns, encoding three numeric variables through position and area.

Jul 23, 2023

Loading thumbnail…

Car Sales Scatter Plot

A scatter plot displays the relationship between units sold and revenue for eight car brands, with each point colored uniquely. The visualization uses Chart.js on a canvas element to render the data, mapping units sold to the x-axis and revenue to the y-axis. Hovering over a point triggers a tooltip showing the brand name and revenue, while the chart includes labeled axes and a title. The data is embedded directly in the script as an array of objects.

Jul 23, 2023

Loading thumbnail…

Pollution ratings in different parts of City

This stacked bar chart shows pollution rating distributions across six Texas cities, with each bar segmented into five pH-level categories from below 5.0 to above 8.5. The visualization uses d3.stack() to compute the stacked series, d3.scaleOrdinal with a categorical color palette for the rating bands, and d3.scaleBand for the city axis. Hover interactions on individual rectangles trigger a custom tooltip displaying the exact percentage for that rating category, while the legend identifies each segment’s color. Data is loaded from a CSV file using d3.csv, and the chart is rendered as SVG with margins, axes, and labels configured through D3 selection methods.

Jul 22, 2023

Loading thumbnail…

Bar Chart

This horizontal bar chart ranks the top 10 countries by diabetes cases, using a green bar length to encode the numeric value from a local CSV file. The chart applies a linear scale for case counts and a band scale for country names, with axes labeled accordingly. Built with D3 v5, the code loads data via `d3.csv`, sorts and slices it, and renders SVG rectangles using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`.

Jul 22, 2023

Loading thumbnail…

Assignment - 1

This example displays the first ten rows of Dallas Police Incident Data in a raw JSON format, loaded from a gist-hosted CSV file using D3’s `csv` method. The page renders the data into two HTML `<pre>` elements, with the first labeled “First 10 rows” and the second showing the stringified JSON. The background is styled with CSS, and an SVG element embeds a background image via a data URI pattern. The code relies on D3 v5’s `select`, `csv`, and `csvFormat` utilities to fetch and display the data.

Jul 1, 2023

Loading thumbnail…

BMI by Age

This visualization displays the average Body Mass Index (BMI) across different ages using a binning approach. The chart uses orange bars with white strokes to represent binned age groups, with the y-axis showing BMI values and the x-axis showing age. The code leverages d3.bin, d3.scaleLinear, d3.scaleTime, d3.axisBottom, and d3.axisLeft APIs from D3 v7 to process and render the data. The visualization imports data from a CSV file hosted on GitHub and computes BMI values using the formula (weight/height²) × 703. The SVG rendering includes custom axes with tick styling and labeled text elements for the chart title and axis descriptions.

Jun 26, 2023

Loading thumbnail…

Transforming Data

This visualization demonstrates data transformation by loading the Iris flower dataset from a CSV file and computing the average sepal length for each species. The code uses D3 v7’s `csvParse` to import raw comma-separated values, then parses numeric fields with unary plus operators. It applies `flatRollup` and `sum` from D3 to group the data by species and calculate the mean aggregate. The resulting summary is rendered as a JSON string inside a `<pre>` element, showing the pipeline from raw data to structured analysis. The example fetches the CSV asynchronously using browser `fetch` and the Promise API.

Jun 26, 2023

Loading thumbnail…

Activity 6

This example fetches tabular data from a remote CSV file and displays the first ten rows as JSON in a black, aqua-colored `<pre>` block. It uses D3 v5’s `csv` method to load the dataset and `csvFormat` to calculate file size, though the size calculation is not rendered. The page renders as static SVG and WebGL elements, with a background image embedded in the HTML, but the primary interaction is the simple text preview of the loaded data.

Jun 26, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

The visualization displays a dense, multi-layered cluster of overlapping, colored polygons rendered atop a detailed Buddha path. The polygons are generated procedurally through triple-nested loops in React, with each vertex position, fill color, and rotation angle determined by random number and arithmetic functions. The image is rendered as an SVG within a React application, using `ReactDOM` to mount the component. The underlying Buddha figure is a complex SVG path element, scaled and translated to sit beneath the chaotic polygon layer, creating a vibrant, abstract composition against a green background.

Jun 12, 2023