Skip to main content
Log in
S

Shreeti Upreti

@Shreets·16 public vizzes

Loading thumbnail…

ICE 8 : D3 World map

An interactive D3 world map plots up to 1,500 museum object locations as animated circles. The map uses a Natural Earth projection via `geoNaturalEarth1` and renders country boundaries with `geoPath` from TopoJSON data. Circle positions come from a SPARQL query against the Network of Digital Heritage API, with latitude and longitude mapped through the projection. Each point appears sequentially with a bouncing `transition` effect, styled as white circles over goldenrod countries on a black sphere.

Jul 8, 2022
Loading thumbnail…

Social Network graph

This interactive social network graph shows nine named people (e.g., Aron, James, Harry) as green circles connected by lines, with link thickness proportional to a numeric weight. Nodes are draggable, and hovering over a circle reveals a pink tooltip displaying the person’s name. The visualization is rendered with D3 v4’s `d3.layout.force` simulation using gravity, distance, and charge parameters, with SVG elements for nodes and links. Data is loaded from an external `graph.json` file, which defines nodes by group and links with source/target indices plus weights. CSS styles link lines black and circles light green with an animated tick update.

Jul 8, 2022
Loading thumbnail…

ICE8 : Tree Demo

This example shows an organization hierarchy using a D3 tree layout, with nodes representing job titles and edges as diagonal links. The static tree renders on an SVG canvas, with color-coded circles distinguishing managers (red), staff (green), and interns (blue). The code uses `d3.layout.tree`, `d3.svg.diagonal`, and simple transitions to show a tooltip displaying each person’s name on mouse hover, driven by inline JSON data. The visualization uses d3.v2 within a React framework for display.

Jul 8, 2022
Loading thumbnail…

ICE 8 : Country map -India

The map displays India’s states and districts, colored by state via a categorical scale, with zoom and pan support. It loads TopoJSON data for both administrative levels and renders them as SVG paths using `d3.geoPath` and `geoMercator`. Hovering over a district reveals a tooltip with its name and state. The code uses D3 v5, `topojson.feature`, and `d3.zoom` to enable interaction.

Jul 7, 2022
Loading thumbnail…

BONUS ICE1 - 3D Bar Chart for Total Profit with Sales-Profit and Quadrant of Sub-Category Product

This 3D bar chart displays total profit across 17 product sub-categories, categorized into four quadrants based on sales and profit levels. The visualization uses Highcharts with the highcharts-3d module, enabling a column chart with 3D depth and rotation angles. The data series are stacked with distinct groupings, showing product categories like Phones as having both high sales and high profit. The chart’s interactivity and visual depth are rendered client-side using JavaScript and jQuery to initialize the chart within an HTML container.

Jul 6, 2022
Loading thumbnail…

BONUS 1: 3D Scatter Plot

This 3D scatter plot visualizes body mass index data, mapping height, weight, and body fat percentage onto the x, y, and z axes. Each pink marker represents an individual data point from a CSV file loaded via D3.js. The visualization uses the Plotly.js `scatter3d` trace type, with axes titles and styling configured in the layout object. The chart is rendered into a div element using the `Plotly.newPlot` method.

Jul 6, 2022
Loading thumbnail…

ICE-7 London Air Scatter Plot Background vs Roadside

This visualization presents a scatter plot of London air quality measurements, comparing roadside versus background monitoring stations across time. Users can select different pollutants via a dropdown menu, while color encodes month and stroke distinguishes station type. The visualization includes interactive legends that filter data points by month or station type, with animated transitions updating circle positions. The code utilizes D3 v5 modules including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `interpolateBuPu` for color encoding, with data loaded from a CSV file using `d3.csv`.

Jul 2, 2022
Loading thumbnail…

ICE-7 Area chart : Shreeti Upreti

This stacked area chart visualizes sea turtle population trends for three species—Green, Loggerhead, and Hawksbill—from 1910 to 1990, using data loaded from a CSV file. It shows a dramatic decline in all populations over the century, with each species represented by a distinct color from the d3.schemeDark2 ordinal scale. The visualization uses d3.stack with ascending order, d3.area with a curveBasis interpolation, and d3.scaleTime for the temporal x-axis. Interactive hover reveals species names via SVG title tooltips, while d3.areaLabel positions labels along the stacked areas.

Jul 2, 2022
Loading thumbnail…

ICE-7 Abortion Rates US States : Shreeti Upreti

This visualization displays abortion rates for U.S. states over time, with each state represented by a colored line connecting data points. Hovering over a black dot reveals a tooltip with the exact year, state, and rate. Built with React, it uses d3.scaleLinear for axes, d3.scaleOrdinal for color assignment, and d3.legendColor for the legend. Data is loaded from a CSV file via d3.csv, and the SVG rendering includes animated transitions for the tooltip’s opacity.

Jul 2, 2022
Loading thumbnail…

ICE-7 Languages In Pie Chart : Shreeti

This interactive pie chart visualizes the millions of speakers for 22 languages in India, with Hindi dominating at 300 million. The D3.js visualization uses an ordinal color scale and a legend with toggleable entries; clicking a legend item disables that segment, recalculating the displayed percentages for the remaining languages. Hovering over a slice reveals a tooltip showing the language name, speaker count in millions, and its percentage of the total. The visualization is rendered with SVG and includes a smooth animation transition as data updates.

Jul 2, 2022
Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through the numeric columns of the Iris dataset, plotting each feature against the last one. The visualization uses D3.js’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `transition` animates the circles as the x-axis changes every three seconds. The code also implements reusable chart components with getter and setter methods, and includes axis titles that animate in and out.

Jun 29, 2022
Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through the numeric columns of the Iris dataset, plotting each feature against the last one. The visualization uses D3.js’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `transition` animates the circles as the x-axis changes every three seconds. The code also implements reusable chart components with getter and setter methods, and includes axis titles that animate in and out.

Jun 29, 2022
Loading thumbnail…

ICE 6: Bar chart showing salary based on experiences

This bar chart visualizes the relationship between years of experience and annual salary, with each bar's height representing salary and its color intensity mapped from a green color scale. The visualization uses D3 v7 to render SVG elements, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleQuantize` with ColorBrewer's Greens palette for encoding salary values. Data is loaded asynchronously from a CSV file via `d3.csv`, and a color legend is generated using the d3-legend library.

Jun 25, 2022
Loading thumbnail…

ICE 6: Scatter Plot Showing Life expectancy vs Happiness Score Scatter Plot

This scatter plot visualizes the relationship between life expectancy and happiness score for countries in the 2017 World Happiness Report, with each semi-transparent purple circle representing a country. The code uses D3 v5’s `csv` loader to fetch the dataset and `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to map the values and render axes with gridlines. The SVG rendering includes labeled axes and a title, while CSS controls circle opacity and text styling.

Jun 25, 2022
Loading thumbnail…

ICE 5:Loading and Parsing csv data with D3.js

This example visualizes university student retention data by displaying a large, green decorative SVG emblem of a university logo at the center of the page. The code loads and parses external CSV data using D3.js version 5's `d3.csv` function, though the parsed data is not directly rendered in the visualization. The page uses standard HTML and CSS for layout, with the SVG graphic embedded directly in the markup and styled with margin properties to position it. The static SVG paths are pre-rendered from Adobe Illustrator, and the example focuses on demonstrating the data-loading workflow within a React-compatible setup.

Jun 22, 2022
Loading thumbnail…

new face

A stylized yellow face rendered in SVG with D3 v5 appears centered on a dark background. The face is composed of geometric primitives: a large circle for the head, circles for eyes and nose, an arc-generated path for the mouth, and rects forming the hair. Animated transitions move the eyebrows upward and back down over two seconds each, creating a dynamic expression. The code uses D3's selection and transition methods, along with the `arc` generator, to build and animate the scene within a React framework.

Jun 17, 2022