C

ChandrashekharRamamuthi

@ChandrashekharRamamuthi·21 public vizzes

Loading thumbnail…

Social Network graph to show Co releation

This example uses a D3.js force-directed layout to visualize the relationships between Tamil movie heroes, where circle nodes represent actors and connecting lines show their co-relations with varying thickness based on a weight value. The graph reads from a data.json file, using d3.layout.force (an older D3 v4 API) to apply gravity, distance, and charge physics for node positioning. The SVG rendering supports interactive node dragging, with the code styling circles, links, and text labels to display actor names and connection weights.

Loading thumbnail…

Kenndy Tree ICE-8

This interactive family tree visualizes the Kennedy lineage using a node-link diagram created with D3.js. Clicking a node triggers a smooth animated transition, expanding or collapsing its children using D3's layout and SVG path interpolation. The data is hardcoded in the `treeData` JSON array, and the visualization uses custom circle and text styling with blue links.

Loading thumbnail…

Fork of World_Map_ICE_8_2

This interactive map displays the United States with a focus on state boundaries, rendered in SVG with a clean, minimal style. The example lets users toggle between different geographic scales—states, counties, or world countries—by fetching TopoJSON data from the us-atlas and world-atlas CDNs. Built with React and D3 v5, it uses `d3.geoAlbersUsa` and `d3.geoNaturalEarth1` projections with `d3.geoPath` to draw the shapes, clearing and redrawing the SVG when the map type changes.

Loading thumbnail…

Fork of World_Map_ICE_8_2

This example renders a world map using the Eckert III projection, showing country boundaries as simple white-filled polygons with black outlines on a gray background. The visualization is built with React, which manages state and fetches GeoJSON country data from a CDN-hosted world atlas. D3.js version 5 handles the map projection and drawing through the `geoNaturalEarth1` and `geoPath` APIs, while the TopoJSON client converts the raw data into geographic features. The SVG output is styled with the Poppins font and presented in a fixed 900×500 viewport.

Loading thumbnail…

World_Map_ICE_8

This example displays an interactive world map using the Eckert III projection, rendered as an SVG with React and D3 v5. It fetches geographic data from the world-atlas TopoJSON file and uses `d3.geoNaturalEarth1` with `fitSize` to project the map, while `d3.geoPath` draws the country boundaries. The code also includes support for switching to a U.S. counties view, using `d3.geoAlbersUsa` and the us-atlas dataset, though only the world map is activated by default.

Loading thumbnail…

ICE-7 Reusable scatter plot with different symbol

This example presents a reusable D3.js scatter plot that visualizes the Iris dataset, encoding species type through both color and distinct symbols. The chart plots petal width against sepal length, with each data point rendered as an SVG path using `d3.symbol` for the shapes and `d3.scaleOrdinal` for color mapping. The code demonstrates a reusable chart pattern through a `scatterPlot` function that accepts configuration via getter-setter methods, applying `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` for annotations.

Loading thumbnail…

Chandrashekhar Ramamurthi Line Chart

This line chart displays United Nations population density data by region from 2000 to 2015. The visualization uses a time-scaled x-axis for the year and a linear y-axis for population density values, with a line path connecting the data points. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` functions to generate the SVG rendering, while loading the dataset via `csv` from a GitHub Gist.

Loading thumbnail…

Chandrashekhar Ramamurthi Pie chart

This example visualizes credit card limit data for ICE 07 across U.S. states using a pie chart, with each slice labeled by its value in thousands and accompanied by a color-coded legend. The chart is rendered in SVG using D3 v5, leveraging the `pie` and `arc` layout generators to compute slice geometry. Slice colors are assigned via `scaleOrdinal` from a hardcoded array, and data is loaded asynchronously from a raw GitHub CSV file using `d3.csv`. The visualization also employs `format` for tick label formatting and custom legend groups for readability.

Loading thumbnail…

Chandrashekhar Ramamurthi ICE-7 Reusable scatter plot

This reusable scatter plot, built with D3, visualizes the Iris dataset, mapping petal width against sepal length. Each of the 150 data points is rendered as a distinct symbol, colored red, green, or blue according to its species. The implementation uses D3's linear and ordinal scales to map data to axes and symbols, with axes generated via `axisLeft` and `axisBottom`. The plot’s dimensions adapt to the window size, and data is loaded from a CSV file hosted on GitHub.

Loading thumbnail…

ICE-6

A horizontal bar chart displays the credit limits of the first twenty clients from a CSV dataset, with each client identified by their CLIENTNUM on the y-axis. The chart uses React with D3 v5, employing d3.csv for data loading, scaleBand for the categorical y-axis, and scaleLinear for the numeric x-axis. SVG rectangles render the bars, while custom AxisLeft and AxisBottom components provide tick labels and grid lines. The visualization focuses on comparing credit limits across individual clients.

Loading thumbnail…

Penguin Data set scatter Plot

A scatter plot displays the relationship between penguin flipper length and body mass, with points colored by species: blue for Adelie, red for Chinstrap, and yellow for Gentoo. The D3 v5 code loads CSV data via `d3.csv`, scales positions with `scaleLinear`, and renders SVG circles. Axes are generated using `axisLeft` and `axisBottom`, with custom font styling and axis labels for clarity.

Loading thumbnail…

ICE-6-Chandrashekhar

This interactive scatterplot visualizes the Iris flower dataset, mapping sepal length and width for three species. The visualization uses a jittered strip plot layout where each species is separated along the x-axis using a band scale, with random horizontal offsets applied to individual data points. The code leverages React for component structure, D3 scales (scaleLinear, scaleBand, scaleOrdinal) for positioning and coloring, and SVG circles for rendering. Hovering over any point reveals its exact sepal length value through a native SVG title tooltip.

Loading thumbnail…

BarChart-CE-6

This example displays a placeholder message, "Hello", alongside the text "package.json", rendered inside a single HTML page. The React app, defined in `index.js`, uses the `select` function from D3 and ReactDOM to create a DOM element and mount the `App` component. The component returns a `div` with a styled message and a `<pre>` tag. The page loads `styles.css` for presentation, but no chart, data, or visualization logic is implemented in the provided files.

Loading thumbnail…

ICE-6

The visualization displays the credit limit for ten clients as a horizontal bar chart. Each bar’s length encodes the `Credit_Limit` value, with clients listed on the y-axis. The chart is built with React and D3 v5, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numerical x-axis. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering is generated manually with React elements.

Loading thumbnail…

Fork of ICE-6

This example displays a bar chart of the top 10 credit card clients by credit limit, rendered as SVG rectangles. The code uses React for component structure and D3 v5 scales (`scaleBand`, `scaleLinear`) and the `csv` loader to fetch data from a GitHub-hosted CSV file. Axes are drawn as custom React components, with the bottom axis using `xScale.ticks()` and the left axis mapping categorical client numbers. The chart intentionally omits axis labels and titles, showing raw values with minimal styling.

Loading thumbnail…

ice-5

This example displays credit card dataset metadata in a web page, showing the computed size of the CSV in kilobytes, the row count, and the column count from a remote CSV file loaded via `d3.csv`. The page uses D3 version 7 to fetch and parse the data from GitHub, then presents the summary text within a `pre` element. The visualization also incorporates a background SVG image and a hyperlink for viewers to access the original dataset.

Loading thumbnail…

ICE-5

This example displays credit card information by loading a CSV dataset from a GitHub gist and reporting its size in kilobytes. The page uses D3 version 7 to fetch the data with `d3.csv`, format it with `d3.csvFormat`, and display a summary message in a `<pre>` element. The visualization is minimal, showing only the dataset's metadata rather than a graphical chart.

Loading thumbnail…

ice-5

This example displays a page that reports the size of a credit card customer dataset. It loads a CSV file from a GitHub gist using `d3.csv`, then measures the formatted data’s size in kilobytes with `d3.csvFormat` and `Math.round`. The result is written into a `<pre>` element via `textContent`. The page uses D3 v3 and a basic HTML/CSS layout, but does not render any charts or visualizations.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that renders the text “Hello HTML!” in large, centered type using CSS. The page consists of a single `<div>` element styled with a 13em font size and text alignment, while no JavaScript or data processing is involved. The code relies on plain HTML and CSS, with the styling defined inline within the page’s `<head>` section. It serves as a basic template for understanding how structure and presentation combine without external libraries or frameworks.

Loading thumbnail…

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

An animated smiley face with moving eyebrows, rendered as SVG via D3.js, demonstrates fundamental DOM manipulation. The face is built using basic D3 shapes—circles, rectangles, and an arc-generated mouth—positioned within a centered group. The eyebrows transition vertically through chained `transition().duration()` calls, creating a repeating bobbing effect. Additional elements include ears, hair, and teeth, all styled with simple fill and stroke attributes. The code imports `select` and `arc` from D3 v5 to construct the geometric components and drive the animation.

Loading thumbnail…

ICE-4

A green smiley face animates by moving its rectangular eyebrows up and down. The demo shows fundamental DOM manipulation with D3.js v5, using `d3.select` and `d3.append` to build SVG circles, rectangles, and paths. The eyebrows transition vertically via `transition().duration(2000)` chained calls. The mouth is drawn with the `d3.arc` generator. The animation runs continuously, shifting the eyebrows between two Y-offsets over two-second intervals.