Srujana390

@Srujana390·15 public vizzes

Fork of ICE-8: Social Network

This example visualizes a small social network with six nodes and five weighted links, displaying names as labels and circle nodes colored green. The force-directed layout uses `d3.layout.force` from D3 v4, with gravity, charge, and distance parameters controlling node positioning, while link thickness reflects the `weight` attribute. Data is loaded from a local `data.json` file, and the SVG rendering includes drag interaction via `force.drag` and tick-based updates for link coordinates and node transforms.

Apr 14, 2023

Loading thumbnail…

ICE 8 India Country Map

Using React and D3 v6, this interactive map of India displays state and district boundaries as SVG paths. A click on any region zooms and pans the map to that area, using `d3.zoom` with a smooth transition. The `geoMercator` projection and `geoPath` render the TopoJSON features, with boundary data loaded from two remote GeoJSON files. The map dynamically filters to show either all states or the districts of the selected state, with fill colors set via CSS.

Apr 14, 2023

Loading thumbnail…

ICE8 - World Map

This example presents a world map rendered with D3 v5 and React, displaying countries as orange shapes with black outlines against a sky-blue spherical background. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to generate the SVG paths. Country boundaries come from the `world-atlas` TopoJSON dataset, processed with `topojson.feature` before being appended to the SVG. The visualization shows all countries at a global scale, emphasizing geographic layout over thematic data.

Apr 14, 2023

Loading thumbnail…

ICE8 Animal Tree Network

This interactive tree diagram visualizes a hierarchical animal classification network, starting from the root category "Animals" and branching into Vertebrates and Invertebrates, then further subcategories like Mammals, Birds, and Arthropods. Each node is labeled and color-coded by depth level, with collapsible child nodes toggled on click. The visualization uses d3.layout.tree and d3.svg.diagonal to position nodes and draw curved links, while CSS classes style circles and text within an SVG canvas. The embedded JSON data structure defines parent-child relationships for the taxonomy.

Apr 14, 2023

Loading thumbnail…

Interactive Bar Chart Bonus ICE

This interactive bar chart displays the share of subscribers across YouTube channel categories, using a sample dataset. Hovering over a bar dims it, highlights its value with a dashed reference line, and labels every other category with its percentage difference from the selected one. The visualization uses D3 v5 with a React scaffold, rendering SVG bars with mouseenter and mouseleave handlers, value text, axes, and grid lines via d3.axisBottom and d3.axisLeft.

Apr 6, 2023

Loading thumbnail…

3d Scatter Plot Bonus ICE 11551417

This example shows a 3D scatter plot of insurance data, overlaying two traces: one maps age and sex against BMI, while the other maps the same age and sex axes against charges. The visualization uses Plotly’s `scatter3d` type, with markers rendered via the `Plotly.newPlot` API. Data is loaded asynchronously from a remote CSV using `d3.csv`, and the `unpack` function extracts columns for each trace. The layout collapses all margins, producing a frameless plot.

Apr 6, 2023

Loading thumbnail…

3d Chart Bonus ICE

This interactive 3D bar chart visualizes H1 application data for a single country across five years (2019–2023). The visualization uses a multi-series bar chart from the `d3.x3d.chart` API, rendering bars in three dimensions via the X3DOM library. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed into the expected format. The chart is attached to a holder element and dynamically redrawn when new data arrives. The example demonstrates integration between D3.js, the d3-x3d extension, and X3DOM for 3D web visualization.

Apr 5, 2023

Loading thumbnail…

Area Chart 11551417

This area chart displays the number of H1 applications reported per year, with the title “H1 Applications” and labeled axes for years and case counts. Data is loaded from a CSV file and parsed into date and numeric values. Using D3 v5, the visualization employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with a `curveBasis` generator to render an orange filled path. The SVG output includes custom tick formatting and styled axis labels, following the tutorial’s framework.

Mar 30, 2023

Loading thumbnail…

Line Chart 11551417

A line chart visualizes the number of H1 visa applications (in lakhs) over time, with each year plotted along the x-axis and reported cases on the y-axis. The chart uses D3 v5's `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and a `line` generator with a `curveBasis` curve to create a smooth path. Data is loaded via `csv` from a GitHub gist, and the SVG rendering includes labeled axes and gridlines. The visualization is based on the Data Canvas – Sense Your City dataset, though the displayed values reflect H1 application counts.

Mar 30, 2023

Loading thumbnail…

Pie Chart 11551417

This example visualizes the subscriber counts of the top ten YouTube content categories, mapping each category to a colored slice of a pie chart. The chart uses D3.js v5 APIs including `pie`, `arc`, `scaleOrdinal` with `schemeCategory10`, and `csv` to load data from a GitHub gist. Rendered as SVG in a React project, the visualization displays a legend with category names and subscriber counts, formatted with a custom number formatter that appends "m" for millions.

Mar 30, 2023

Loading thumbnail…

Reusable Scatter Plot 11551417

This animated scatter plot visualizes the Iris dataset using D3.js, displaying relationships between petal and sepal dimensions. The example uses a reusable `scatterPlot` component to map variables to x and y axes, with data points colored by species (setosa, versicolor, virginica). Through `setInterval`, the visualization cycles through different x-axis variables, demonstrating the chart's reusability. The code leverages D3's `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` functions to render interactive SVG graphics with a color legend and animated transitions.

Mar 30, 2023

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the relationship between age and BMI using an insurance dataset, with each point colored by species. The visualization uses D3 v6 with SVG rendering, loading data from a GitHub gist via `d3.csv` and parsing numeric values. Axes are generated with `axisLeft` and `axisBottom`, while `scaleLinear` maps data domains to pixel ranges. Circle marks are drawn using `selectAll` and `join`, with axis labels styled via SVG text elements in a React-friendly HTML page.

Mar 23, 2023

Loading thumbnail…

ICE-6 Bar Graph

This horizontal bar chart displays the number of subscribers across different content categories among the top 1000 YouTube channels. The visualization uses React with D3 v5, employing `scaleBand` for categorical y-axis positioning and `scaleLinear` for the quantitative x-axis. Data is loaded via `d3.csv` from a GitHub gist, with the top 12 categories shown. The SVG rendering includes red gridlines and text labels generated through D3’s axis tick methods, while React’s `useState` and `useEffect` manage asynchronous data loading.

Mar 23, 2023

Loading thumbnail…

DV ICE-5

This example demonstrates a data visualization titled “DV ICE-5” using an SVG rendering approach within a React framework and D3 v7. The visualization displays a pre-rendered background image embedded as a Base64-encoded PNG within the SVG pattern, alongside a navigation bar. The code uses standard SVG elements like `rect`, `pattern`, and `image` with `xlink:href` to incorporate the visual content. The page is styled with CSS, and the overall structure includes a container with a card layout to present the graphic. The visualization appears to showcase a static, embedded image rather than interactive data-driven graphics.

Mar 9, 2023

Loading thumbnail…

Buddha in colors

The visualization displays a yellow Buddha silhouette overlaid with a chaotic grid of colorful, semi-transparent squares. The image uses React to render an SVG scene, generating overlapping rectangles with random positions and RGB fill colors via `Math.random()`. A detailed SVG path defines the Buddha figure, which is placed atop the squares, creating a vibrant, fragmented aesthetic.

Mar 2, 2023