C

CHANDU BHARGAVI

@BHARGAVICHANDU1·23 public vizzes

Loading thumbnail…

Animal species Tree ICE-8

This interactive tree diagram visualizes animal species classification, showing the hierarchical relationships from "Animals" down to specific groups like mammals, birds, insects, and sponges. The visualization encodes each node with a distinct color based on its taxonomic level, and supports zooming and panning to explore the full structure. The tree layout is computed using a custom `d3.layout.tree()` algorithm, with data loaded from a JSON file and rendered as an SVG using D3.js v3, including tooltips and animated transitions for node expansion.

Loading thumbnail…

Fork of ICE8 USA Map

This fork of the ICE8 USA Map displays a choropleth of U.S. states, each filled with a categorical color from the `d3.scaleOrdinal` / `d3.schemeCategory10` palette and labeled with its name. It uses `d3.geoPath` with the `geoAlbersUsa` projection to render state boundaries from the `us-atlas` states-10m TopoJSON file, with `topojson.feature` extracting the state features. State names are placed at polygon centroids, and hovering turns a state red via CSS.

Loading thumbnail…

ICE8 - Social Network Graph

A social network graph visualizes friendships among eight people as yellow-green circular nodes connected by labeled, arrow-tipped lines. The layout is computed with d3.forceSimulation, applying link, charge, collision, and center forces, while nodes are draggable via d3.drag. Data loads from a JSON file containing node and link arrays, rendered as SVG elements. Hovering highlights a node with a green stroke using CSS class toggling.

Loading thumbnail…

ICE8 - World Map

This visualization presents a static world map rendered with SVG paths. A lime-green sphere outline frames the map, while each country is filled in pink with a subtle black stroke. The code uses D3’s `geoNaturalEarth1` projection and `geoPath` to generate shapes from country boundaries provided by the world-atlas dataset. Countries are loaded as TopoJSON features and appended as individual paths, with styling defined in the accompanying CSS.

Loading thumbnail…

ICE-7 Reusable Scatter Plot

This visualization displays the Iris dataset, plotting sepal length against petal width while distinguishing species through different SVG path symbols. The reusable scatter plot component, built with D3 v6, uses scaleLinear for axes, scaleOrdinal for symbol mapping, and d3.symbol to generate custom point shapes. The code demonstrates a functional chart factory pattern with setters for width, height, data, and margin, invoked via selection.call(). Iris data loads from a CSV file with type coercion applied to numeric columns.

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes the distribution of applicant income among loan applicants, with each slice representing a unique ApplicantIncome value. The chart encodes the data using colored segments, and a legend maps each color to its corresponding income value and Loan_ID. The code loads data from a CSV file using D3’s `csv` function, then applies the `pie` and `arc` layout generators to compute slice geometry, with `scaleOrdinal` assigning colors. SVG rendering is used, and labels are formatted with `format`.

Loading thumbnail…

ICE-7 Area Chart

This example visualizes the cost of sales from 2000 to 2013, showing a smooth line and filled yellow area over time. The chart uses d3.scaleTime and d3.scaleLinear for the x and y axes, with d3.line and d3.area generators enhanced by curveBasis to create the curved paths. Data is loaded from a CSV file and parsed in JavaScript, with axes rendered using d3.axisBottom and d3.axisLeft, and the SVG output is positioned within margins.

Loading thumbnail…

ICE-7 Line Chart

This chart displays the cost of sales from 2000 to 2013, using a single red line to show the trend over time. It loads CSV data from a GitHub Gist and renders the visualization as an SVG. The code leverages D3 v5’s `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom` APIs to build the chart, with labelled axes and a title. The line path is generated using `d3.line` and the data is parsed so that years become Date objects.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays a centered "Hello HTML!" message using CSS for styling and JavaScript for structure. It serves as a bare-bones foundation for building interactive visualizations, contrasting with the React-based starter. The code relies on standard HTML elements, inline CSS properties such as `font-size` and `text-align`, and a simple `<div>` container. No external libraries or data sources are involved, making it a pure, self-contained starting point for web development experiments.

Loading thumbnail…

Fork of Nikita's Pie Chart

This example visualizes loan data from a CSV file as a pie chart, with each slice representing a loan’s ApplicantIncome and colored by its Loan_ID. A legend lists the Loan_IDs along with their associated rating points. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate SVG paths, `d3.scaleOrdinal` for colors, and `d3.format` for tick labels. Data is loaded asynchronously via `d3.csv`.

Loading thumbnail…

Fork of Marks and Channels

Five small multiples panels illustrate core D3 marks and channels. Each panel encodes the same five-value array through a different visual variable: x position, y position, size, length (bar height), shape (using `d3.symbol` and `symbolsFill`), and hue (using `schemeCategory10`). The `viz.js` file binds an array of functions to SVG elements via `selection.join`, applying each function to render its panel in separate SVG containers.

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The code uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the quantitative fields, while circles are rendered via SVG with hardcoded colors. Axis labels and a title are added as text elements, and the visualization fills the browser window using `window.innerWidth` and `innerHeight`.

Loading thumbnail…

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

This example renders a horizontal bar chart of the ApplicantIncome for the first fifteen Loan IDs from a CSV hosted on GitHub. The visualization is built with React and D3 v5, using D3's `scaleBand` and `scaleLinear` for axes and `csv` for data loading. It renders SVG directly through React, with pink rounded rectangles as marks and custom grid lines and tick labels.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays a centered "Hello HTML!" message using CSS for styling and JavaScript for structure. It serves as a bare-bones foundation for building interactive visualizations, contrasting with the React-based starter. The code relies on standard HTML elements, inline CSS properties such as `font-size` and `text-align`, and a simple `<div>` container. No external libraries or data sources are involved, making it a pure, self-contained starting point for web development experiments.

Loading thumbnail…

Fork of React + D3 Viz Starter

This example displays a minimal blank SVG canvas with visible margins, created using React and D3 v6. It uses the `VizContainer` component to abstract the SVG and group elements, following a margin convention. The `showMargins` prop highlights the plotting area boundaries. The code loads React, ReactDOM, and D3 via CDN links and sets up dimensions and margin variables for a 960×500 viewport.

Loading thumbnail…

Fork of Hello VizHub

This example loads a CSV file containing customer loan details from a GitHub gist and displays basic metadata about the dataset, including file size in kilobytes, row count, and column count. The page presents a clickable link to view the raw data, alongside a stylized background image. It uses D3 version 5 and 7 via CDN, calling `d3.csv` to fetch the data and `d3.csvFormat` to calculate the data length. The metadata is rendered into a `<pre>` element with large, bold text.

Loading thumbnail…

ICE-5

This example displays a concise summary of the metadata for a CSV file containing customer loan details. It reports the file size in kilobytes, the number of rows, and the number of columns directly onto the page. The visualization uses d3.csv to fetch the data and d3.csvFormat and string concatenation to compute the metrics. Results are written as plain text into a pre element using the standard Document Object Model.

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a stylized smiley face using React and D3 v7. It constructs SVG shapes—circles, ellipses, lines, and arcs—within a responsive full-window viewport, centering the face and dynamically sizing the head based on window height. The code explicitly uses D3’s `arc()` generator to form the mouth and eye-arc details, while React manages the SVG element hierarchy and attributes. Eyes include colored irises, eyebrows as thick lines, and decorative geometric accents, all positioned relative to the center. The face is drawn entirely with vector primitives, with no external data source, showcasing how D3 geometry helpers integrate with React’s declarative rendering model.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiley face using React and D3, drawing a yellow circle with two eyes and a curved mouth as SVG elements. The code defines the face’s geometry with constants for radius, offsets, and stroke width, then uses the `arc` generator from `d3` to create the mouth path. React manages the SVG structure, while D3 handles the mouth’s arc shape. The visualization is static, relying on hardcoded dimensions for a 960×500 canvas rather than external data.

Loading thumbnail…

Fork of homework smiley face

This example renders a stylized smiley face entirely with SVG shapes, constructed using React for the component structure and D3’s `arc` generator to define the mouth’s curved path. The face consists of a large white circle with a thick black stroke, two detailed eyes with green pupils and purple irises, a set of black line-based facial features (including eyebrows and a nose), and a mouth arc drawn via `d3.arc()`. All elements are positioned relative to a central point using a translated `<g>` group. The visualization is a static, decorative illustration rather than a data-driven graphic, with dimensions fixed at 960 by 500 pixels.

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

A React and D3 v7 composition builds a smiling face, showing how reusable SVG components combine through props. The `Face`, `Eyes`, `Mouth`, and `Teeth` components use D3's `arc()` generator to create concentric shapes, while a `linearGradient` fills the background circle in green-to-yellow. A static set of line elements renders teeth, with prop-driven dimensions controlling eye radius, mouth width, and offsets.

Loading thumbnail…

Fork of Cat smiley

This example renders a stylized cat smiley face using React and SVG, with all shapes drawn through D3’s `arc()` generator for the mouth, eyes, and ears. The face consists of layered circles, ellipses, and colored lines that form whiskers, eyebrows, and pupils, all composed with hard-coded coordinates and transforms. The code imports React, ReactDOM, and D3’s `arc` API, and uses SVG elements like `<path>`, `<circle>`, and `<ellipse>` to construct the static illustration. No interactive behavior or data binding is included; the visualization is purely a declarative graphic built from fixed geometry.

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face rendered as a single SVG graphic, composed of a yellow circle for the head, two black eyes, and an arc-shaped mouth. The visualization is built with React and D3 v5, using the `arc` API to generate the mouth's path. All elements are positioned relative to a central transform, with fixed offsets for the eyes and mouth radius, and the head is drawn with an explicit `stroke` and `stroke-width`. The code demonstrates declarative SVG construction within a React component.