S

Saahithi49

@Saahithi49·30 public vizzes

Loading thumbnail…

Saahithi Family tree

This visualization displays a family tree with nine members across four generations, using colored nodes to distinguish generations and animated links to show parent-child relationships. The tree is built from flat data using `d3.stratify()` and `d3.tree()`, with SVG circles and text labels rendered via React. Paths animate from source to target positions using `transition().duration()`, while node colors are assigned through a custom `setGeneration()` function based on each node’s depth. The layout is computed with d3.v6’s tree utility, and all rendering occurs through SVG elements.

Loading thumbnail…

Saahithi Social Network

A force-directed network graph displays friendships among people in an example social network. Nodes are rendered as purple circles with labels, and directed links with arrowheads represent friend relationships. The code builds the visualization using `d3.forceSimulation` with link, charge, collision, and center forces. Nodes are draggable via `d3.drag`, and hovering applies a CSS class to change the stroke. The data comes from `data.json`, and the SVG is given a `viewBox` for scaling.

Loading thumbnail…

ICE 8- COUNTRY MAP

This example displays a choropleth-style map of Sweden’s counties (län), rendered as SVG paths using D3’s `geoMercator` projection and `geoPath` generator. The map is built with React, fetching TopoJSON data from a GitHub gist and converting it to GeoJSON via `topojson.feature` and `topojson.mesh` for interior boundaries. County borders are highlighted with a pink stroke, while interior mesh lines appear in pale green, showcasing layered vector styling. The visualization demonstrates integration of D3 v5, React hooks (useState, useEffect), and client-side geographic data processing.

Loading thumbnail…

ICE 8 - WORLD MAP

This example displays a world map rendered as yellow countries with purple outlines on a black background. It uses d3.json to load country boundary data from the world-atlas TopoJSON file, then applies d3.geoNaturalEarth1 projection and d3.geoPath to draw each country as an SVG path. The code selects the SVG element, extracts country features with topojson.feature, and binds them to path elements. The map is static, showing all countries at once without interaction or animation.

Loading thumbnail…

Sn

A social network graph of ten people and their friendship connections uses force-directed layout to arrange nodes in an SVG. Node size is constant, while link thickness encodes the relationship value, with most connections weighted at one. The visualization uses D3’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to compute positions, with drag interaction enabling manual rearrangement. Data from `data.json` is loaded asynchronously, and nodes are labeled with names, with hover effects toggling a CSS class.

Loading thumbnail…

FT

This visualization displays a family tree as an animated node-link diagram, with each individual represented by a color-coded circle and their name label. The tree flows downward from a single root ancestor, branching into multiple generations. Using D3 v6, the code relies on the `d3.stratify()` utility to build a tree structure from the parent-child links in the data, then `d3.tree().size([950, 300])` to compute the layout. Nodes are drawn as circles colored by generation depth, and links are animated using the `transition()` API to reveal connections over time.

Loading thumbnail…

s map

This map of Swedish counties visualizes administrative boundaries using a geoMercator projection fitted to the extent of the geographic features. Built with React and D3 v5, the code loads TopoJSON data from a GitHub gist and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. The `d3.geoPath` generator renders both county outlines (`feature`) and interior borders, with styling defined in CSS that fills each county in teal and strokes boundaries in contrasting colors. The visualization presents the simplified county geometry as an interactive SVG graphic.

Loading thumbnail…

ind

This interactive map of India displays state and district boundaries using a Mercator projection, rendered as SVG paths with click-to-zoom transitions. The code loads TopoJSON data from a remote gist, converts it to GeoJSON features via `topojson.feature`, and visualizes it with `d3.geoMercator`, `d3.geoPath`, and the `d3.zoom` tool for animated scaling. Clicking a region triggers a smooth zoom to its bounding box and updates the displayed area, demonstrating dynamic map navigation with React and D3.

Loading thumbnail…

s ice

This visualization displays a geographic map of the world’s countries, rendered as yellow-outlined SVG paths against a blue background. It uses D3.js v5 and the `topojson` library to fetch and parse country boundaries from the world-atlas dataset, then projects them with `d3.geoNaturalEarth1` and draws each path using `d3.geoPath`. The map is static, with no interactive features, and simply presents the landmasses as a styled choropleth-like outline.

Loading thumbnail…

BONUS ICE

This example visualizes view counts for various movies and TV shows across OTT platforms, including Netflix, Amazon Prime, and Hulu, using a 3D column chart. It constructs the visualization with the Highcharts library, specifically utilizing the highcharts-3d module to enable depth, rotation angles, and perspective for the bars. Each series represents a single title, such as FRIENDS or TITANIC, and is plotted at a specific platform position, while axes label the platforms and the number of views. The chart uses a dark blue background and stacking properties to organize the data points.

Loading thumbnail…

BONUS ICE

This example shows a three-dimensional bar chart of movie and TV show views across multiple streaming platforms, including Netflix, Amazon Prime, Hulu, and HBO Max. Each series represents a title like FRIENDS, TITANIC, or DARK, plotted to a single category position along the x-axis. The chart uses Highcharts and the highcharts-3d module to enable a perspective view with configurable alpha, beta, and depth settings. Data is hard-coded inline as arrays in the series definitions, with stacked columns rendered using the column depth option.

Loading thumbnail…

Untitled

This example displays a 3D scatter plot with two sets of markers, each representing a distinct series of data points. It uses Plotly.js to render the visualization, with a D3 CSV loader fetching the dataset from a GitHub Gist. The code defines two traces—one with default styling and another with gray markers—and plots them across x, y, and z coordinates. The layout removes all margins, and the chart is embedded in a designated div element.

Loading thumbnail…

Untitled

This example shows a 3D scatter plot with two traces, each displaying a set of data points in three-dimensional space using Plotly.js. The first trace appears in the default color while the second is pink, with both series having markers outlined in contrasting colors. The data is loaded from a remote CSV file using D3’s `d3.csv` method, parsed through a custom `unpack` function to extract the x, y, and z coordinates for each series. The visualization is rendered into a div element without margins, leveraging Plotly’s `scatter3d` chart type.

Loading thumbnail…

Untitled

A bar chart displays the price per head of restaurants in Hyderabad, using data loaded via `d3.csv` from a GitHub gist. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG rendering and animated transitions via `transition.attr`. Hovering over a bar triggers a mouseover handler that enlarges the bar, changes its class from `bar` to `highlight`, and appends a dynamic price label, while mouseout restores the original state and removes the label.

Loading thumbnail…

Untitled

This animated bar chart compares the number of movies available on various OTT platforms, using data from a CSV file. Rendered with D3 v4 as SVG, the chart features a transition animation where bars grow sequentially on load. Interactive mouseover events highlight a bar and append a text label showing its exact value, while mouseout removes the label and resets the bar’s appearance. Axes are scaled with `d3.scaleBand` and `d3.scaleLinear`, and the chart includes a title and axis labels.

Loading thumbnail…

IN CLASS EXERCISE 6

This example displays a bar chart of the number of movies available on various OTT platforms, using data loaded from a CSV file via `d3.csv`. The visualization uses React for component structure and D3 v4 for SVG rendering, with bars that animate in on load using a `transition` with `d3.easeLinear`. Interactive mouseover and mouseout handlers adjust bar opacity, size, and temporarily display a value label, demonstrating dynamic data exploration.

Loading thumbnail…

s Fork of Untitled

This example shows an interactive, animated bar chart built with React and D3 v2, where each bar is rendered as an SVG rectangle with a drop-shadow filter. The chart uses a hierarchical data structure, displaying captions as x-axis tick labels and mapping numeric values to bar heights via `d3.scale.ordinal` and `d3.scale.linear`. Data transformation and bar layout are handled by custom functions called from a jQuery document-ready handler, with axes generated using `d3.svg.axis`. The visualization updates dynamically, though the specific dataset source is not shown in the provided code.

Loading thumbnail…

ICE-7 - Reusable Scatter Plot

This example presents a reusable scatter plot of BMI data, visualizing relationships between Height, Weight, Index, and Age, with points colored by gender. Built with D3 v6, the visualization cycles through different x-axis variables on an interval, updating axes and labels dynamically. It uses D3’s `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with SVG circles for marks and a custom legend. Data loads from a CSV via `d3.csv`, and the chart is rendered through a reusable `scatterPlot` module.

Loading thumbnail…

ICE - 7 Pie chart

This visualization displays the top five countries by literacy rate as a pie chart, with each slice labeled with its percentage and a color-coded legend. The code loads data from a CSV file via `d3.csv`, computes the pie layout using `d3.pie`, and draws arcs with `d3.arc`. Colors are assigned via `d3.scaleOrdinal`, and the chart is rendered as SVG with text labels and legend elements.

Loading thumbnail…

Area Chart ICE 7

This example renders an area chart of exchange rates over the last week using D3 v5. The code loads CSV data via `d3.csv`, parses dates and numeric values, then uses `scaleTime` and `scaleLinear` to map data to SVG coordinates. It draws the area with `d3.area` and `curveBasis`, and adds labeled axes via `axisBottom` and `axisLeft`. Data is fetched from a GitHub gist, and the chart is displayed within a 960×500 SVG.

Loading thumbnail…

Line Chart ICE-7

A line chart displays exchange rates over the course of a week, with a purple curved line connecting daily data points. The chart includes labeled axes for date and exchange rate, along with a title and gridlines. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to render the SVG. Data is loaded from a CSV file hosted on GitHub, and the code demonstrates importing from the `d3` module and local ES6 modules.

Loading thumbnail…

S ICE7 - Reusable Scatter Plot

This example presents an interactive scatter plot of the Iris dataset, visualizing the relationships between sepal and petal measurements across three iris species. The plot automatically cycles through different measurement combinations on the x-axis, allowing comparison of various feature pairs while using color-coded points to distinguish species. Built with d3.v6, it employs a reusable `scatterPlot` function with scaling, axes, and transitions, and renders as SVG with animated updates via `setInterval`.

Loading thumbnail…

IN CLASS EXERCISE 6

This bar chart ranks the top 10 U.S. states by 2021 population in millions. The visualization uses D3 v5 within a React component to load CSV data, scales both axes, and renders red rectangular bars for each state. The code explicitly calls `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to compute the layout, while SVG rectangles and text elements are generated through React’s `render` method. Gridlines and axis labels are manually plotted using `d3.ticks` in a loop.

Loading thumbnail…

ICE-6

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length and width on the x- and y-axes while encoding sepal dimensions through elliptical markers whose rx and ry attributes correspond to sepal length and width. Species are represented by distinct colors: purple for setosa, brown for versicolor, and pink for virginica. The code uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` loader within a React-free SVG rendering approach. Axes labels indicate measurements, and the plot fills the browser window with a 24-pixel tick font.

Loading thumbnail…

ICE-6

This visualization presents the Iris dataset as a scatter plot, mapping petal length and width on the x and y axes. Each data point is colored by species, using yellow, blue, and red to distinguish setosa, versicolor, and virginica. The code loads CSV data via `d3.csv` from a GitHub gist, uses `d3.scaleLinear` and `d3.extent` for scaling, and renders circles with SVG attributes like `cx` and `cy`. Axis labels are drawn with `d3.axisLeft` and `d3.axisBottom`, while the title "SCIENTIFIC DATA VISUALISATION" appears at the top.

Loading thumbnail…

s of Data Visualization - ICE-6 Scatter Plot Graph

This scatter plot visualizes the Iris flower dataset, mapping petal length and width along the axes while encoding species with color—yellow for setosa, blue for versicolor, and red for virginica. It uses D3 v6 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data and render the SVG chart. Circle radius is fixed, but sepal length and width are stored as extra attributes, though not visually encoded. Rendering fills the browser window, with axis labels rotated and formatted via inline styles.

Loading thumbnail…

s of Data Visualization - ICE-6 - Bar chart

This bar chart displays the world’s top 10 revenue-generating athletes, showing their total pay in millions of dollars. It highlights how D3 axes can be customized with blue tick labels and red gridlines. The code uses React hooks with `useState` and `useEffect` to fetch CSV data, then renders SVG rectangles via D3’s `scaleBand` and `scaleLinear`. Custom axes are drawn manually, while the chart loads data from a GitHub gist URL.

Loading thumbnail…

IN CLASS EXERCISE-5

This example shows a data summary for a CSV file of lipstick sales. It displays the file size, row count, and column count in large text, alongside a static SVG image. The code uses D3 v7’s `d3.csv` to load the remote data and `d3.csvFormat` to calculate the data’s size in kilobytes, then updates the page’s `pre` element with the summary. Styling is applied via embedded CSS.

Loading thumbnail…

s ICE-5: Welcome to ICE-5 Data visualization

This example displays a title, a cyan message box summarizing a CSV dataset, and a static SVG image on an HTML page. It loads a remote CSV file of the top 100 actors using D3 v7’s `d3.csv`, then computes and displays the file size in kilobytes, the row count, and the number of columns in a `pre` element. The page also embeds an external SVG image via an `img` tag. Styling is applied with basic CSS, and all rendering is client-side without any interactive charts or user input.

Loading thumbnail…

Saahithi face emoji

A stylized, cartoon-like smiley face is drawn with D3.js and React. The code uses D3's `arc` generator to create the mouth, eyes, and ear shapes, which are then layered with SVG circles, ellipses, and lines for additional detail like pupils, eyebrows, and decorative strokes. The entire face is composed within an SVG canvas using React to declaratively render the elements. The source code defines specific dimensions, offsets, and color values to construct the final emoji-like composition.