S

Samanvitha1

@Samanvitha1·27 public vizzes

Loading thumbnail…

Network graph of social connection

This example shows a network graph of social connections, with nodes representing characters from a fictional world and links indicating relationships between them. The graph uses D3’s force layout (d3.layout.force) to position nodes, which are rendered as purple circles with dark outlines and labeled with names. Links appear as black lines, and link thickness is set based on a numeric weight attribute when present. Users can click and drag nodes to rearrange the layout, which updates in real time. The visualization reads data from a local JSON file and renders entirely in SVG.

Loading thumbnail…

Tree Map

A Tree Map visualization displays a hierarchical dataset of names using an expandable and collapsible tree diagram. The code uses D3.js version 3.5.17 with the `d3.layout.tree` for layout and `d3.svg.diagonal` for drawing curved links between nodes. Nodes are rendered as purple circles with labels, and clicking a node toggles its children to show or hide them. The visualization animates with 750ms transitions, updating node positions and link paths smoothly as the tree structure changes.

Loading thumbnail…

Tree map

A hierarchical tree map visualizes a family tree of names, rendered as collapsible nodes linked by curved paths. Clicking a node toggles its children, with animated transitions using d3.layout.tree, d3.svg.diagonal, and SVG circle and text elements. The data is a hardcoded JavaScript array of nested objects. Node positions shift horizontally by depth, and all updates animate over 750 milliseconds using D3’s transition methods, with styling for links and node circles defined in CSS.

Loading thumbnail…

Country Map

This example displays the contiguous United States as a two-tone country map, with landmasses filled in brown and state boundaries drawn as yellow lines. It uses a React component that pulls geographic data from a US Atlas TopoJSON source, converts the topology into geographic features, and renders them with d3.geoPath using the geoAlbersUsaTerritories projection. The map is generated as an SVG, with loading state managed through React hooks and the d3.json data loader.

Loading thumbnail…

World map

A world map renders countries as pink shapes with a blue sphere background, using D3.js with the `geoNaturalEarth1` projection and `geoPath` to draw geographical boundaries. The visualization queries a SPARQL endpoint from the Network Digital Heritage data set, fetching one photograph per country along with its latitude and longitude. The code attempts to plot this location data as circles on the map, though the relevant plotting sections are commented out, leaving the map itself as the primary visible output.

Loading thumbnail…

ICE Bonus Scatter plot

This 3D scatter plot visualizes student performance by plotting English, Science, and History scores against Age and Maths grades. Three distinct marker styles represent each subject, allowing comparison of academic metrics across age groups. The visualization uses Plotly’s `scatter3d` type via the `Plotly.newPlot` API, with data loaded from a CSV file using D3 version 3’s `d3.csv` function. The code defines three traces with customized marker colors, sizes, and opacity levels to differentiate the subjects.

Loading thumbnail…

Sales of top 9 cars in USA,India and Germany

This example visualizes the sales of nine car brands across the United States, India, and Germany using a 3D column chart. The chart groups each country’s data into separate stacks, with the US showing values for Tesla, Ford, Bronco, Toyota, Safari, Jeep, and Kia, while India and Germany each contribute a single brand. Built with Highcharts and the highcharts-3d module, it applies a tilted perspective via the `options3d` settings and uses stacked, grouped columns with depth to distinguish categories. The y-axis measures sales in billions of USD, and the data is hardcoded within the series arrays.

Loading thumbnail…

ICE Bonus

This 3D scatter plot visualizes three axes labeled A, Z, and Y, with points rendered in an interactive plotly chart. The example demonstrates how to embed a Plotly visualization using the `plotly-2.9.0.min.js` CDN library alongside an older D3 version 3.5.17. While the HTML structure creates the chart container, the accompanying JavaScript file imports `select` from D3 version 7 to output text, showing a mixed-version workflow. The visualization itself relies on Plotly’s 3D rendering capabilities rather than custom D3 drawing.

Loading thumbnail…

Fork of Bonus ICE Saranya

This example presents a 3D bar chart comparing top car brand sales across the United States, India, and Germany, using Highcharts and the highcharts-3d module. The chart uses a column series with depth, stacking, and group Z padding to create a three-dimensional visual, with categories for brands like Tesla, Ford, and BMW on the x-axis and sales in billions of USD on the y-axis. Individual series map specific brands to each country, with sparse data points shown for India and Germany. The visualization is rendered inside a div container using jQuery to initialize the chart.

Loading thumbnail…

Fork of Bonus ICE Saranya

This example presents a 3D bar chart comparing top car brand sales across the United States, India, and Germany, using Highcharts and the highcharts-3d module. The chart uses a column series with depth, stacking, and group Z padding to create a three-dimensional visual, with categories for brands like Tesla, Ford, and BMW on the x-axis and sales in billions of USD on the y-axis. Individual series map specific brands to each country, with sparse data points shown for India and Germany. The visualization is rendered inside a div container using jQuery to initialize the chart.

Loading thumbnail…

Sales of top 10 cars

A 3D bar chart visualizes sales figures for ten car models across the USA, India, and the UK, with each country’s data in a separate stacked series. The chart uses Highcharts with the highcharts-3d module, applying a column series type, an isometric view with alpha and beta angles, and a depth setting for three-dimensional perspective. Data values for the USA include Tesla at 177 billion USD, while India and the UK have single entries. The code loads jQuery and Highcharts from CDNs, defining axes for car names and sales in billions of USD.

Loading thumbnail…

Fork of bonus ice

This fork of the "bonus ice" example displays a horizontal bar chart of population data for ten countries, drawn as SVG rectangles. The React app loads the data from a CSV, parses population values for 2020, and uses d3's `csv`, `scaleBand`, and `scaleLinear` to map countries and their populations to bar positions and lengths. A grid of x-axis ticks and country label texts supplement the bars. The visualization is rendered with React and D3 v4, using static SVG elements without animation.

Loading thumbnail…

Fork of NBA Player Scoring Efficiency Scatter Plot

This scatter plot visualizes NBA player scoring efficiency by plotting minutes played on the x-axis against points scored on the y-axis. Each circle represents a player, with darker colors indicating higher scoring efficiency, computed as points per minute multiplied by fifteen. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.scaleSequential with an interpolatePuRd color scale. Hovering over a dot reduces its opacity, while a title tooltip displays the player’s name and points. The chart renders as SVG, sized to the full window.

Loading thumbnail…

Fork of observer plot

This example displays the Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with each species colored distinctly via the stroke channel. Built with Observable Plot’s `plot` and `dot` marks, the visualization uses `d3.csv` and `d3.autoType` to load and parse the remote CSV file. The chart is rendered directly into the document body, sized to fill the entire browser window on load.

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes the monthly cost of mobile phone prices, with a smooth curve and gray-filled area beneath the line. Built with React and rendered as an SVG, it uses D3 v5 scales (`scaleTime`, `scaleLinear`) and axis generators (`axisBottom`, `axisLeft`) to plot data from a CSV file, with grid lines and labeled axes for month and cost. The chart applies `curveBasis` to both `line` and `area` generators for a polished, flowing appearance.

Loading thumbnail…

ICE-7 Line Chart

This interactive D3.js line chart visualizes domestic car sales in India from 2009 to 2019, plotting annual sales figures against a date-based x-axis. The visualization uses D3's scaleTime and scaleLinear for axes, axisBottom and axisLeft for tick generation, and the line generator to create the path. The chart imports data from a CSV via d3.csv, applies the d3.timeParse function to convert year strings, and renders to an SVG using a custom stylesheet. Red hues emphasize both the line and axis labels.

Loading thumbnail…

ICE-7 PIE CHART

This pie chart displays the top 10 countries by deaths from air pollution in 2020, with each slice labeled with the death count in thousands and a corresponding legend listing country names and values. The visualization uses d3.pie and d3.arc to generate segments, d3.scaleOrdinal for color assignment, and d3.csv to load the dataset from a GitHub gist. Text labels are positioned using arc centroid calculations, and the legend is built manually with SVG rect and text elements.

Loading thumbnail…

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

This bar chart displays COVID-19 case counts for the top 20 countries, ranked by their reported infections on January 28, 2020. Using React with D3 v5, the visualization renders SVG rectangles scaled by population data from a CSV file, with D3’s `scaleBand` and `scaleLinear` mapping country names and case values. Axis ticks and labels are generated manually via `.map()` and React elements, while the data is loaded asynchronously with `d3.csv`. The chart shows a horizontal bar layout with green rectangles and red gridlines, highlighting comparative case volumes across countries at that early pandemic date.

Loading thumbnail…

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

This bar chart visualizes COVID-19 cases across the top 20 countries, using horizontal bars to compare case counts. The visualization is built with React and D3 v5, where React manages state and renders SVG elements while D3 scales handle data mapping. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.csv` to load the dataset from a GitHub gist. Tick marks and axis labels are generated manually through React's array mapping rather than using D3's axis components.

Loading thumbnail…

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

This bar chart visualizes COVID-19 cases across the top 20 countries, using horizontal bars to compare case counts. The visualization is built with React and D3 v5, where React manages state and renders SVG elements while D3 scales handle data mapping. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.csv` to load the dataset from a GitHub gist. Tick marks and axis labels are generated manually through React's array mapping rather than using D3's axis components.

Loading thumbnail…

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

This example shows a horizontal bar chart of COVID-19 case counts for 20 countries, using length as a visual channel to encode the number of reported cases on a given date. The chart is built with React components that render SVG elements, while D3’s `d3.csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. Axes are manually constructed by mapping tick values to SVG lines and text labels. The data comes from a remote CSV file containing daily case numbers per country.

Loading thumbnail…

observer plot

This example uses Observable Plot to create a scatterplot of iris flower measurements, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species. The dataset is loaded as CSV via `d3.csv` and `autoType`, then rendered using the `plot` and `dot` functions from the Plot library. The visualization fills the entire browser window by setting the width and height to `window.innerWidth` and `window.innerHeight`. The chart is appended directly to the document body, demonstrating a minimal integration of Plot with vanilla HTML and D3 v7.

Loading thumbnail…

Bar Graph using D3.js

This bar graph displays the final exam marks of students, with each student’s name on the x-axis and their corresponding marks on the y-axis. The visualization loads data from a CSV file using `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` to map the data to SVG rectangles. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart is annotated with a title and axis labels. The code employs D3 v7 in a plain HTML page with an SVG container.

Loading thumbnail…

Climate change

This visualization displays the distribution of global land temperatures using a horizontal bar chart built with the p5.js library. The chart groups temperature readings from the GlobalLandTemperaturesByCountry dataset into buckets, showing the frequency of data points across temperature ranges. Each bar’s length represents the count of readings in that bucket, while the y-axis labels the temperature spans in Celsius. The code processes the CSV data in `preload()` and `preprocess()`, then renders the chart with p5.js drawing functions like `rect()` and `line()`.

Loading thumbnail…

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

This example demonstrates loading and parsing external CSV data with D3.js, showing basic statistics about the dataset—its size in kilobytes, row count, and column count—displayed as text on a styled web page. The visualization fetches CSV data from a GitHub gist using `d3.csv()`, processes the response with `d3.csvFormat()` to measure data size, and writes results to a `<pre>` element via the DOM API. The page also includes a static SVG image and custom CSS styling for layout and typography.

Loading thumbnail…

Fork of homework smiley face

This visualization presents a stylized smiley face rendered as an SVG graphic using React and D3.js. The face is composed of geometric primitives including circles for the head, eyes, and pupils, an elliptical nose, and multiple lines forming the mouth and hair-like details, all drawn within a single SVG canvas. The code uses React's declarative component structure to define the scene and D3's `arc` function to generate the smile path. The face is constructed with hard-coded coordinates, layering orange, brown, black, and green elements on a white background.

Loading thumbnail…

Fork of Tweak a Face Assignment by Enze Liu

This visualization draws a stylized panda face constructed from basic geometric shapes, including circles for the head and blush, ellipses for the eye sockets, and arcs for the eyes, nose, mouth, and ears. The face is centered within an SVG canvas using React and D3.js. The code leverages the `d3.arc()` API to generate the curved paths for the facial features, while `ReactDOM.render()` displays the final composition. The project imports React, ReactDOM, and the `arc` function from D3, and uses SVG elements like `<path>` and `<ellipse>` for rendering.