S

Saiipriiya

@Saiipriiya·34 public vizzes

Loading thumbnail…

Saipriya ICE-8 Social network

This example shows a social network graph of individuals and their friendship relationships. D3’s force simulation (`d3.forceSimulation`) with link, charge, collision, and center forces positions nodes, which are rendered as yellow circles connected by arrowed lines. The graph loads node and link data from a JSON file, supports dragging via `d3.drag`, and highlights nodes on hover through CSS classes. The visualization is built with D3 v6 and SVG in a React environment.

Loading thumbnail…

Saipriya ICE-8 Animals tree Chart

A hierarchical tree chart displays animal classifications from a root node through mammals, reptiles, and birds to leaf nodes like primates and snakes. Built with D3 v5 in a React application, the visualization uses `d3.hierarchy` and `d3.tree` to compute node positions. Each node appears as a circle with size proportional to its value, colored by type and level properties, while curved paths connect parent-child relationships. SVG rendering with custom stroke and fill attributes highlights the taxonomic structure.

Loading thumbnail…

Saipriya ICE-8 Country map

This example presents a choropleth map of Indian states, rendered as SVG paths using D3’s geoMercator projection and geoPath generator. Each state is filled with a categorical color from scaleOrdinal, with its name overlaid at the centroid. The code loads TopoJSON from a remote URL, extracts features via topojson.feature, and appends hover tooltips via title elements. Styling in CSS adds black state borders.

Loading thumbnail…

Saipriya ICE-8

This example displays an interactive world map using an equirectangular projection, with countries rendered as yellow SVG paths against a blue sphere background. Hovering over a country highlights it in red. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `json()`, converts them using `feature` from topojson, and draws them with `geoPath` and `geoEquirectangular` from d3. Styling and hover effects are handled through CSS classes on the SVG path elements.

Loading thumbnail…

Fork of HTML Starter

This example displays a static page with the text “Hello HTML!” centered in the browser window. The message is styled using a CSS class that sets a very large font size and centers the text horizontally. The implementation relies on plain HTML and CSS, with the visual result rendered directly by the browser without any JavaScript or external libraries. The page’s structure is defined in an `index.html` file containing a `style` block and a single `div` element.

Loading thumbnail…

Line Chart ice-7

This visualization shows Uber’s stock price over time, with a single red line tracing yearly price changes on axes labeled “Year” and “Stock Price.” The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` APIs to map parsed dates and prices, rendering as an SVG. It loads Amazon stock data from a GitHub gist CSV, parsing dates with `d3.timeParse` before drawing the path within a margin-based layout.

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes population growth over time, using a smooth, curved area path to emphasize the upward trend. The visualization is rendered as an SVG using React and D3 v5, employing the `area` API with a `curveBasis` to generate the filled region. The chart includes axes with formatted tick labels (converting G to B) and a title, with data loaded from an external CSV file.

Loading thumbnail…

Line chart

This line chart displays flight charges over a range of years, using a time-scaled x-axis and a linear y-axis. The visualization is rendered as an SVG using D3 v5, with data loaded from an external CSV file. The code employs D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to plot the trend. Axis labels and tick marks are configured with custom margins, and the line path is styled with a blue stroke.

Loading thumbnail…

Fork of Pie chart-ice-7

This visualization shows the top 10 countries by monthly farming output using a pie chart, with each slice labeled by country name and a legend displaying exact dollar amounts. The chart renders in SVG, fetching CSV data from a GitHub gist and parsing it with d3.csv. It uses d3.pie() to compute arc angles, d3.arc() for the path and label positioning via centroid, and d3.scaleOrdinal() to map a fixed color palette. Text elements use white fill per the CSS, though labels are overridden to black.

Loading thumbnail…

Fork of Fork of Pie chart-ice-7

This example shows a pie chart displaying the top 10 countries by prisoner count, with each slice labeled in thousands (e.g., "1.2K") and a legend pairing country names with their corresponding values. The chart uses D3 v5 to fetch CSV data from a GitHub gist and render SVG paths via `d3.pie` and `d3.arc`, with a `d3.scaleOrdinal` mapping slice colors. Text labels are positioned using `arc.centroid`, while the legend is built from appended rectangles and text elements.

Loading thumbnail…

Fork of Pie chart-ice-7

A forked pie chart visualizes the top 10 countries by prisoner counts, with each slice colored distinctly and labeled with values in thousands. It renders an SVG using D3 v5, fetching CSV data from a gist, then uses `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate segments and a legend. The chart also applies `d3.format` for tick labels and custom styling.

Loading thumbnail…

Pie chart-ice-7

This example uses a D3 pie chart to show the top 10 countries by prisoner count, with each slice labeled in thousands and a legend listing country names beside their values. The chart is rendered as SVG using the `d3.pie()` and `d3.arc()` functions, with colors assigned via `d3.scaleOrdinal()`. Data is loaded asynchronously from a CSV file using `d3.csv`, and text labels are positioned with `arc.centroid()`. The visualization highlights the relative share of prisoners per country using a simple categorical color scheme.

Loading thumbnail…

Different symbols of Fork for Reusable scatter plot

A scatter plot displays iris species data with distinct D3 symbol shapes—circles, crosses, diamonds, squares, stars, triangles, and wye—mapped to the species column via `scaleOrdinal` and `symbol().type()`. Petal width appears on the x-axis and sepal length on the y-axis, with linear scales and SVG axes rendered from a CSV file. The reusable `scatterPlot` function configures size, margins, and accessor functions, then joins the generated path data to SVG elements.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This example displays a pie chart ranking the top 10 countries by reported deaths from air pollution in 2020. It visualizes each country’s share of the total as a colored arc segment with a label showing the death count in thousands, alongside a color-coded legend listing countries and their values. The chart is built with D3 v5 using the `pie` and `arc` generators, with colors assigned via `scaleOrdinal`. Data is loaded as CSV from a gist URL, and the SVG canvas is populated using `select` and `append` methods.

Loading thumbnail…

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

This interactive bar chart displays student statistics by area, using an SVG visualization rendered through React and D3. The chart loads data from a CSV file via `d3.csv`, then maps area names to horizontal bars using `d3.scaleBand` and `d3.scaleLinear` for axes. Tick marks and labels are generated with `d3.axisLeft` and `d3.axisBottom` equivalents, while React components manage the rendering pipeline. The visualization uses `d3.max` and `d3.format` for scaling and number formatting, with the top 15 records shown.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris dataset as an animated scatter plot, cycling through different feature pairs every two seconds. The plot reuses a configurable scatter plot module, demonstrating how to build reusable charts with D3 v6. It uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles. The animation updates the x-value accessor via `setInterval`, re-rendering the chart with smooth transitions. The code also implements a custom square symbol, though it is not actively used in the final rendering.

Loading thumbnail…

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

This fork of ICE-6 renders a horizontal bar chart showing the basic cost of Netflix subscriptions in different countries, using a hybrid of React and D3. The visualization draws SVG rectangles scaled by D3’s `scaleBand` and `scaleLinear`, with grid lines and tick labels from `xScale.ticks()`. Data is loaded asynchronously via D3’s `csv` from a Gist URL, then sorted and sliced to the first 15 countries. React’s `useState` and `useEffect` manage the data fetch, while D3’s `max` and `format` handle axis scaling and tick formatting. The chart updates purely through declarative SVG markup within a React component.

Loading thumbnail…

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

This bar chart displays student statistics by area for the top 15 entries, using horizontal bars where area names appear on the y-axis and numeric stats on the x-axis. The visualization is built with React and D3 v5, using `d3.csv` to load remote data and `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. SVG rectangles represent the marks, with grid lines and tick labels generated via `d3.ticks()`. Data is pulled from a GitHub gist CSV, and the chart renders within a fixed 960x500 viewport with defined margins.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This visualization uses a fork of the Palmer Penguins dataset to create a scatter plot comparing flipper length and body mass, with each penguin represented as a colored circle (green, pink, or coral) based on species. The D3 v5 code loads CSV data, parses numeric fields, and maps values to screen coordinates using `scaleLinear` and `extent`. Axes are rendered with `axisLeft` and `axisBottom`, while data points are drawn as SVG circles with fixed radius, colored deterministically by species.

Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the classic Iris dataset as a scatter plot, using sepal length on the x-axis and petal length on the y-axis. Each point’s color encodes the flower species, with a categorical color legend identifying setosa, versicolor, and virginica. The visualization is built using D3.js, leveraging `scaleLinear` for the axes, `scaleOrdinal` with `schemeCategory10` for the color mapping, and the `selection.join` API for declarative SVG creation. A custom `axes` and `colorLegend` module handle the chart’s annotations.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork visualizes the Palmer Penguins dataset as an SVG scatter plot, mapping flipper length to the x-axis and body mass to the y-axis. Circles are colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap) using a custom `marker` function. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()`. Data is loaded from a remote CSV URL with numeric parsing for measured traits, and the visualization fills the browser window with margins and a title.

Loading thumbnail…

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

This interactive bar chart visualizes product sales across 15 countries, encoding country names on the y-axis and sales values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, rendered as SVG rectangles. Data loads from a CSV via `d3.csv`, with grid lines drawn from `xScale.ticks()`. The chart updates reactively using React state hooks, combining D3’s scaling and formatting utilities with React’s declarative component structure.

Loading thumbnail…

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

This fork of ICE-6 renders a horizontal bar chart showing the basic cost of Netflix subscriptions in different countries, using a hybrid of React and D3. The visualization draws SVG rectangles scaled by D3’s `scaleBand` and `scaleLinear`, with grid lines and tick labels from `xScale.ticks()`. Data is loaded asynchronously via D3’s `csv` from a Gist URL, then sorted and sliced to the first 15 countries. React’s `useState` and `useEffect` manage the data fetch, while D3’s `max` and `format` handle axis scaling and tick formatting. The chart updates purely through declarative SVG markup within a React component.

Loading thumbnail…

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

This example visualizes office supply sales data as a horizontal bar chart showing units sold per sales representative. React component state manages the loaded data, while D3’s `scaleBand` and `scaleLinear` map sales values to bar widths. The code uses D3’s `csv` parser to fetch the dataset, then renders SVG rectangles and manual tick labels with gridlines, all within a React `svg` element. ReactDOM’s `render` method mounts the chart into the page’s root div.

Loading thumbnail…

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

This example visualizes office supply sales by rendering a horizontal bar chart of units sold per sales representative, using a sample of 15 records from a CSV dataset. It shows the relationship between representative names on the y-axis and units on the x-axis, with blue gridlines and labeled axes. The chart is built by combining React 16.9 functional components with D3 v5 scales, including `scaleBand` and `scaleLinear`, using `csv`, `max`, and `format` from D3, while React manages state and renders SVG elements directly.

Loading thumbnail…

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

This example shows the basic cost of Netflix subscriptions in different countries using a bar chart rendered on a Canvas. The visualization is built with React and D3 (v5) within an HTML page that loads both libraries via CDN. The chart.js API is used to create the bar chart, mapping sales data values to bar heights and month labels to the x-axis, while the D3 library handles additional rendering. The code defines a dataset of five monthly sales figures and displays them as a single series with blue borders.

Loading thumbnail…

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

This example shows a horizontal bar chart of office supply sales, displaying the top 15 items with their unit counts. The visualization uses React to manage the component state and render the SVG elements, while D3 provides the data-loading and scaling utilities, including `csv`, `scaleBand`, and `scaleLinear`. The data is fetched from a GitHub Gist URL, and the bars are drawn as SVG `<rect>` elements with custom tick marks and labels for both axes.

Loading thumbnail…

Untitled

This example visualizes the Palmer Penguins dataset as an interactive scatter plot, mapping bill length and bill depth along the x- and y-axes. The visualization uses D3 version 6 to load CSV data and bind it to SVG elements, with circles representing individual penguins. The code explicitly parses numeric fields for bill dimensions, flipper length, and body mass, enabling quantitative scaling and positioning. Axis tick styling and a fixed-viewport layout are defined in embedded CSS, while the included video tutorial demonstrates the setup process for D3 v6.

Loading thumbnail…

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

This example displays a bar chart of office supply sales data for fifteen countries, with economic cost on the x-axis and country names on the y-axis. It combines React hooks (`useState`, `useEffect`) for data loading and D3 v5 utilities `csv`, `scaleBand`, and `scaleLinear` to fetch and scale the data, rendering bars and axis ticks as SVG elements. The visualization uses React’s declarative rendering to generate each rectangle and text label, with axes drawn manually via `scale.ticks()` and gridlines.

Loading thumbnail…

ICE-5 DV

The visualization gallery example titled "ICE-5 DV" displays the metadata of an office supply sales dataset, reporting its size in kilobytes, row count, and column count within a pre-formatted message box. The presentation layers a custom SVG background image via CSS, with a centered heading and a hyperlink to the source data. Built using React, the implementation leverages D3 v7's `d3.csv` API to fetch and parse the remote CSV file, then uses the `d3.csvFormat` function to calculate data length for the metadata summary. The page's styling is defined in an external CSS file, and the D3 library is loaded from a content delivery network.

Loading thumbnail…

ICE-5

This example demonstrates the declaration of external dependencies through `package.json` in VizHub, bypassing manual `<script>` tags. It shows a minimal React application that renders a "Hello package.json" message using `ReactDOM.render`. The configuration defines the `vizhub.libraries` field, mapping package names like `d3`, `react`, and `react-dom` to specific browser globals and CDN paths. The code imports `select` from D3 and uses a custom `license` field with the ISC identifier.

Loading thumbnail…

ICE-5

This example demonstrates how VizHub’s `package.json` supports custom dependency declarations, including a `vizhub.libraries` field that maps package names to browser globals and CDN paths. The code uses React 18 and ReactDOM to render a simple “Hello” message, while importing `select` from d3 7.8.0. It highlights the ES6 import syntax resolving to UMD builds via unpkg, with an ISC license specified in the metadata.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A green smiley face is drawn with D3.js, featuring animated eyebrows that move down and up repeatedly, along with a static mouth, eyes, and a red sticker. The code uses d3.select and d3.append to build SVG elements, including circles, rectangles, and a path generated with d3.arc. Transitions are chained with transition.duration to create the eyebrow motion, while additional circles and a commented-out path suggest potential data-driven styling. The visualization demonstrates fundamental DOM manipulation with D3 v5, rendering in SVG within an HTML page.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A green smiley face with animated eyebrows is rendered in an SVG using D3.js v5. The face includes circles for eyes and a mouth drawn with the `d3.arc` function, while its eyebrows are rectangles that move up and down via chained `transition` calls. Additional static elements—two white eye circles, a red dot, and a blue star path—are appended to the same SVG, demonstrating basic DOM manipulation and shape creation with D3 selections and attributes.