S

saijahnaviappineni

@saijahnaviappineni·28 public vizzes

Loading thumbnail…

Bangladesh Info

This example visualizes administrative divisions of Bangladesh, displaying the country’s seven major regions as a purple choropleth map. Each region, when hovered, reveals a tooltip with its name and area in square kilometers, sourced from a local `countryData.json` file. The map is rendered using D3’s `geoMercator` projection and `geoPath` generator, with geographic boundaries parsed from a TopoJSON file via the `topojson` feature function. The visualization supports interactive zooming, implemented through D3’s zoom behavior, and uses SVG elements for rendering.

Loading thumbnail…

World Map

This example presents an interactive orthographic world map that automatically rotates over time. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to render continents and graticules as SVG, with country data from the world-atlas TopoJSON and TSV files. Users can zoom and pan the globe via `d3.zoom`, while hovering over landmasses highlights them in yellow. The rotation is driven by a `d3.timer` that continuously updates the projection’s rotation.

Loading thumbnail…

Tree_ICE-8

This interactive tree diagram visualizes the hierarchical flow of a salary into savings and various expense categories, using a JSON data source. Built with D3 v3, the visualization renders nodes and links as SVG elements, with node types distinguished by color. It incorporates zoom and pan behavior via `d3.behavior.zoom`, along with interactive tooltips and animated updates that reposition nodes and links as the user explores the structure.

Loading thumbnail…

Network_graph_ice_8

This visualization displays a network of friends and their connections, with named nodes grouped into clusters and linked by weighted edges. The graph uses D3 v4’s force layout (`d3.layout.force`) to position nodes, while links are drawn as SVG lines whose stroke width reflects link weight. Node circles and labels are rendered via SVG, with hover effects changing their fill and stroke. Data comes from the included `graphFile.json`, and user interaction is enabled through the force drag behavior (`force.drag`), allowing nodes to be repositioned dynamically.

Loading thumbnail…

Fork of ICE8 network graph

This example visualizes a small directed network graph with seven nodes and six weighted links, using labeled circles to represent entities and lines to show connections. The graph is rendered as SVG and positioned through a force-directed layout, with link stroke widths reflecting each connection’s weight. It relies on the older `d3.layout.force` API from d3.v2 (loaded alongside d3.v4) to simulate physics, while node dragging is enabled via `force.drag`. The data comes from an embedded `graphFile.json` file, and styling uses CSS.

Loading thumbnail…

Fork of Polished World Map

This fork of a polished world map displays country boundaries and graticules on a natural Earth projection, with landmasses rendered as SVG paths. Built with React and D3 v5, the visualization loads world-atlas TopoJSON data via `d3.json` and uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to generate the map. Hovering over a land feature changes its fill to teal. The sphere and graticule paths are styled with gray fills.

Loading thumbnail…

ICE8_worldmap

This visualization displays a world map using a conic equidistant projection, with landmasses, country borders, and graticule lines. The map initially shows oceans in dark blue and land in a neutral state, but hovering over individual land features turns them green, highlighting interactive exploration. Built with React and D3 v5, the code uses `d3.geoConicEquidistant`, `d3.geoPath`, and `d3.geoGraticule` to generate geographic paths. Topojson data from the world-atlas package provides country and land shapes, rendered as SVG elements within a React component structure.

Loading thumbnail…

3D Bar Chart_bonus

This example presents a 3D bar chart visualizing Height, Weight, Age, and BodyFat calculations for specific gender groups. The visualization employs the `d3-x3d` library to render interactive three-dimensional bars within an X3DOM scene, with data loaded from a remote CSV file. The chart is constructed using `d3.x3d.chart.barChartMultiSeries()` and populated by parsing CSV rows with `d3.csv`. The page includes a fixed background image, and the chart dimensions are set via CSS attributes on the chart holder element.

Loading thumbnail…

3D Scatter Plot

This example shows a 3D scatter plot comparing anthropometric measurements—height, weight, age, and body fat—from a CSV dataset. Two overlapping sets of markers display different variable combinations, with semi-transparent circles highlighting the relationships among these dimensions. The visualization uses Plotly's `scatter3d` type through the `Plotly.newPlot` API, while D3's `d3.csv` loads and parses the external data file. A custom layout removes the chart margins to maximize the plotting area.

Loading thumbnail…

3D Bar Chart using D3.js_njii

This example visualizes car manufacturer data for the first six months as a 3D bar chart, with each series grouped by gender and showing values for height, weight, age, and body fat. The chart is rendered using the `d3.x3d` library, which combines D3.js v5 with X3DOM for WebGL-based 3D graphics. Data is loaded asynchronously from a CSV file via `d3.csv`, parsed with a custom row function, and fed into a `barChartMultiSeries` component. The visualization also utilizes D3 scales and axes for layout and quantitative mapping.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This 3D bar chart visualizes car manufacturer sales data for the first six months of a year. The visualization uses the d3-x3d library to render the bars in an interactive 3D space, with data loaded from a CSV file via the `d3.csv` API. The chart employs a multi-series bar layout, grouping months along one axis and manufacturers along another, while the `d3.axisLeft` and `d3.axisBottom` functions generate the chart’s axes. The scene is displayed within an HTML page using the x3dom rendering engine.

Loading thumbnail…

3D Bar Plot

This example displays two sets of three-dimensional scatter points from a CSV file, using colored markers to distinguish between datasets. The visualization leverages the Plotly JavaScript library through the `Plotly.newPlot` function to render an interactive 3D scene. The data is loaded remotely via `d3.csv`, and the visualization employs a scatter3d trace type with configurable marker size, opacity, and line properties. The scene is presented with zero margins to maximize the plotting area, and the renderable is provided through an SVG or web-based rendering approach.

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot animates through the Iris Dataset, cycling the x-axis between Height, Weight, and Age while the y-axis remains Age. Data points are colored by Gender, with circles rendered in SVG and updated every two seconds. The visualization is built using D3 v6, leveraging reusable chart patterns with scaleLinear, axisLeft, axisBottom, and join logic. A legend and axis labels are dynamically appended, and the code demonstrates modular chart composition through the `scatterPlot` factory function.

Loading thumbnail…

Pie ICE - 7

This visualization presents a pie chart depicting Data Scientist job salaries, with each slice sized by salary value and labeled with the corresponding figure in thousands. The chart uses D3 v5 to fetch CSV data from a GitHub gist and render SVG paths via `d3.pie` and `d3.arc`. A legend maps job titles to salary ranges, using D3’s `scaleOrdinal` for color assignment. The interface includes a title and axis formatting via `d3.format`, with all elements drawn using the SVG canvas.

Loading thumbnail…

Area Chart_ice7

This area chart displays the population of Krishna district from 1901 to 2011, using a smooth curved line and a filled area beneath it to emphasize the trend. The visualization is built with D3 v5, loading CSV data from a GitHub gist and rendering as SVG. It uses `d3.scaleTime` for the year axis, `d3.scaleLinear` for population, and `d3.line` and `d3.area` generators with `curveBasis` for the smooth paths. Axis labels and tick marks are styled via CSS, with the area filled in dark pink.

Loading thumbnail…

linechart_ice7

This line chart visualizes the population of Krishna district from 1901 to 2011, with time on the x-axis and population count on the y-axis. It uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to build the axes and the `line` generator to create the path. Data is loaded from a remote CSV via `csv`, and the year is parsed with `timeParse`. The SVG rendering includes grid lines, axis labels, and a violet stroke for the trend line, styled via CSS.

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the relationship between height and weight, with each point colored by gender (male, female, or no gender). Built as a reusable D3 chart component, it alternately animates the x-axis between the two variables every five seconds. The visualization uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` APIs to render axes and circles over an SVG canvas. Data is loaded from a CSV of gender, height, and weight records.

Loading thumbnail…

Reusable D3 Scatter Plot jahn

This animated scatter plot explores the relationships between physical attributes—weight, age, body fat, and height—using a dataset of individuals. It visualizes the data points as colored circles, where orange represents males, blue represents females, and black marks unspecified genders. The chart cycles through different variables on the x-axis at set intervals, while the y-axis remains constant, allowing viewers to see how the distribution shifts across various dimensions. Built with D3, the visualization leverages `csv` for data loading, `scaleLinear` for axes, and the custom `scatterPlot` module to render the SVG and manage the animation.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and petal width to x and y axes while coloring each point by species (setosa, versicolor, or virginica). The visualization uses D3 v6’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the chart, with circles rendered as SVG elements. Data is loaded via `d3.csv` from a GitHub gist, and radii are set to a constant value despite additional sepal measurements being parsed. Axis labels appear rotated for the y-axis, and the full window dimensions define the SVG canvas.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes a weight-and-height dataset for males and females, with each circle colored by gender. An animation cycles the x-axis between the Weight and Height columns every five seconds using `setInterval`. The plot is generated in SVG using D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` module, which leverages `join` for efficient element updates.

Loading thumbnail…

ICE-6: Rendering Marks & Channels with "React & D3"

This example visualizes the salary estimates for the top 10 data scientist job titles using horizontal bars rendered as SVG rectangles. The React component manages state with `useState` and `useEffect`, loading and parsing CSV data via `d3.csv` while the D3 scales (`d3.scaleBand`, `d3.scaleLinear`) compute bar positions. Each bar’s width maps to salary values, with rendered axis ticks and labels. D3 v5 handles the data loading and scaling, while React elements compose the final SVG output within an HTML page that loads both libraries from a CDN.

Loading thumbnail…

ICE 5.js

This example demonstrates loading a CSV file from a GitHub gist and parsing it with d3.csv to display summary statistics—file size in kilobytes, row count, and column count—inside a styled <pre> element. The page uses D3 v7 to fetch and format the data, then updates the DOM via textContent. Below the text, a static inline SVG shows decorative geometric shapes, including ellipses and polygons with varied fill colors. The code explicitly uses d3.csv and d3.csvFormat to handle the data conversion and measurement.

Loading thumbnail…

Fork of Cat smiley

This example shows a stylized cat smiley face built as a static SVG graphic using React and D3 v7. It renders a circular face with eyes, eyebrows, whiskers, ears, and a curved mouth, all positioned relative to a central coordinate system. The code defines several D3 arc generators—`arc` for the mouth, and custom `eyeArc` and `earArc` paths—to create the curved shapes, while circles and lines handle the facial features. The entire composition is drawn inside an `<svg>` element within a React component, with hardcoded dimensions and styling.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A yellow SVG smiley face rendered with React fills a 960-by-500 canvas. It uses two black circles for eyes, a black ellipse for a mouth, and white highlights, plus two short eyebrow lines. Circles, lines, and the stroke attribute define the facial features. The component is built with React elements and rendered via `ReactDOM.render` into the `#root` div, using `react` and `react-dom` from a CDN.

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a smiley face using React and SVG. It shows a yellow circle with a black outline, two eyes, white highlights, angled eyebrows, and a mouth represented by a filled black circle. The drawing uses React's JSX syntax to define SVG elements like `<circle>`, `<line>`, and `<svg>` directly in the component. React 16.9 and ReactDOM render the static graphic into the page without any interaction or animation.

Loading thumbnail…

Fork of homework smiley face

A React-rendered SVG smiley face is drawn with a yellow circular head, black stroke outline, white eyes with green and purple pupils, and a curved mouth created using the `d3.arc` API. Additional black lines form eyebrows, eyelashes, and hair, positioned symmetrically around the center. The visualization uses D3 v7 for the arc path generation and ReactDOM for rendering the SVG elements into the root div. Static, fixed coordinates define all shapes rather than any data-driven layout.

Loading thumbnail…

Fork of Lets make a Smiley part 3: D3js and arcs in SVG

This example renders a smiley face as an SVG graphic using D3.js v6 arcs and React. It draws a large circle for the face, two smaller circles for eyes, and a D3 arc path for the mouth, all positioned with SVG transforms. The code imports the `arc` function from D3 to generate the mouth’s path data with specified inner and outer radii and angular start and end points. The visualization is built with React’s `ReactDOM.render` and uses hardcoded dimensions, with a light blue background set via CSS.

Loading thumbnail…

Fork of Smiley Face Part I

A clown face with a cunning smile is rendered as an SVG using React and D3.js v5. The code constructs the face from D3-generated arc paths for the mouth and cap pieces, along with SVG circles, rectangles, and ellipses for features like eyes, nose, and blush. A React component defines the visualization, which uses static geometry rather than data-driven binding. The fixed dimensions and hardcoded coordinates reveal a hand-authored composition, with transparent fills and stroke styling creating the playful, layered effect.