S

Sharanya1307

@Sharanya1307·25 public vizzes

Loading thumbnail…

Animal Kingdom ICE-8

This interactive tree diagram maps the hierarchical classification of the Animal Kingdom, branching from a root node into Vertebrates and Invertebrates, with further subdivisions like Warm/Cold Blooded and phyla such as Arthropoda. Implemented with the D3.js library, the visualization uses the `d3.layout.tree` and `svg.diagonal` functions to render nodes and curved links. Users can click any node to collapse or expand its children, triggering animated transitions via `transition` and `duration`. The SVG rendering features green leaf nodes, red links, and an aqua background, with data hard-coded as a JavaScript object.

Loading thumbnail…

world map projection

This example displays a world map with country boundaries, graticules, and interior borders rendered as SVG paths. The map uses a Natural Earth projection via `d3.geoNaturalEarth1` and draws geographic features with `d3.geoPath`. Data comes from the World Atlas TopoJSON, processed through `feature` and `mesh` from the TopoJSON library. React manages the component structure, while CSS styling defines the land, sphere, graticule, and interior stroke colors.

Loading thumbnail…

Australia

This visualization displays the electoral regions of Australia, with each region filled by a distinct color from a categorical palette and labeled with its name. Built with D3.js (v5) and the topojson library, it reads geographic data from a local JSON Topology file. The map uses the Mercator projection with custom translation and scaling to position the country. SVG paths are generated with `d3.geoPath` and the `feature` function from topojson extracts the region boundaries for rendering.

Loading thumbnail…

Network Graph ICE-8

This network graph visualizes friendship connections among ten people, with nodes representing individuals and directed links showing relationships between them. The graph uses d3.forceSimulation with link, charge, collision, and center forces to position nodes. Dragging is supported through d3.drag. The data, loaded via d3.json, includes node groups and relationship types. All nodes are yellow circles with blue borders, and links display arrow markers. Hovering highlights a node by changing its stroke width. The visualization is rendered as SVG (1100x370) using D3 v6.

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This example displays a small social network of nine people, with nodes connected by weighted links. It uses D3.js v4’s `d3.layout.force` to simulate the graph layout, rendering nodes as blue circles with red text labels and links as black lines whose stroke-width reflects the weight from the JSON data. The visualization is drawn as an SVG, and nodes are draggable via the force drag behavior, with positions updating on each tick event.

Loading thumbnail…

Fork of Family Tree ICE-8

This interactive tree visualization displays hierarchical relationships among animal groups, using colored, rectangular nodes linked by directional arrows. The diagram organizes data from a JSON file into a branching structure rooted at "Animals," with categories like Vertebrates and Invertebrates. Rendered as an SVG using D3.js version 3, the visualization applies a tree layout and supports user interaction through zooming and dragging. The code uses `d3.layout.tree` to compute node positioning, and animates nodes with transitions, highlighting links and tooltips on hover.

Loading thumbnail…

3D Scatter Plot Sharanya Javvaji

This 3D scatter plot visualizes the penguin dataset, showing the relationship between Flipper Length, Body Mass, and two different culmen measurements as separate series. The plot uses Plotly’s `scatter3d` trace type to render markers with varying opacity and size, with the chart embedded in a simple HTML page. The code loads data via `d3.csv` from a raw GitHub URL, then constructs traces and a layout with zero margins, finally calling `Plotly.newPlot` to display the interactive 3D visualization.

Loading thumbnail…

Bonus ICE - 3D Bar Chart Sharanya Javvaji

A 3D bar chart visualizes sales for seven car manufacturers from 2015 to 2022. Each column is a manufacturer, with eight stacked segments per column representing annual sales; the chart’s depth axis maps years. The visualization uses the Highcharts library and its highcharts-3d JavaScript API, with options3d enabling perspective rotation (alpha 25, beta 40) and a set view distance. Data is hardcoded in the series arrays, with pink, yellow, and default color-coded segments for different years.

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the most loved programming languages of 2018, using data from a Stack Overflow survey, with each language’s popularity percentage shown on a horizontal axis. Implemented with D3.js v5, it renders as an SVG with animated hover interactions: moving the mouse over a bar highlights it, draws a dashed threshold line, and displays the percentage difference between that language and all others. The chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, and applies transitions to bars and text on mouse events.

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes automobile sales in India over a ten-year period. A blue filled region beneath a black line chart shows the trend, with axes for Year and Sales. The visualization is built with D3.js v5, using SVG rendering. It employs `scaleTime` and `scaleLinear` for the axes, and `area()` and `line()` generators with a basis curve to create the smooth, filled area. The data is loaded from a CSV file containing yearly sales records.

Loading thumbnail…

ICE-7 Sharanya Javvaji Line Chart

This line chart displays annual automobile sales from 2005 to 2021, plotting sales figures on the y-axis against chronological time on the x-axis. The visualization is rendered as an SVG using D3 v5, loading data from a CSV file hosted on GitHub. It employs D3 scale functions such as `scaleTime` for the date axis and `scaleLinear` for the sales axis, with axes generated using `axisBottom` and `axisLeft`. The data is drawn as a single orange path through D3’s `line` generator, and the chart includes axis labels and a title.

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart displays the monthly price of Amazon Prime subscriptions across different countries, with each slice colored uniquely and labeled with its price in dollars. A legend to the right pairs each country name with its corresponding color and price. The visualization uses D3 v5 to fetch CSV data via `d3.csv`, process it with `d3.pie`, and render SVG paths and text using `d3.arc` and `d3.scaleOrdinal`. The color scheme is defined manually, and values are formatted with `d3.format`.

Loading thumbnail…

ICE 7- Scatter Plot

This animated scatter plot visualizes the Iris dataset, comparing sepal and petal measurements across three flower species. The chart cycles through different attribute pairs every two seconds, shifting which variables map to the x-axis while maintaining species-colored symbols. Built with D3 v6, it uses reusable chart functions with scaleLinear, scaleOrdinal, and symbol generators for rendering SVG paths. The visualization includes axis labels, a color legend for Iris species, and transitions driven by JavaScript’s setInterval, creating an interactive exploration of the dataset’s multivariate relationships.

Loading thumbnail…

ICE-7 Iris

A scatter plot of the Iris dataset displays sepal length against petal length, with a color legend identifying the three species of iris. The visualization is built using D3 v7, the D3 scale-chromatic library, and ColorBrewer. The code leverages D3's selection join, linear and ordinal scales, and custom functions for rendering axes and the categorical color legend. Data is loaded from a CSV file and parsed with D3's csvParse function.

Loading thumbnail…

ICE-6 Scatter Plot- Sharanya Javvaji

This scatter plot displays penguin flipper length against body mass, with each point colored by species using a custom color mapping function. The chart also encodes culmen dimensions in the circle’s rx and ry attributes, though these are not visually varied since the radius is fixed. Built with D3 v6, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map scales and axes, while loading data from a CSV via `d3.csv`. Rendered as SVG in a React project, it includes axis labels and a title, with the body margin removed for a full-screen layout.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, plotting flipper length against body mass and coloring each point by species (Adelie, Gentoo, or Chinstrap). The visualization uses D3 v5’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to load and map data from a remote CSV file, rendering circular marks with SVG. Each circle also encodes bill length and depth as its horizontal and vertical radii, creating an elliptical distortion that layers additional dimensions onto the standard scatter plot.

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and encoding species with distinct D3 symbol shapes. The visualization uses D3 scales, axes, and a reusable scatterPlot function to render SVG paths. Data loads asynchronously from a GitHub Gist CSV file, with numeric parsing applied to all flower measurements. The chart fills the browser window and applies a 100-pixel size to each symbol generator.

Loading thumbnail…

ICE-6 Spotify Songs Sharanya Javvaji

A horizontal bar chart displays the duration of the top 12 Spotify songs, with song names on the y-axis and milliseconds on the x-axis. Each bar’s length is scaled linearly to the song’s duration using `d3.scaleLinear`, while `d3.scaleBand` positions the categorical labels. The React component loads the CSV data via `d3.csv`, slices the first 12 rows, and renders SVG rectangles with axis ticks generated from D3’s scale methods.

Loading thumbnail…

ICE-6 Spotify Songs Sharanya Javvaji

This example displays a plain HTML page that renders the static message “Hello HTML!” in large, centered text. The visualization uses no data or charting library; instead, it relies solely on CSS styling within the document head and a single JavaScript-free div element. The code demonstrates a minimal React starter structure, with the message styled via a 13-em font-size class. No interactive behavior, data binding, or external data source is present, making it a bare-bones template for future projects.

Loading thumbnail…

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

This visualization displays the basic cost of Netflix subscriptions across twelve countries using horizontal bars. The React component loads data from a CSV file, and D3’s `scaleBand` and `scaleLinear` map country names and costs to x/y positions, rendering `<rect>` marks within an SVG. Axes and ticks are generated manually via `xScale.ticks()` and D3’s `scaleBand` domain, with the y-axis labels positioned by `yScale`. The chart is updated asynchronously via `useEffect` and `csv` from D3 v5.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious composition of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Each horizontal bar represents a country, segmented by religion, with population totals on the x-axis. Hovering over bars reveals tooltips via d3-tip, while hovering over the color legend highlights corresponding religion segments using d3.legend and layering. The chart is built with D3 v3, employing d3.layout.stack, d3.svg.axis, and ordinal/linear scales, and is rendered as an SVG with CSS transitions.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart visualizes Amazon basic subscription costs across twelve countries, with horizontal bars showing the monthly price in dollars. The visualization uses React (via hooks like `useState` and `useEffect`) to manage state and render an SVG, while importing D3 v5 functions such as `scaleBand`, `scaleLinear`, and `max` for the bar layout and axes. Data is loaded from a CSV file, and the chart includes red gridlines and custom tick labels along the x-axis, with country names positioned on the y-axis.

Loading thumbnail…

Sharanya Javvaji-Ice5

This visualization displays organizational data using CSS Named Colors loaded from a CSV file. It renders an SVG scene with a background pattern and data-driven visuals. The code uses D3 v7 to fetch and parse the CSV data with promises and async/await, then applies the color values to populate the organization chart.

Loading thumbnail…

Fork of ICE-4 Buddha

A dense field of randomly colored, rotating diamond shapes overlays a large SVG path depicting a Buddha figure. The polygons are generated through nested array maps, with randomized coordinates, fill colors, and rotations. The Buddha silhouette is drawn using a complex SVG path, while the geometric overlay is produced with React components rendering SVG elements. The scene uses a black background and no external data, relying entirely on procedural generation within the React framework.

Loading thumbnail…

ICE-4 Buddha

The visualization displays a glowing, abstract Buddha figure composed of a swirling, continuous path rendered over a dense field of randomly positioned, semi-transparent colored circles on a black background. It uses React with ReactDOM to construct and render the SVG elements. The Buddha’s outline is defined by a single intricate path element with a thick stroke, while the scatter of circles is generated through nested map functions over an array, with each circle’s size, position, and fill color determined by JavaScript’s `Math.random` function.