S

ShishiraRudrabhatla

@ShishiraRudrabhatla·40 public vizzes

Loading thumbnail…

ICE - 8 Singapore Topojson using d3

This example visualizes a choropleth map of Singapore’s planning areas using a TopoJSON dataset loaded from a GitHub gist. It renders the map as SVG paths with a blue fill and yellow hover highlighting, using a Mercator projection fitted to the viewport. The code employs `d3.geoMercator`, `d3.geoPath`, and `topojson.feature` to convert the TopoJSON data into drawable paths, while `d3.zoom` enables pan and zoom interactions with configurable scale and translate extents. The visualization runs entirely in the browser with D3 v6 and the d3-geo-projection module.

Loading thumbnail…

ICE-8 Social Network Graph

This example displays a small social network of ten named individuals, with nodes colored by group and edges weighted by connection strength. It uses D3 v4’s `d3.layout.force()` to simulate the layout, rendering nodes as green circles with labels and links as red lines. The graph supports dragging via `force.drag`, and loads its node and link data from a local `socialnetwork.json` file.

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree of carnivores visualizes hierarchical data using D3.js v3. The diagram displays animal classifications, from the root "Carnivores" through "Dog or Canine family" to specific species, with nodes colored by type. The visualization allows panning and zooming through the `d3.behavior.zoom` API, and clicking nodes to expand or collapse branches. JSON data from `familytree.json` drives the layout, rendered as SVG rectangles with `foreignObject` text elements and animated transitions.

Loading thumbnail…

ICE-8 World Map Using d3

This example displays a world map using a natural Earth projection, rendering countries as SVG paths with a light green fill and black strokes. Countries highlight in yellow on hover. The visualization loads GeoJSON data from the world-atlas package, converts TopoJSON to GeoJSON using `topojson.feature`, and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. The code imports these modules from `d3` and uses `d3.select` to append paths to the SVG.

Loading thumbnail…

Bonus ICE - 3D Bar chart

This 3D bar chart displays crop production sales across eight districts of Telangana, with each crop category (such as Banana, Rice, and Sugarcane) shown along the x-axis, production values in acres on the y-axis, and district names on the z-axis. The visualization uses Highcharts with its 3D module to render the extruded columns, integrating jQuery for chart initialization. The data is hardcoded in arrays, and the chart includes configured 3D perspective angles, depth, and centered margins to enhance the spatial layout. The chart’s title and axis labels are styled in blue, with a red caption crediting the author.

Loading thumbnail…

Bonus ICE Scatter plot using D3.js

This example shows a 3D scatter plot of agricultural data, plotting two distinct traces that map crop production and area against district names and seasons. The visualization uses Plotly’s `scatter3d` type within a single `Plotly.newPlot` call, while D3.js loads the CSV dataset via `d3.csv`. The first trace uses crop, production, and district as x, y, and z coordinates, while the second uses crop year, season, and area, with markers styled by opacity, size, and color.

Loading thumbnail…

Untitled

A bar chart demonstrates D3.js SVG rendering with a drop-shadow filter and animated axes. The code builds an ordinal x-scale and linear y-scale from sales data, appending SVG groups with rectangles and axis labels. Mouse-driven transitions adjust the chart's visual state, while jQuery handles container sizing. The example imports D3 locally via `d3.v2` and uses standard SVG elements for the visualization.

Loading thumbnail…

Fork of Bar chart with a Sequential color scale

This bar chart displays the average horsepower for seven car brands, sorted from lowest to highest, with each bar colored according to a sequential red color scale that encodes the horsepower value. The visualization loads data from a CSV file using d3.csv, binds it to SVG rectangles, and uses d3.scaleBand, d3.scaleLinear, and d3.scaleQuantize for positioning and color mapping. Interactive tooltips appear on mouseover, while d3.legendColor adds a legend, and axes are rendered with d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example shows car manufacturer sales data for the first six months of the year in an interactive 3D bar chart. The visualization displays multi-series data with each manufacturer represented by a group of bars for January through June, using the `d3.x3d` library to render the scene in X3D. The code loads CSV data asynchronously via `d3.csv`, parses rows into a multi-series format, and attaches the dataset to a chart component built with `d3.x3d.chart.barChartMultiSeries()`. Styling and interaction rely on D3 v5 selection and layout APIs, with the 3D output rendered through the x3dom framework.

Loading thumbnail…

ICE 7 Area chart Crop production

This area chart visualizes crop production across different years, with the x-axis encoding the crop year and the y-axis encoding production quantity. The chart uses a solid dark green fill for the area, and hovering over the visualization displays a tooltip showing the associated area name for that crop. The code leverages the vega-lite-api to construct the chart, with data loaded asynchronously from a CSV file via d3.csv. The visualization is customized through a separate config object, and the chart automatically fits the full window size.

Loading thumbnail…

ICE-7 Line chart covid death analysis

This line chart visualizes COVID-19 death counts over time, using a blue-to-yellow gradient stroke to encode the trend. The chart includes labeled axes for months and deaths, with interactive hover capabilities that display the exact death value at any point via a moving circle and text label. Built with D3.js v4, the visualization reads CSV data from a GitHub gist, parses dates using `d3.timeParse`, and renders an SVG with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and event listeners for mouse interactions.

Loading thumbnail…

Fork of Fork of A week in San Francisco - Line chart

This line chart visualizes COVID-19 deaths in San Francisco over time, with the area under the curve filled in maroon. Built with D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` with `curveBasis` for the filled path, and renders as an SVG. Interactive mouseover events trigger a bisector search to display the death count near the cursor. Data is loaded from a CSV file and parsed as dates and numbers.

Loading thumbnail…

Fork of A week in San Francisco - Line chart

This visualization displays a line chart of temperature in San Francisco over time, with the title “Temperature in San Francisco” and labeled axes for time and temperature. The chart uses D3 v5, leveraging `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and `d3.axisBottom`/`d3.axisLeft` to render gridlines and axes in SVG. Data is loaded from a CSV file via `d3.csv` and parsed into date and numeric values. The line is styled with a maroon stroke, and tick labels are enlarged for readability.

Loading thumbnail…

ICE_7 Yearwise Crop Production in Andhra Pradesh

This visualization displays year-wise crop production across districts in Andhra Pradesh, with each circle representing a crop year and colored by district. The data originates from the UCI Machine Learning Repository via a CSV file loaded using d3.csv. The visualization is built with vega-lite-api, encoding crop year on the x-axis, production on the y-axis, district as color, and crop type as tooltip. The rendering uses vega-lite and vega with SVG output, configured with custom axis styling and font sizes for improved readability.

Loading thumbnail…

Fork of ICE_7 Cars horsepower and miles per gallon(mpg)

This visualization displays the relationship between crop year and production, with district names available through tooltips. The scatter plot uses circle marks with encoded x and y positional fields from the data. Built with vega-lite-api, the code registers vega and vega-lite, applies a custom configuration for axis styling and label colors, and fetches data from a CSV using d3.csv. The visualization renders to SVG, with autosizing based on window dimensions and tooltip functionality provided through vega-tooltip.

Loading thumbnail…

Andhra Pradesh Wheat Crop Production

A donut chart displays wheat crop production across ten districts in Andhra Pradesh, with each slice sized by production value. The visualization uses D3 v4’s `d3.arc`, `d3.pie`, and `d3.scaleOrdinal` with the `schemeCategory10` color palette, rendered as SVG. Hover interactions adjust slice opacity and show a tooltip with district name and value, while a legend is built separately. Data originates from a CSV loaded via D3’s `csv` method within a React component using hooks.

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

A pie chart displays the total runs scored by ten top cricketers, with each slice sized proportionally to a player's career run total and labeled in a legend with player names and formatted values. The visualization loads data from a JSON file, then uses d3.pie to compute arc segments and d3.arc with an innerRadius of zero to render full circle slices. d3.scaleOrdinal applies the category color scheme, while SVG paths and legend rectangles are generated via d3.select and data joins.

Loading thumbnail…

ICE_7 Cars horsepower and miles per gallon(mpg)

This scatter plot visualizes the relationship between horsepower and miles per gallon for various car models, with each point colored by the car’s origin and sized by its weight. The visualization is built using the Vega-Lite API, which constructs the chart specification in `viz.js`, while the data is loaded via `d3.csv` from a Gist derived from the UCI Auto MPG dataset. The rendering pipeline registers Vega and Vega-Lite, applies a custom config for axis and label styling, and adds interactive tooltips through the Vega-Tooltip handler.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower, miles per gallon, and vehicle weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. A scatter plot uses circle marks, with color encoding vehicle origin and size encoding weight, while tooltips reveal the car model name. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite, and includes a custom configuration to style axes and labels. Data is loaded asynchronously with d3.csv, and the chart canvas fills the browser window.

Loading thumbnail…

Car Sales Dateset

This scatter plot displays the relationship between kilometers driven and selling price for used cars, with points colored by ownership status (first, second, third, or other owner). The visualization uses D3.js v6 with SVG rendering, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and `csv` to load the CarDetails dataset. Circle elements are appended with varying fill colors and opacity to distinguish ownership categories, while labeled axes indicate mileage in thousands of kilometers and selling price in millions of Indian rupees.

Loading thumbnail…

ICE - 7 Pie Chart

A pie chart visualizes the top 10 countries by deaths from air pollution in 2020. Each slice’s size corresponds to the death count, with labels showing values in thousands. The visualization uses D3.js (v5) to fetch CSV data, compute pie arcs, and render an SVG. It employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for coloring, alongside custom legend rendering with rectangles and text.

Loading thumbnail…

ICE-6 Scatter Plot using Iris datset

This visualization displays the Iris dataset in a scatter plot, showing the relationship between petal length (x-axis) and petal width (y-axis) for three flower species, which are color-coded red, green, and blue. The D3 v6 code loads CSV data from a GitHub gist, uses `scaleLinear` and `extent` to map the numeric ranges, and renders SVG circles with `selectAll` and `join`. Axis labels are added via `axisLeft` and `axisBottom`, with custom text elements for axis titles.

Loading thumbnail…

ICE-6 Rendering Marks and Channels with React & D3

A horizontal bar chart displays revenue for ten cosmetic products, with purple bars and blue axes on an SVG canvas. React manages the state and rendering loop, while D3 v5 functions (`csv`, `scaleBand`, `scaleLinear`, `max`) load the CSV data and compute scales. D3's `csv` fetches the data from a GitHub Gist URL, and the chart maps product names to y-axis positions and revenue values to bar widths.

Loading thumbnail…

ICE-6 Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of 2019 telecom sale charges for the top 10 countries by population, rendered as purple SVG rectangles. It uses React hooks (`useState`, `useEffect`) to load and parse CSV data from a GitHub gist via `d3.csv`, then maps the values to a `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart includes custom grid lines and tick labels generated from the scales, with the bars positioned through React’s JSX and D3’s scale functions.

Loading thumbnail…

ICE-6 Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of 2019 telecom sale charges for the top 10 countries by population, rendered as purple SVG rectangles. It uses React hooks (`useState`, `useEffect`) to load and parse CSV data from a GitHub gist via `d3.csv`, then maps the values to a `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart includes custom grid lines and tick labels generated from the scales, with the bars positioned through React’s JSX and D3’s scale functions.

Loading thumbnail…

ICE-6 Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of 2019 telecom sale charges for the top 10 countries by population, rendered as purple SVG rectangles. It uses React hooks (`useState`, `useEffect`) to load and parse CSV data from a GitHub gist via `d3.csv`, then maps the values to a `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart includes custom grid lines and tick labels generated from the scales, with the bars positioned through React’s JSX and D3’s scale functions.

Loading thumbnail…

ICE_5 Loading and Parsing CSV data with D3.js

This example demonstrates loading and parsing CSV data using D3.js's `d3.csv` API, displaying a summary message within an HTML page styled with CSS. The visualization shows the data file's size, row count, and column count in a `<pre>` element, while also embedding an SVG image of fruits fetched from a separate URL. The page links to the original fruits.csv dataset hosted on GitHub Gist, with the D3.js v7 library loaded via a CDN. The rendering relies on SVG and CSS for visual layout, with no interactive charting involved.

Loading thumbnail…

Fork of ICE-5: Welcome to ICE-5 Data visualization

This example displays a welcome message for the ICE-5 Data visualization, which presents summary statistics about a dataset of the top 100 actors. The page shows a static SVG image and a large, styled header, while the data insights appear in a monospace element. It uses D3 v7’s `d3.csv` and `d3.csvFormat` to fetch and analyze a CSV file from a GitHub gist, calculating the data size in kilobytes, row count, and column count. The layout is styled with custom CSS for the header and message container.

Loading thumbnail…

ICE_5 Loading and Parsing CSV data with D3.js

This example demonstrates how to load and parse a CSV dataset from a remote URL using D3.js and JavaScript. The visualization renders a static SVG image of fruits as a background, while the page introduces basic CSS styling and SVG embedding. The code fetches the fruits.csv dataset via a hyperlink and uses standard JavaScript to handle the data. The HTML page combines external CSS for text formatting and color schemes, with an inline SVG element containing an embedded base64-encoded JPEG image. The React framework is referenced for setup, though the primary implementation relies on plain HTML, CSS, and JavaScript with D3.js for data handling.

Loading thumbnail…

Make a Face with D3 Format

This example presents a stylized, cartoon-like face constructed entirely with D3 and React, where each facial feature is a distinct geometric primitive. The application uses `d3.arc()` to define and render the curved mouth and eyes, alongside SVG `circle`, `ellipse`, and `line` elements for the head, pupils, and expressive eyebrows. The code sets up a fixed 960x500 SVG canvas, and the face is centered using a `transform` translation. It demonstrates how to mix D3's path generation with React's component-based markup to create a playful vector illustration, with hardcoded coordinates rather than external data.

Loading thumbnail…

Fork of Smiley face pt. 2

This example shows a stylized smiley face composed of SVG shapes, including a yellow circle, two eyes, and a mouth arc, alongside red polygons and thick polylines that add abstract decorations. The visualization is built using React and D3 v7, with the mouth created via `d3.arc()` to generate a curved path. All elements are rendered inside an SVG container, positioned relative to a central transformation, while additional shapes are placed at fixed coordinates.

Loading thumbnail…

Fork of Rabbitface with D3.js

This visualization shows a smiling rabbit face with animated eyebrows. The face is constructed using basic SVG shapes—circles for the head and eyes, rectangles for eyebrows and teeth, and a D3 arc path for the mouth. Using d3-selection, the code appends these elements to an SVG canvas. A chained `transition()` with a two-second duration moves the eyebrows upward, changes their fill color to red, then moves them back to their original position with black fill. The D3 library version is v5, and all shapes are centered within a 960x500 SVG.

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is drawn to fill the browser window, with two black circular eyes and a thick black outline. The face’s size and position adapt to the viewport’s dimensions. The implementation uses React to render SVG elements, calculating coordinates and radii from `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of a smiley face visualization shows a yellow circle with a black outline, flanked by two smaller black circles positioned as eyes. The scene is rendered as static SVG shapes, with a face that is incomplete, missing a mouth. The underlying code uses raw SVG elements—circle tags with explicit coordinates and styling—set within an HTML body, with the y-coordinates calculated to center the face vertically. No animation or interaction is present; it is a fixed, half-finished portrait.

Loading thumbnail…

Fork of making face

A fork of a "making face" example renders a single large circle in an SVG canvas, initially populated with no data or interaction. Built with React and D3, the code selects the SVG element and appends a circle with a fixed radius of 200 units via D3's selection and attribute methods. The visualization is minimal, showing only this geometric shape against a black background, with no animation, axes, or data source evident. The rendering relies on D3's DOM manipulation within a React component structure.

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of a smiley face visualization shows a yellow circle with a black outline, flanked by two smaller black circles positioned as eyes. The scene is rendered as static SVG shapes, with a face that is incomplete, missing a mouth. The underlying code uses raw SVG elements—circle tags with explicit coordinates and styling—set within an HTML body, with the y-coordinates calculated to center the face vertically. No animation or interaction is present; it is a fixed, half-finished portrait.

Loading thumbnail…

Fork of D3 Face Making

A smiling yellow face is drawn in SVG with D3 v5, featuring circular eyes and a curved mouth built from an arc path. Brows animate by moving downward and upward over two successive two-second transitions, each triggered via `transition.duration` on a group. The code constructs the face using `d3.select`, `d3.arc`, and positioned groups, with coordinates calculated from the SVG’s height and width. A static yellow background circle with a black stroke forms the head, while all shapes are appended directly to the SVG.

Loading thumbnail…

Fork of Cat smiley

This example uses React and D3 v7 to render a cat-themed smiley face as an SVG. The code constructs the face from basic shapes: a pink circle for the head with a purple border, red eyes with white highlights, an orange ellipse nose, and a black mouth drawn using D3’s `arc` generator. Additional D3 `arc` paths create white eye crescents and purple ears, while colored lines suggest whiskers. All elements are positioned with explicit coordinates and transforms, with no external data source, purely illustrating geometric composition and D3 arc-based path generation.

Loading thumbnail…

Fork of homework smiley face

This example renders a stylized smiley face as a static SVG graphic. The face is drawn using React components and D3’s `arc` generator to create the mouth and eye shapes, with additional circles, ellipses, and lines forming the eyes, pupils, eyebrows, and decorative features. The code sets explicit pixel dimensions and positions for all elements, using a yellow circle with a red stroke for the head and purple lines for the brows. The visualization demonstrates a simple composition of primitive shapes in a React‑D3 integration, with no interactive or data-driven behavior.

Loading thumbnail…

Fork of Smiley Face Part I

A smiley face rendered with SVG shows only the upper half of its features: two eyes and the top edge of an open mouth. The face is drawn as an orange circle with a black outline, centered on a 960x500 canvas, with all shapes positioned relative to the center using a translate transform. The code uses React to create the SVG elements and d3.arc to generate the mouth path, which spans from 120 to 240 degrees with an inner radius of 140 and a stroke width of 20. The eyes are simple circles offset symmetrically from the center.