S

saidhiraj16

@saidhiraj16·27 public vizzes

Loading thumbnail…

ICE-8 SOCIAL NETWORK CHART

This chart shows a small social network with six labeled nodes (ACE, ZORO, LUFFY, SABO, SANJI, USSOP) connected by five weighted links. It uses an SVG force-directed layout created with `d3.layout.force`, where link thickness reflects the `weight` value from the JSON data. Nodes are rendered as yellow circles with blue text, and red lines represent connections. The simulation updates node positions on each tick, with drag behavior enabled via `force.drag`.

Loading thumbnail…

ICE 8 - Family Tree

This visualization displays a family tree as a tidy tree layout using D3.js v5. The code defines hierarchical data with parent-child relationships and renders it as an SVG, with circular nodes colored by depth (green for the root, red for the second level, and blue for deeper nodes). Curved paths connect parent and child nodes using cubic Bézier commands. Each node is labeled with the person’s name. The example uses D3’s `stratify`, `tree`, and `links` APIs to compute the layout and structure.

Loading thumbnail…

ICE -8 netherlands map

This interactive map displays the municipalities of the Netherlands, rendered as individual SVG paths. Users can click on a municipality to zoom in on it, with the selected area highlighted in red, while hovering changes the fill color to orange. The visualization uses `d3.geoMercator` projection and fetches TopoJSON data for the year 2020 from Cartomap. The map employs the `d3.zoom` library for panning and zooming, with a smooth transition applied to the SVG group's transform.

Loading thumbnail…

ICE-8 WORLD MAP

This visualization displays a world map using a natural Earth projection, rendering countries as green filled polygons with blue strokes. The code loads geographic data from the world-atlas TopoJSON source and converts it using `topojson.feature`, then applies `d3.geoPath` with `d3.geoNaturalEarth1` to generate SVG paths. A blue sphere outline highlights the globe’s boundary. The countries appear as static shapes without interaction, with styling defined via CSS classes for the sphere and country paths.

Loading thumbnail…

ICE 8 FAMILY TREE

This example shows a family tree diagram with ten individuals, including notable names like SHIVAJI, PARVATHI, and RAJENDRA, connected through hierarchical parent-child relationships. The visualization uses D3 v6’s `d3.stratify()` to convert flat data into a hierarchy and `d3.tree()` to compute node positions, rendering circles, connecting paths, and text labels with SVG. Animations are applied using `transition()` with varying durations for links, nodes, and labels, making the tree appear to grow and populate over time.

Loading thumbnail…

ICE -8 Family tree

A family tree visualization uses a radial dendrogram to display four generations of a family, with each node positioned by birth year and connected by curved links. Decade rings provide a temporal scale, and node labels are oriented outward or inward depending on their angular position. The visualization is built with D3.js, using `d3.layout.tree` for layout, `d3.svg.diagonal.radial` for the connecting paths, and `d3.json` to load the family data from `data.json`. The underlying SVG is rendered via the `d3.select().append()` API, with styling controlled by an external stylesheet.

Loading thumbnail…

ICE -8 Nederland map

This interactive map of the Netherlands displays all 2020 municipalities as clickable SVG paths using d3.geoPath with a Mercator projection. Users can zoom and pan via d3.zoom, with click events triggering a smooth zoom transition to the selected municipality, which highlights in red. The map renders municipality outlines from a TopoJSON source, with hover states showing orange fills and titles. Zoom transformations update the group’s transform and stroke-width dynamically.

Loading thumbnail…

Fork of Country Map of India

This interactive SVG map visualizes the country of India, colored by state using a categorical color scale. The visualization employs a Mercator projection to render the geographic boundaries, and hovering over a state highlights it in pink. Built with React and D3 v5, the code uses `d3.geoMercator`, `d3.geoPath`, and `d3.scaleOrdinal` to process and display TopoJSON data loaded from a GitHub gist. The map is rendered as SVG paths within a fixed 1060x900 canvas.

Loading thumbnail…

Fork of country map

This example displays a choropleth map of India, with each state colored according to a categorical color scheme. The visualization uses the Mercator projection via `d3.geoMercator` and renders geographic boundaries with `d3.geoPath`. GeoJSON data is fetched from a GitHub Gist, parsed with `topojson`'s `feature` function, and drawn as SVG paths. The map is built with D3 v5, React, and a CSS hover effect that changes state fill colors.

Loading thumbnail…

ICE 7- Area Chart

This area chart visualizes the change in average world men's height over time. The chart uses a blue filled area beneath a black line to emphasize the trend across the years, with labeled axes for 'Year' and 'Height'. The visualization is rendered as an SVG using D3 version 5, leveraging functions like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with a `curveBasis` smoothing. The data is loaded from a remote CSV file via D3's `csv` function.

Loading thumbnail…

ICE-7 LINE CHART

This line chart shows the average height of men worldwide from 1900 to 2000, with a red stroke line rising steadily over time. The visualization uses d3.select, d3.csv, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render an SVG chart. Data is loaded from a GitHub gist CSV file, with Year parsed as dates and Height as numbers. The chart includes labeled axes with gridlines, a titled header, and a custom margin layout.

Loading thumbnail…

ICE 7 - PIE CHART

This example shows the distribution of men's average heights by country using a pie chart, with each slice colored and labeled in a legend. The visualization is built with D3 version 5, using the `d3.pie` layout and `d3.arc` for the sector geometry, while `d3.scaleOrdinal` assigns colors. The data is loaded from a CSV file hosted on GitHub via `d3.csv`, and the chart is rendered as SVG with a fixed 960×500 canvas.

Loading thumbnail…

ICE - 7 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between two selected flower measurements (such as petal width and sepal length) with points colored by species. The visualization cycles through different column combinations as axes, using D3.js v6 with a reusable scatterPlot function that leverages scaleLinear, axisLeft, axisBottom, and data joins to render SVG circles. The data is loaded from a CSV via d3.csv, with a dark background and white text for styling.

Loading thumbnail…

ICE - 7 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between two selected flower measurements (such as petal width and sepal length) with points colored by species. The visualization cycles through different column combinations as axes, using D3.js v6 with a reusable scatterPlot function that leverages scaleLinear, axisLeft, axisBottom, and data joins to render SVG circles. The data is loaded from a CSV via d3.csv, with a dark background and white text for styling.

Loading thumbnail…

ICE 7- Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, mapping petal width on the x-axis and sepal length on the y-axis as circular marks. Built as a configurable chart component, it uses the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs from `d3` to derive scales and axes, with data loaded via `csv`. A `setInterval` timer cycles the x-axis through all four iris flower measurements every two seconds, animating the plot's layout. The visualization renders as SVG, with circles positioned through `attr` calls and axes drawn using D3's axis functions.

Loading thumbnail…

ICE- 6 Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width on the x- and y-axes while coloring each point according to its species (setosa, versicolor, or virginica). Using D3 v6, the code loads the CSV data with `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG elements. It labels the axes as “Petal-length” and “sepal-length” (the latter rotated via an SVG transform). The plot fills the browser window, with axis ticks generated by `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis, with each of the 150 flowers represented as a circle. The React-driven SVG uses D3 v7 scales, including `scaleLinear` and `extent`, to map data values to pixel coordinates. Axis components generate tick marks and labels via `xScale.ticks()`, while formatted tooltips appear on hover through SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a remote gist, and the layout employs explicit margins for axis labels.

Loading thumbnail…

Fork of Iris Scatterplot

This fork of the classic Iris Scatterplot visualizes sepal length against sepal width using the Iris Dataset. The chart renders as an SVG with a teal circular mark for each data point. Built with React and d3.v7, it constructs its axes and scales using `scaleLinear` and `extent`, while `csv` loads the dataset. The `AxisBottom` and `AxisLeft` components generate ticks, and a tooltip showing a formatted value appears via the native SVG `<title>` element. The code includes a message function that summarizes the loaded data’s size and row count.

Loading thumbnail…

Fork of COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework

This scatter plot visualizes COVID-19 deaths in the US over time using rolling averages from the NY Times dataset. The chart displays dates on the x-axis and average deaths on the y-axis, with each point representing a daily observation. The visualization is built as a reusable D3 framework using the `scatterPlot` function, which leverages `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` from D3 6.7.0. The plot includes an annotated line marking when vaccination reached 30%, and is rendered as an SVG with custom styling.

Loading thumbnail…

ICE-6

This bar chart displays the average height of men across 20 countries, with countries listed along the vertical axis and height values on the horizontal axis. The visualization uses React to manage the component state and D3 v5’s `csv` loader to fetch data from a GitHub-hosted CSV file, while `scaleBand` and `scaleLinear` position the bars. Blue rectangles represent the height values, and the SVG rendering approach uses custom ticks and gridlines generated with D3’s `scaleLinear` ticks method.

Loading thumbnail…

ICE-6

This visualization displays the average height of men across 20 countries as a horizontal bar chart, with country names on the y-axis and height values on the x-axis. Built with React and D3 v5, it uses `d3.csv` to load the WorldHeight dataset and `d3.scaleBand` alongside `d3.scaleLinear` to position bars and axis ticks. The SVG rendering includes manually drawn gridlines with blue strokes and text labels, while React’s `useState` and `useEffect` manage asynchronous data loading and state updates.

Loading thumbnail…

ICE 6-1

A horizontal bar chart displays the protein content in grams for ten cereals, ranked by name along the vertical axis. The code uses React with hooks (`useState`, `useEffect`) to fetch CSV data via `d3.csv` and renders the visualization as SVG. D3 scales (`scaleBand`, `scaleLinear`) position bars and axes, with custom tick rendering for gridlines and labels.

Loading thumbnail…

ICE 6

This example displays a horizontal bar chart of the top 10 most populous countries for 2019, ranked by population count. The visualization uses React with hooks to load CSV data and D3 v5 for scales and rendering, including `scaleBand` and `scaleLinear` for axes, alongside custom SVG elements for bars and gridlines. The dataset is fetched from a GitHub gist and sliced to the first ten entries, with the chart appearing within a React-managed SVG container.

Loading thumbnail…

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

This bar chart displays the populations of the top 10 countries featured in One Piece episodes, based on 2019 data loaded from a CSV file. The visualization shows horizontal bars with blue grid lines, where each bar’s length encodes population magnitude using a linear scale. The React application uses `useState` and `useEffect` to fetch and parse the data, then renders the SVG elements directly with JSX, while D3’s `scaleBand`, `scaleLinear`, and `max` utilities handle the layout and scaling calculations.

Loading thumbnail…

ICE: 5 ASSIGNMENT

This gallery example displays a summary of a One Piece dataset, reporting the dataset's file size, row count, and column count after loading it from a CSV file. The page features a large heading, a preformatted text block for the data summary, and a static illustration of a character from the show. Built with React and D3.v7, the visualization uses `d3.csv` to fetch and parse the remote CSV data, then utilizes `d3.csvFormat` to calculate the data's size in kilobytes. The layout is styled with CSS, including a centered image and styled heading.

Loading thumbnail…

smiley_ICE4_dhiraj

This example renders a stylized smiley face in an SVG using React 17 and D3 v7. It draws a red face circle with a black stroke, two green eyes, a yellow nose, and a mouth formed by a D3 `arc` path. The mouth arc uses an inner radius of 140, an outer radius of 160, and angles from 5π/2 to 3π, creating a partial smile. All elements are positioned relative to a central point using SVG coordinate transforms, with hardcoded offsets for features.

Loading thumbnail…

DATA VIZ FACE EMOJI

This example renders a stylized emoji face using React and D3 v7, drawing a yellow circle with black strokes for the head, two offset circles for the eyes, and a curved arc for the mouth. The face is centered within an SVG canvas, with the head radius derived from the viewport height to fill the space. The code uses the `arc` generator from D3 to create the mouth path, while React manages the SVG elements and component structure.