CherukuriMilind

@CherukuriMilind·18 public vizzes

Fork of ICE8 network graph

This example shows a network graph of seven countries connected by weighted links, with node labels and draggable circles colored by group. It uses the D3 v4 force layout via `d3.layout.force` to compute positions, with gravity, charge, and distance parameters, and renders nodes as SVG groups and links as SVG lines. Edge thickness reflects the `weight` property from the `graphFile.json` data, and the force simulation updates node transforms and link coordinates on each tick.

Jul 9, 2022

Loading thumbnail…

Fork of Famil Tree

This example presents a branching family tree using an animated SVG diagram. Nodes are rendered as yellow circles with black outlines, connected by maroon lines to show parent-child relationships. The visualization uses D3.js v6 with the `d3.stratify()` and `d3.tree()` APIs to structure the data, and `transition()` for animated draws. Node names appear as text labels, with the graph centered on the page. The underlying data is a hardcoded list of names representing family members and their lineage.

Jul 9, 2022

Loading thumbnail…

ICE8 World Map

This example displays a world map using a natural Earth projection, with each country rendered as a filled green path and the sphere outlined in sky blue. It uses D3 v5’s `geoPath` and `geoNaturalEarth1` projection along with TopoJSON’s `feature` method to convert country boundaries from a remote TopoJSON dataset. The map is drawn as SVG elements onto a fixed 960×500 canvas, and the CSS styles the sphere and country paths for visual distinction.

Jul 9, 2022

Loading thumbnail…

Map - India

This example displays a choropleth map of India with district-level polygons filled by state using a categorical color scheme, overlaid with darker state boundaries. Built with React and rendered as SVG, it employs d3.geoPath, d3.geoMercator, and the topojson feature function. The map centers on India, supports zooming via d3.zoom, and loads district and state boundary TopoJSON data from GitHub.

Jul 9, 2022

Loading thumbnail…

Bar Chart using D3.js

This example shows a multi-series 3D bar chart comparing the employee counts of companies across eight months. The chart is rendered using the d3-x3d library, which bridges D3.js and X3D, with data loaded from a CSV file via `d3.csv`. Each company’s monthly values are parsed into a key-value structure and passed to the `barChartMultiSeries` component. The visualization uses D3 v5 for data parsing and selection, while the actual 3D rendering is handled by x3dom, a WebGL-based X3D viewer.

Jul 6, 2022

Loading thumbnail…

3D Scatter Plot with people dataset

This example visualizes a people dataset by plotting two 3D scatter plots side by side. The first trace maps human height, width, and arm length, while the second maps human height, width, and arm width. Using Plotly’s scatter3d type, the chart renders markers with customizable size, opacity, and line styling. The code loads the CSV from a GitHub gist via D3’s `d3.csv` function, extracts columns using a custom `unpack` helper, and then draws the plot with `Plotly.newPlot` into a designated div.

Jul 6, 2022

Loading thumbnail…

Fork of area

This visualization displays car sales data over time as a filled area chart, with time on the x-axis and sales volume on the y-axis, rendered as an SVG. It uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.area with curveBasis to create the smooth, orange shaded region. Data is loaded from a CSV file via d3.csv and parsed with d3.timeParse, with formatted tick labels using d3.format. The chart includes styled gridlines, axis labels, and a title, all styled via external CSS.

Jul 2, 2022

Loading thumbnail…

Fork of ICE-7

This visualization displays car sales data over time as a line chart, with years on the x-axis and sales figures on the y-axis. It uses D3 v5 to load CSV data, parse dates with d3.timeParse, and render scales and axes via scaleTime, scaleLinear, axisBottom, and axisLeft. The line is drawn using the d3.line generator, with the SVG path styled in orange. The chart includes labeled axes and uses margins to position the plot within the SVG canvas.

Jul 2, 2022

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This example visualizes album data as a pie chart, showing the percentage contribution of each person to the dataset. D3 v5 loads CSV data from a GitHub URL and uses `d3.pie` and `d3.arc` to generate SVG arc segments, with `d3.scaleOrdinal` assigning categorical colors. Labels display percentages on the arcs, while a side legend lists each person and their corresponding value. The chart is rendered as static SVG, with text formatting handled by `d3.format`.

Jul 2, 2022

Loading thumbnail…

Fork of Fork of ICE - 7

This visualization shows the top 10 countries by deaths in 2020 attributed to air pollution, displayed as a pie chart with a corresponding legend. The chart uses colored segments for each country, with death counts formatted in thousands and listed alongside country names. The code loads CSV data via `d3.csv`, processes the values, and renders the chart using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`. Text labels and legend elements are appended to the SVG using D3 selections, with colors assigned from a predefined array.

Jul 2, 2022

Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot, built with D3, visualizes relationships between physical measurements from a People dataset. The plot cycles through different x-axis variables—leg length, shoulder length, arm length, and human height—every two seconds, creating an animated view of the data. Data points are colored based on gender, with red for females and orange for males. The visualization uses the `scatterPlot` custom module, along with D3's `scaleLinear`, `axisLeft`, `axisBottom`, and a `join` operation to update circles directly in the SVG.

Jun 30, 2022

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot displays the Iris Dataset, mapping measurements like leg length and shoulder length to axes while coloring each point by gender. It cycles through different column combinations every two seconds, updating the x-axis to reveal relationships between variables. Built with D3 v6, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles, with `setInterval` driving the animation. The code imports from the scatterPlot module, demonstrating a reusable chart pattern where dimensions like width, height, and data values are settable via closures.

Jun 30, 2022

Loading thumbnail…

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

This example visualizes the users of OTT platforms as a horizontal bar chart, with each bar’s length encoding the population value. The code uses React’s `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then renders SVG marks using JSX. D3 scales (`scaleBand`, `scaleLinear`) position the bars, while `xScale.ticks()` generates grid lines and tick labels. The data is sourced from a GitHub gist and limited to the first twelve rows.

Jun 25, 2022

Loading thumbnail…

ICE-6_ Milind Cherukuri

This interactive scatter plot visualizes the Iris dataset using D3 v6 within a React framework, mapping petal length and width on the axes. Circles represent individual flowers, colored by species (setosa, versicolor, virginica) as black, orange, or yellow. The code uses `scaleLinear` for positioning, `axisLeft` and `axisBottom` for scales, and `csv` to load remote data. SVG rendering displays the marks with fixed radius, while axis labels mislabel the x-axis as "Sepal length."

Jun 25, 2022

Loading thumbnail…

Milind

This visualization presents an interactive interface for exploring pre-owned cars, featuring a title, subtitle, and an embedded image of a vehicle rendered within an SVG element. The page uses pure HTML and CSS with a JavaScript library from d3.v5. The background employs an animated CSS gradient effect that cycles through multiple colors. The SVG image is embedded directly as a base64-encoded JPEG within the markup, displayed with a patterned fill derived from that image data.

Jun 22, 2022

Loading thumbnail…

Fork of Milind

This example visualizes pre-owned car data on an SVG graphic overlaid on an animated gradient background, with the title "Pre Owned Cars." The visualization uses a base64-encoded JPEG image as a pattern fill within the SVG. D3.js version 5.11.0 is loaded via a CDN, while CSS defines a rotating gradient animation using keyframes. The React framework is mentioned as part of the project structure, though the display itself relies on static SVG markup and CSS styling.

Jun 22, 2022

Loading thumbnail…

Fork of Ice4 Milind

A smiley face rendered in SVG uses D3.js to animate its eyebrows with a repeating transition. The code selects the SVG via `d3.select`, builds face shapes with `circle` and `rect` elements, and draws the mouth using `d3.arc`. Eyebrows move upward and downward through chained `transition.attr` calls on a group, showing basic DOM manipulation and animation. The face’s blue head, black stroke, and asymmetric eyes are hardcoded, with no external data source.

Jun 17, 2022

Loading thumbnail…

Ice4 Milind

This example shows a blue smiley face with animated eyebrows that shift upward and return to their original position over a repeating two-second cycle. The face is built entirely with D3.js v5 SVG elements, including circles for the face and eyes, rectangles for the eyebrows, and an arc for the mouth. The eyebrow motion is driven by chained `transition` calls on the eyebrow group, using `duration` and `attr` transformations. The code also demonstrates basic selection and attribute manipulation in D3.

Jun 17, 2022