Skip to main content
Log in
R

RohithReddy-thoughts

@RohithReddy-thoughts·16 public vizzes

Loading thumbnail…

Graph Example: ICE-8

This example shows a force-directed network of 13 people connected by weighted links, with node colors and labels identifying individuals. It renders as an SVG using React and D3 v2, loading data from a local `graph.json` file. The code uses `d3.layout.force` to simulate the layout, with link stroke widths scaled by the square root of each link’s weight, and enables dragging of nodes via `force.drag`.

Apr 5, 2022
Loading thumbnail…

Tree Example: ICE-8

This example visualizes a family tree for the Reddy lineage, with each node representing a person and colored links and text arranged hierarchically. It uses the D3.js library (version 3.5.17) to create an SVG-based tree layout, where the `d3.layout.tree` computes positions and `d3.svg.diagonal` draws smooth Bézier curves for the connections. Node circles and text are styled via CSS, and the `type` and `level` properties in the JSON data control stroke and fill colors. The rendering includes animated transitions when the tree updates.

Apr 5, 2022
Loading thumbnail…

India Map: ICE-8

This visualization renders a choropleth map of Indian states using a geoMercator projection. It loads TopoJSON data from a remote GitHub repository and converts it to GeoJSON with the topojson `feature` method, then draws each state as an SVG path using `d3.geoPath`. A categorical `scaleOrdinal` with `schemeCategory10` assigns colors to states. State names appear as SVG text elements positioned at path centroids via `pathGenerator.centroid`. The code uses D3 v5 selection methods like `selectAll` and `enter`/`append`, with a React-based bundle.

Apr 5, 2022
Loading thumbnail…

World Map : ICE-8

This example presents a world map using the natural Earth projection. Countries are rendered as green filled paths from a world-atlas GeoJSON dataset, while the sphere background is light blue. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to convert geometry into SVG paths, with the topojson library’s feature function to extract country features. The map is styled with CSS classes, including semi-transparent gray country borders.

Apr 5, 2022
Loading thumbnail…

ICE - 7 Reusable Scatter Plot

This visualization cycles through the Iris dataset, automatically animating between scatter plots that map each of the four flower measurements to the x-axis while keeping sepal length on the y-axis. The code uses a reusable D3 scatterPlot function with scaleLinear, axisLeft, and axisBottom to render axes, while each data point is drawn as a circle colored by species. A setInterval updates the x-value mapping every 1.9 seconds, with the axis labels updating accordingly. The visualization uses D3’s csv loader and SVG rendering to display the data.

Mar 29, 2022
Loading thumbnail…

ICE - 7 Pie Chart

A pie chart visualizes the top 10 countries by reported COVID-19 cases, with each slice colored and labeled via an adjacent legend. The chart uses D3 v5 to load CSV data, compute arc paths with `d3.arc()`, and render SVG elements. Colors are assigned through `d3.scaleOrdinal`, while numeric values are formatted with `d3.format`. The legend pairs colored rectangles with country names and abbreviated case counts, all positioned within an SVG canvas.

Mar 29, 2022
Loading thumbnail…

ICE - 7 Area Chart

This area chart tracks the daily count of COVID-19 cases in Texas across 2020, using a smooth curve to show the trend over months. The visualization combines a blue line with a semi-transparent salmon fill beneath it, while labeled axes display months on the x-axis and case counts on the y-axis. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` to create the smooth path, and `axisBottom`/`axisLeft` gridlines. Data is loaded from a CSV file via `csv` and rendered as SVG.

Mar 29, 2022
Loading thumbnail…

ICE - 7 Line Chart

This chart displays the number of COVID-19 cases in Texas throughout 2020, with time on the x-axis and case counts on the y-axis. Built with React and D3 v7, it loads CSV data from a gist, sorts it by date, and renders a smooth line using `curveBasis` within an SVG. The axes use `scaleTime` and `scaleLinear`, with tick marks styled via CSS. The visualization includes axis labels for "Months" and "Covid Positive Cases," and a title, all styled with the Lato font.

Mar 29, 2022
Loading thumbnail…

Fork of Scatter plot with React & D3

A React and D3 scatter plot visualizes the relationship between bill depth and bill length for penguins from a CSV dataset. The SVG rendering uses `scaleLinear` for both axes, with `extent` and `.nice()` to set domains, while `AxisBottom` and `AxisLeft` generate ticks and gridlines via `xScale.ticks()` and `yScale.ticks()`. Circles in the `Marks` component display each data point with a `title` tooltip showing formatted values. The code imports `csv` from D3 v7 and uses React hooks (`useState`, `useEffect`) to load data asynchronously.

Mar 29, 2022
Loading thumbnail…

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

This example shows the top 10 most liked companies for cryptocurrency based on sentiment analysis data from a CSV file, rendered as a horizontal bar chart using React and D3. The chart uses SVG marks with `rect` elements, scaled by `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks generated from D3’s scale methods. Data is loaded asynchronously via `d3.csv`, sorted to the top 10 entries, and displayed with a custom title and styling in a React component.

Mar 29, 2022
Loading thumbnail…

Untitled

This example presents a three-dimensional scatter plot of the Iris dataset, mapping sepal length, sepal width, and petal length onto the x, y, and z axes. The visualization is built with Plotly.js, which renders the 3D markers, while D3.js is used to load and parse the CSV data from a GitHub gist. The layout configures colored axis backgrounds, gridlines, and zero lines, and the chart is drawn into a designated div using the `Plotly.newPlot` method.

Mar 12, 2022
Loading thumbnail…

3D Bar Chart

This example visualizes the top 10 most liked companies for cryptocurrency based on social sentiment analysis data. It renders a 3D multi-series bar chart using the d3-3d library and D3 v5, with each company displaying three bars for Price, Posts, and Likes. The code loads CSV data via `d3.csv`, parses it into a hierarchical format, and attaches it to an X3DOM chart component through the d3-x3d library. The visualization includes an interactive 3D scene rendered in an HTML page with custom styling.

Mar 12, 2022
Loading thumbnail…

Data Visualization ICE6: Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot of petal length against petal width, with each point colored by species (setosa, versicolor, and virginica). The plot uses d3.csv to load the data, d3.scaleLinear for x and y scales, and d3.axisLeft and d3.axisBottom to render axes. Circles are drawn via SVG with a fixed radius, while labels for petal length and sepal length are added as text elements. The rendering is SVG, with the page background set to a light teal.

Mar 8, 2022
Loading thumbnail…

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

This bar chart displays the top 10 most-liked companies for crypto, based on social sentiment analysis data loaded from a CSV file. The visualization uses React and D3.js v5 to render SVG marks and channels, with a band scale for the categorical y-axis and a linear scale for the quantitative x-axis. Each company is represented as a rectangular bar, with the width encoding the number of likes, and axis ticks are generated using `scaleLinear.ticks`. The chart includes a styled title and uses a custom React component with `useState` and `useEffect` to fetch and process the data.

Mar 8, 2022
Loading thumbnail…

[ICE-5] Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing a CSV dataset of the top 100 football players using D3.js in a plain HTML page. The code fetches the data from a remote GitHub gist via `d3.csv`, then displays the file size in kilobytes, row count, and column count inside a styled `<pre>` element. The page also includes an embedded SVG image and custom CSS styling for headers and paragraphs. While a React starter file is present, the visualization itself relies exclusively on D3 v7 APIs for data loading and formatting.

Feb 25, 2022
Loading thumbnail…

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

Built with D3.js v5, this animated SVG face demonstrates fundamental DOM manipulation using selections, transitions, and shape generators. The coral circle head, green-outlined eyes, eyebrows, and arc-based mouth are appended and styled via D3 methods like `select`, `append`, `attr`, and `transition`. The eyebrows animate through a chained `transition().duration()` sequence, moving up 90 pixels and back over 20 seconds. The `arc` generator defines the mouth’s path from inner and outer radii, while SVG attributes control geometry and stroke styling throughout.

Feb 18, 2022