geethikal

ICE8 - Family Tree

A family tree visualization uses hierarchical node-link layout to display three generations of relatives, with each person rendered as a colored rectangle and connections shown as curved links with directional arrows. The D3 v3 tree layout arranges nodes vertically by depth, while a breadth-first traversal dynamically sizes the SVG canvas based on tree width and depth. Implemented in React with vanilla D3 selections, the visualization supports zoom and drag interactions via `d3.behavior.zoom`, and includes tooltips and collision detection for overlapping nodes. Data comes from a nested JSON file, with node colors assigned by generation type.

Apr 12, 2023

Fork of HTML Starter

This example renders a static "Hello HTML!" message in the center of the viewport. The text is styled with a large font size and centered alignment using CSS. The page uses standard HTML markup and inline CSS within the `<style>` tag, with the JavaScript file (index.js) remaining empty. It serves as a minimal demonstration of combining HTML structure with CSS presentation without any external libraries or data sources.

ICE8-Network Graph

This example shows a force-directed network graph of ten named individuals (Geethika, Karthik, Yogi, and others) with eleven connections rendered as green lines between yellow circular nodes. The graph uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while SVG circles and lines are updated during each tick of the simulation. Node labels display names, positioned slightly offset from each circle. Data comes from a local `flare.json` file containing nodes and links arrays.

ICE8 - World Map

This example displays a world map using a natural Earth projection, rendering countries as green polygons with a blue ocean sphere. It uses D3 v5’s `d3.geoNaturalEarth1()` projection and `d3.geoPath()` to convert geographic coordinates into SVG paths. Country boundaries come from the world-atlas TopoJSON dataset, processed with `topojson.feature`. The map is drawn entirely in SVG, with the sphere background and country layers styled via CSS.

ICE8 USA Map

A choropleth-style map of the United States renders each state as an SVG path, colored with a categorical scale and labeled with its name at the centroid. Hovering turns a state red via CSS. The code loads TopoJSON state boundaries from the us-atlas package and uses `d3.geoAlbersUsa` for projection, `d3.geoPath` to generate paths, and `d3.scaleOrdinal` with `schemeCategory10` for fill colors.

ICE7 Area & Line Combo

This visualization presents a combination area and line chart depicting year-wise Apple sales revenue, with the area beneath the curve filled in green and the line itself drawn in blue. The chart uses D3.js v5 within a React framework to render an SVG graphic, employing the `area` and `line` generators to create the visual elements. Data is loaded asynchronously from a CSV file hosted on GitHub, with the x-axis representing time using `scaleTime` and the y-axis using `scaleLinear`. Styling is applied via an external CSS file, which customizes axis labels, tick marks, and the chart's overall appearance.

ICE7 Line Chart

This example visualizes year-wise Apple sales data as a single line chart, emphasizing the trend in revenue over time. The chart uses time-scaled x-axis for the year data and a linear y-axis for sales figures. Built with React and D3 v5, it leverages `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render the SVG. The data is loaded from a CSV file via `csv()`, parsed with `d3.timeParse`, and styled with custom CSS for grid lines and labels.

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS and JavaScript to render a centered message. The page applies a `font-size` of `13em` to the `.message` div, displaying "Hello HTML!" as a large, visually prominent text. The code relies on plain HTML structure, CSS styling for layout, and no external JavaScript libraries or data sources. It serves as a basic starter template for understanding web-based rendering without additional visualization frameworks.

ICE7 Pie Chart

This pie chart visualizes the market share of popular JavaScript frameworks, including Vue, ReactJS, and Angular, based on values loaded from a CSV file. The chart displays each framework’s percentage via colored arcs and includes a legend with labels and values. Built with D3 v5 and React, it uses `d3.pie()` to compute arc angles, `d3.arc()` to draw SVG paths, and `scaleOrdinal` for color mapping, rendering the result as an SVG graphic.

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, comparing sepal length against petal width for three iris species—setosa, versicolor, and virginica—using distinct symbols for each species. A custom legend maps species to shapes, generated via d3.symbol and d3.scaleOrdinal. Axes are rendered with d3.axisLeft and d3.axisBottom, while the plot is built as a reusable scatterPlot function called within an SVG container. Data is loaded asynchronously from a CSV file and parsed with d3.csvParse.

Fork of Reusable D3 Scatter Plot

This visualization presents the Iris Dataset as an animated scatter plot, where each flower species appears as a distinct symbol (circle, star, or triangle) colored purple, blue, or green. The plot automatically cycles through different x-axis variables every two seconds, switching between petal width, sepal width, petal length, and sepal length, while keeping sepal length on the y-axis. Built with D3 v6, the reusable scatter plot component uses `scaleLinear` for axes, `scaleOrdinal` for categorical mapping, and `symbol` for custom shape rendering, with a legend displayed in the corner.

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

This visualization shows the ages of the world’s top 10 richest people as horizontal bars on an SVG chart, using a React component that loads CSV data from a GitHub gist. The code uses `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to map names to y-positions and ages to bar widths, with manually drawn axes via `xScale.ticks()` and `yScale.domain()`. React’s `useState` and `useEffect` manage the asynchronous data loading, while D3 v5’s selection and scale APIs render the marks directly in the JSX.

Mar 11, 2023

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

This example visualizes the population of ten countries in 2022 as a horizontal bar chart. It uses React for component structure and state management, while D3 v5 handles data loading via `d3.csv` and scales (`scaleBand`, `scaleLinear`). The chart renders to SVG, with custom tick marks and grid lines manually drawn instead of using `axisBottom` or `axisLeft`. Data comes from a GitHub Gist containing country population figures.

ICE-6: Rendering Marks and Channels (Bar Chart)

This example renders a horizontal bar chart using React and D3 v5, displaying the 2022 population for three countries from a CSV dataset. The visualization uses SVG marks and channels, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. React state manages the asynchronous CSV loading via D3’s `csv` function, while the code manually draws axis ticks, gridlines, and colored rectangles. The chart includes a purple vertical grid and labeled axes, with data filtered to the first three rows of the source CSV.

Fork of D3 Starter

This example demonstrates a minimal D3 setup by rendering the text "Hello D3 version 7" in the center of the page. The code imports the `select` function from the D3 library and uses it to target the `body` element, setting its text content. The page includes a large font-size style via CSS and loads D3 version 7.8.2 from a CDN. It serves as a basic starter template for building more complex visualizations with D3.

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length against body mass for individual penguins. Each point is colored by species, with circle radii fixed while bill length and depth influence visual encoding through non-standard `rx` and `ry` attributes. The visualization is rendered as an SVG using D3 v5 within a React-free HTML page. It loads CSV data asynchronously, applies linear scales via `scaleLinear`, and generates axes using `axisLeft` and `axisBottom`, with custom cursive font styling.

ICE6 - Q2: Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass, with each point colored by penguin species and sized by culmen dimensions. It uses D3 v6’s `scaleLinear`, `axisLeft`, `axisBottom`, and `select` to load CSV data from a GitHub gist and render SVG circles. The axes, labels, and legend are drawn directly within the SVG canvas, and the chart is responsive to the browser window.

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

This visualization presents a horizontal bar chart showing the basic cost of Netflix subscriptions across 15 countries, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the numeric cost axis. The code manually renders SVG gridlines, axis tick labels, and data rectangles using JSX elements, demonstrating a React component that manages CSV loading via `useEffect` and `useState` while delegating scale computations to D3.

ICE5

This visualization presents a summary of an Amazon product dataset, displaying the dataset's file size and row count on a page with a background image. It uses d3.csv to fetch a remote CSV file and d3.csvFormat to calculate the data size. The page displays the total number of rows and the size in kilobytes, providing a basic overview of the data about product names, prices, and ratings. The visualization is a simple text-based summary rather than a graphical chart.

Mar 3, 2023

Fork of Face

This example renders a stylized portrait of Danny Phantom’s face using React and D3 v6, with all shapes drawn as SVG elements. The face, eyes, irises, pupils, and eyebrows are positioned via computed coordinates, while the mouth uses a D3 `arc` generator with inner and outer radii. Hair and nose are defined as polygons and polylines with explicit point arrays. The code relies on React’s `ReactDOM.render` and D3’s `arc` function, setting stroke widths, fill colors, and transforms to assemble the composite character on a full-window SVG canvas.

Fork of CrazyGuy

A stylized caricature of Danny Phantom’s face rendered as an SVG using React and D3. The visualization constructs the character from primitive shapes: circles for eyes and irises, rectangles for eyebrows, and polygons for hair and nose, all positioned with absolute coordinates. D3’s `arc` generator creates the mouth path, while the overall layout is centered on the viewport. The code uses hardcoded dimensions and colors, with React managing the DOM elements and D3 providing the arc utility for the mouth shape.

Fork of Smiley Face Part II

A cheerful smiley face is drawn as a large yellow circle, with detailed SVG eyes and a mouth layered on top. The face is built from multiple React components, including `Eyes` and `Smile`, which compose complex SVG paths and shapes with layered colors and gradients. The `App` component uses inline SVG attributes like `transform`, `scale`, and `rotate` to position the facial features. The example demonstrates React rendering SVG elements, with components imported and rendered via `ReactDOM.render`.

Fork of Fork of Fork of Smiley Face Part II

A large yellow smiley face rendered in SVG centers a React visualization, flanked by two detailed cartoon eyes and a wide, animated smile. The page combines static drawing elements from SVG paths, ellipses, and circles, assembled in React components (`Smile`, `Eyes`) and layered via inline transforms. The face uses simple geometric shapes for the head and mouth, while the eyes and smile include intricate path data and multiple color fills. React renders the entire composition into a 960×500 viewport.