P

prajoth0405

@prajoth0405·18 public vizzes

Loading thumbnail…

Tree map ICE 8

This example shows a family tree visualization of Intel processors using an animated tree layout, with circles representing each processor and color-coded generation depth. The data is structured as parent-child pairs and converted into a hierarchy using `d3.stratify`, then positioned with `d3.tree()` which sets x and y coordinates for each node. Connections between nodes are drawn as SVG paths that animate from the source to target positions via `transition().duration()`, while descendant circles expand to a fixed radius of 38 pixels. Text labels display the processor names with bold white styling, and the whole tree is rendered in SVG within a React application using D3 v6.

Loading thumbnail…

Family Tree

A family tree uses a branching layout to show relationships among Intel-related products, from the root Intelchip down to microprocessors, microcontrollers, graphics, and Nvidia subcategories. The code applies d3.stratify and d3.tree to compute node positions, rendering circles for each item and animated paths for the connections. Colors distinguish generations, with SVG transitions animating both the links and circle radii.

Loading thumbnail…

Tree map ICE 8

This interactive tree diagram visualizes a small hierarchical dataset about Intel chip categories, including microprocessors and microcontrollers. Built with React and D3.js, the SVG-based visualization uses animated transitions to reposition nodes and links when users click to expand or collapse branches. The code leverages D3's layout and diagonal projection APIs, with a color-coding function that assigns red to the root and blue to child generations, while CSS styles define node and link appearance.

Loading thumbnail…

social data network

A force-directed graph visualizes a social data network, mapping connections between a root node and nested groups of related entities. Larger nodes represent primary hubs, while smaller leaf nodes cluster at the edges. The visualization uses D3 v6's `forceSimulation`, `forceLink`, and `forceManyBody` to position nodes, with SVG circles and text labels rendered for each element. The `drag` and `zoom` handlers let users pan and reposition nodes. Node colors indicate checked (green) versus unchecked (red) states, and the data mimics a network hierarchy.

Loading thumbnail…

ICE 8 Swedish map

This visualization displays the counties of Sweden as a choropleth map, using brown regions with silver borders and green internal boundaries. Built with React and D3’s `geoMercator` projection, it renders geospatial data as SVG paths via `geoPath`. The map sources its topojson from a GitHub gist, processed with `topojson`’s `feature` and `mesh` functions to extract county polygons and their shared borders.

Loading thumbnail…

ICE 8 geo map

This map displays global countries rendered in green against a light blue sphere, using the Natural Earth projection. The visualization loads world geography from the world-atlas TopoJSON dataset and converts it to GeoJSON features via the topojson.feature method. D3’s geoNaturalEarth1 and geoPath functions generate the SVG paths, while the sphere and country shapes are styled with CSS classes. No interactive behavior is implemented.

Loading thumbnail…

Area Chart

This area chart displays the population of a state over time, using a smooth curved line and a filled brown area beneath it to emphasize the trend. The visualization is rendered as an SVG using D3 v5, with the x-axis representing years and the y-axis showing population values, both using linear scales via `scaleLinear`. The chart is built with D3’s `line`, `area`, and `curveBasis` generators, and axes are drawn with `axisBottom` and `axisLeft`. Data is loaded from a CSV file containing yearly population figures, and the styling is applied through CSS classes for the line, area, and tick marks.

Loading thumbnail…

Line graph

A line graph displays population change in an unspecified U.S. state from 1999 to 2013, with the x-axis mapping years and the y-axis showing population values. It uses React to load CSV data from a GitHub gist, then renders an SVG through D3 v5, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to draw axes, grid lines, and an orange path. The chart includes axis labels, a title, and styled tick marks.

Loading thumbnail…

line graph

A line graph displays the population for each U.S. state during the month of January, with the x-axis representing states and the y-axis showing population values. The chart uses D3 v5 with React, rendering as an SVG. It loads CSV data from a GitHub gist via `d3.csv`, applies `scaleTime` and `scaleLinear` for axes, and draws the line using `d3.line`. Gridlines are created through axis tick sizes, with custom labels and a title styled via CSS.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal width against sepal length, with each species color-coded (setosa in gold, versicolor in teal, and virginica in red). The visualization cycles through four attribute combinations every two seconds, updating both the axes and circle positions. Built with D3 v6, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, and `d3.axisBottom` within a reusable `scatterPlot` function, rendering as SVG circles with HTML labels.

Loading thumbnail…

Pie Chart

This pie chart visualizes the population distribution across U.S. states, using a categorical color scale for each state. The D3.js code loads CSV data from a Gist, calculates each state's share via the `pie` layout, and renders SVG slices with `arc` paths. A legend translates each sector's value into abbreviated format (e.g., "K" for thousands), while the chart is generated with `scaleOrdinal` for colors and D3's `format` for tick labels.

Loading thumbnail…

Pie Chart

This pie chart displays the population of states for the year 1994, with each slice colored distinctly and accompanied by a legend showing the state name and population value in thousands. The visualization loads CSV data from a GitHub gist using `d3.csv`, processes it in an async function, and renders the pie using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping, all drawn as SVG elements within a fixed 960x500 viewport. The legend and value labels are appended as SVG groups with formatted numbers via `d3.format`.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping petal width against sepal length and coloring each point by species—blue for setosa, red for versicolor, and yellow for virginica. The code uses d3’s `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with SVG circles for data marks. A reusable `scatterPlot` function encapsulates the chart, allowing dynamic updates to the x-axis value, cycling through dataset columns. The black background and white axis text use the Share Tech font, creating a stark, readable display.

Loading thumbnail…

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

This example visualizes population details for the top 10 states based on 2009 data, loaded from a CSV file. It renders a horizontal bar chart using React components and D3 scales, with D3’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The SVG output includes manually drawn ticks and axis labels via D3’s `scaleLinear.ticks()`. The code demonstrates integrating React’s state and hooks with D3’s data-loading and scaling utilities for declarative chart rendering.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This visualization displays the classic Iris Dataset as a scatter plot, mapping petal length and width to the x and y axes while using color to distinguish between the three species (setosa, versicolor, and virginica). The chart also encodes sepal measurements as the rx and ry attributes on the circular marks, though these have no visible effect on the default SVG circle rendering. Built with D3 v6, it loads the CSV data via `d3.csv`, scales the axes with `d3.scaleLinear`, and renders the plot using SVG circles, `axisLeft`, and `axisBottom`.

Loading thumbnail…

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

This bar chart displays the top 20 countries by population from a CSV dataset, using horizontal bars to encode population values along a linear scale. The visualization is built with React and D3 v5, where D3’s `scaleBand` and `scaleLinear` handle the axis scales, and React renders the SVG rects, axis ticks, and labels. Data is loaded asynchronously via `d3.csv` from a remote GitHub gist, and the chart includes blue gridlines and text annotations for readability.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example renders a simple SVG smiley face using React and D3. The visualization depicts a yellow circle with a black outline and two smaller black circles for eyes, positioned on a canvas of 900 by 500 pixels. The code uses React's `ReactDOM.render` to render the SVG elements, with JSX syntax for the shapes. D3 is loaded via a script tag and is available in the environment. The layout relies on fixed coordinates, with the face centered and eyes offset symmetrically.

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple face using React and SVG, drawing a yellow circle with two eyes on a black stroke outline. The React component constructs the SVG elements directly, using JavaScript expressions within JSX curly braces to compute the center coordinates, eye offsets, and radius values. The code imports React, ReactDOM, and D3 v7 from CDN via unpkg, demonstrating a minimal setup for interactive visualization development. The visualization is static, showing basic SVG shape composition without data or animation.