D

DineshK2602

@DineshK2602·17 public vizzes

Loading thumbnail…

Social Network graph

This example uses a force-directed network graph to visualize a social network of nine people and their relationships. The visualization shows connections as blue lines whose thickness corresponds to the weight of each relationship. Nodes are rendered as circles with red borders, and each person’s name is displayed adjacent to their node. The layout uses `d3.layout.force` (a force simulation API) to position nodes, with drag interaction enabled via `force.drag`. Data is loaded from an external JSON file (`graph.json`) and rendered as an SVG, with styling applied through CSS.

Loading thumbnail…

ICE-8

This example shows a network of nine people connected by weighted links, with each node labeled by name and grouped by color-coded circles. The visualization uses a force-directed layout to position the nodes and links dynamically. The code implements this with `d3.layout.force`, specifying gravity, distance, and charge parameters to control the simulation. Links are rendered as black lines with stroke width proportional to link weight, while nodes appear as blue circles with red text labels. The graph data comes from a local JSON file, and the SVG rendering updates positions on each tick event.

Loading thumbnail…

ICE-8

This interactive family tree visualizes three generations of a family, with names displayed in a hierarchical layout branching from a single root ancestor. The SVG rendering uses D3.js v3’s `d3.layout.tree` to position nodes and `d3.svg.diagonal` for curved links. Users can click any node to collapse or expand its children, with smooth `transition` animations adjusting node positions and link paths. The data is hardcoded as a JSON array in the script, and styling includes violet backgrounds, cyan circles, and green strokes.

Loading thumbnail…

ICE-8

This visualization displays a map of Indian states, each filled with a distinct color from a categorical scale and labeled with its name. The SVG rendering uses `d3.geoMercator` for projection and `d3.geoPath` to generate state boundaries from TopoJSON data. State names are positioned at each path’s centroid, and hover effects are applied to county paths via CSS. The color mapping relies on `scaleOrdinal` with `schemeCategory10`, while the geographic data comes from a remote India-states TopoJSON file.

Loading thumbnail…

ICE on World Map

This example displays a world map rendered in SVG, with countries filled in maroon and outlined in green against a skyblue sphere. Hovering over a country changes its fill to brown. It uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw the map, with geographic data loaded as TopoJSON from the world-atlas dataset. The page also leverages `topojson.feature` to convert the TopoJSON into GeoJSON for rendering.

Loading thumbnail…

ICE8

An interactive radial tree diagram displays a biological classification of animals, branching from "Animals" into "Vertebrates" and "Invertebrates" and further into specific classes and phyla. The visualization uses the D3.js layout API `d3.layout.tree` and `d3.svg.diagonal` to render curved links between nodes. Animated with a 750-millisecond duration, the SVG elements respond to user clicks, expanding or collapsing branches. Node colors represent taxonomic levels, with `type` and `level` properties controlling stroke and fill colors within the tree structure.

Loading thumbnail…

Fork of Fork of BONUS ICE 1: 3D Scatter Plot

This example visualizes the relationship between age, sleep duration, and sleep efficiency as a 3D scatter plot. Each point represents an individual, with yellow markers outlined in black, positioned along three axes that display the variables. The code loads CSV data from a GitHub gist using D3’s `d3.csv` function, then constructs the trace with Plotly’s `scatter3d` type and renders it via the `Plotly.newPlot` API. Axis titles and marker styling are configured through the layout and trace objects.

Loading thumbnail…

Pie Chart

This pie chart displays the distribution of company ratings, with each slice representing a company and its corresponding rating value. The visualization uses D3.v5 and React to render an SVG-based pie chart, where colors are assigned through `d3.scaleOrdinal` and the arc segments are created using `d3.arc`. The data is loaded from a CSV file hosted on GitHub, and legends with company names and rating values appear on the right side, generated through D3's `select` API.

Loading thumbnail…

SArea Chart-ICE7

This area chart visualizes mobile phone usage from 2005 to 2015, with the filled blue region emphasizing the upward trend over time. The visualization uses D3 v6 APIs including `area`, `curveBasis`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to render a smooth, filled path within an SVG. Data is loaded from a CSV file via D3’s `csv` function, with years parsed as dates and usage values as numbers. The chart includes labeled axes with tick marks and a rotated y-axis label, all styled via CSS.

Loading thumbnail…

ICE-7 Area Chart

This area chart displays the cost of sales from 2000 to 2013, using a smooth basis curve for both the line and the filled area beneath it. The visualization loads a CSV dataset via `d3.csv`, parses the year and cost fields, and renders an SVG with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. The chart includes customized axis labels and gridlines, with the area filled in yellow and the line drawn in black. The code is built with React and D3 v5.

Loading thumbnail…

Line Chart

This line chart displays the usage of mobile devices over a ten-year period, with the x-axis representing years and the y-axis showing usage values. The visualization uses D3 v5 to load CSV data and render an SVG chart, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` for labeled tick marks. The data is fetched from a GitHub gist, with a blue stroked line and styled text elements.

Loading thumbnail…

Line Chart

This line chart displays student growth rate from 1980 to 2005, plotting year on the x-axis and per capita mobile usage on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to create the SVG path, with gridlines from tick size and rotated axis labels. Data is loaded via `csv()` from a GitHub gist, and the chart includes a title and styled axes using CSS classes.

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This example presents the classic Iris dataset as an interactive scatter plot, cycling through different attribute pairings on the x-axis (petal width, sepal width, petal length, and sepal length) at regular intervals, while the y-axis remains fixed on sepal length. The visualization uses D3 v6 with a custom reusable `scatterPlot` component built around `scaleLinear`, `axisLeft`, and `axisBottom`, rendering SVG circles with animated transitions via `setInterval`. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`, with points colored green, blue, or red to distinguish the three iris species; a legend and axis labels accompany the animated plot.

Loading thumbnail…

ice-6

This visualization displays the number of hospitalized confirmed COVID-19 patients for each county, using a horizontal bar chart with an orange grid. Built with React and D3 v5, it loads CSV data via `d3.csv`, filters to the top 20 counties, and renders SVG rectangles scaled by `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Tick labels and grid lines are generated from `xScale.ticks()`. The chart updates dynamically when the data loads, showing the title in magenta above the plot.

Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris Dataset, displaying sepal length on the x-axis and sepal width on the y-axis, with each point colored by species (Iris-setosa, Iris-versicolor, or Iris-virginica). The visualization uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and additional petal length and width values determine each circle’s radius properties. The plot fills the browser window, with styled tick labels and axis text.

Loading thumbnail…

ICE-6

This example visualizes the relationship between age and BMI in insured individuals using a horizontal bar chart, displaying the top 15 counties by the number of hospitalized COVID-confirmed patients. The chart uses an SVG rendering with React for state management and D3 v5 for scales, axes, and data loading. Specifically, it employs `scaleBand` for the y-axis counties and `scaleLinear` for the x-axis patient counts, with data fetched via `d3.csv` from a GitHub raw URL. The bars are drawn as SVG `<rect>` elements, and custom tick labels replace traditional axes for clarity.

Loading thumbnail…

CSCE 5320 ICE-6

This example shows the relationship between hospitalized COVID suspected and confirmed patients across 15 counties, using a horizontal bar chart rendered as SVG. Each bar’s length encodes the count of hospitalized suspected patients per county, with axes and tick labels generated manually. The code uses React for component state and lifecycle, alongside D3 v5 functions including `csv`, `scaleBand`, `scaleLinear`, and `max`. Data is loaded from a GitHub gist URL and sliced to the first 15 rows, with bars drawn using SVG `<rect>` elements and red gridlines.