AmruthaVee

@AmruthaVee·15 public vizzes

ICE- 8 Country Map- Portland

This example displays a map of Portland neighborhoods as SVG paths, using a conic equal-area projection centered on the city’s coordinates. The map is built with React, which fetches TopoJSON data via the `useData` hook and `d3.json`, converts it to GeoJSON with `topojson.feature`, and renders it through `d3.geoPath`. Each neighborhood boundary is drawn as a stroked path, with styling applied through CSS classes. The visualization updates asynchronously, showing a loading message until the geographic data arrives.

Apr 13, 2023

Loading thumbnail…

ICE 8- World Map

This visualization displays a world map using a natural Earth projection, rendered as SVG paths. Countries appear in green with brown outlines against a steel-blue sphere, conveying a simple geographic overview. The map draws country boundaries from the world-atlas JSON dataset, which is loaded and processed using D3’s `json` and `geoPath` functions with the `geoNaturalEarth1` projection, while TopoJSON’s `feature` extracts the country geometries. The code builds the map with D3 v5, appending sphere and country paths to the SVG canvas.

Apr 13, 2023

Loading thumbnail…

ICE- 8: Network graph

This network graph visualizes a small set of named individuals and the weighted connections between them, using a force-directed layout. It loads the node and link data from a JSON file and renders the structure as an SVG. The code employs D3 v4’s `d3.layout.force` for physics simulation, with link thickness scaled by the square root of the edge weight, and nodes displayed as orange circles with green labels. Users can drag the nodes, as the graph responds to the simulation’s tick events.

Apr 13, 2023

Loading thumbnail…

ICE- 8 Family Tree

This example shows a static family tree of Asian countries and regions, with hierarchical nodes arranged left-to-right and color-coded links and circles. The visualization uses D3.js v5 with a `d3.tree()` layout, mapping a nested data object to `d3.hierarchy` and rendering as SVG. Node sizes reflect the `value` property, while link strokes use the `level` color field, and circle fills use the `type` field, with text labels for each country.

Apr 13, 2023

Loading thumbnail…

Untitled

This 3D scatter plot visualizes BMW car data, showing two separate marker series that plot model, price, and mileage for one trace, and model, price, and engine size for another. The first trace uses default marker styling with opacity, while the second uses gray markers with circle symbols. Both are rendered using Plotly’s `scatter3d` type via `Plotly.newPlot`. The data is loaded asynchronously with `d3.csv` from a GitHub-hosted CSV file.

Apr 7, 2023

Loading thumbnail…

3D Bar Chart

This 3D Bar Chart visualizes a BMW dataset, displaying multiple series of price and mileage values for different car models. Built with D3.js v5 and the d3-3d and d3-x3d libraries, it renders an interactive three-dimensional bar chart using X3DOM for WebGL-based output. The code loads CSV data via the `d3.csv` method, parses it into multi-series format, and passes it to a `d3.x3d.chart.barChartMultiSeries()` component. Users can rotate and explore the 3D scene to compare values across categorical and numeric dimensions.

Apr 7, 2023

Loading thumbnail…

Fork of d3-x3d : 3D Bar Chart Example

This example displays a 3D bar chart of USA vehicle sales by quarter for major automotive brands in 2021, with bars representing Q1, Q2, and Q3 values per model. It uses d3.v5, the d3-x3d plugin, and x3dom to render the interactive 3D visualization. Data is loaded from a CSV via `d3.csv` and mapped to a multi-series format, then passed to `d3.x3d.chart.barChartMultiSeries()`. The page includes custom CSS with a background image and responsive chart dimensions set through D3 selection attributes.

Apr 6, 2023

Loading thumbnail…

Area Chart

This area chart displays temperature variations in the US over time, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `d3.area` generator with a basis curve to create the filled path, while `d3.scaleTime` and `d3.scaleLinear` map the data. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, and the chart is drawn as an SVG. The data is loaded as CSV from a GitHub gist.

Mar 30, 2023

Loading thumbnail…

Line Chart

A line chart displays US temperature readings over time, with the x-axis representing time and the y-axis representing temperature. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to render the SVG path. The line is styled with a blue stroke, and the chart includes labeled axes and a title. The data is loaded from a CSV file via the `csv` function from D3.

Mar 30, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the unemployment rate across US states, displaying the top 10 states with the highest rates. The chart uses D3.js v5 version's `pie` and `arc` functions to generate SVG path segments, with each state represented by a colored slice. A legend on the right lists each state, its corresponding color, and the unemployment rate in US dollars. The data is loaded from a CSV file hosted on GitHub Gist, processed using D3's `csv` and `scaleOrdinal` functions.

Mar 30, 2023

Loading thumbnail…

Reusable_Scatter_Plot.

This interactive scatter plot displays the Iris dataset, showing petal and sepal measurements for three flower species. The visualization cycles through different measurement pairings on the x-axis at set intervals, while the y-axis remains fixed, allowing comparison across dimensions. Built with React and D3.js, it uses SVG elements for rendering and dynamically updates axes and labels through D3 scales and the `scatterPlot` reusable chart function. The code employs D3's `csv` loader for data parsing and `setInterval` for animation, with species distinguished by color-coded points.

Mar 30, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing body mass against culmen length with colored circles for each species. The visualization uses D3 v6 within a React framework to load CSV data and render SVG elements, employing scaleLinear for axes and extent for domain calculations. Circle positions map culmen length and body mass, while species determines fill color through a custom switch function. Axis labels are styled with red text, and the plot fills the entire browser window with margin-based positioning.

Mar 23, 2023

Loading thumbnail…

ICE-6 Bar Graph

This example shows a horizontal bar graph of penguin classifications based on island, with bar lengths representing body mass in grams. The visualization uses React state hooks to load CSV data, then renders the bars as SVG rectangles. It employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and d3.max to compute the domain. Gridlines and tick labels are manually drawn using d3 axis methods, while the data comes from a gist-hosted CSV file.

Mar 23, 2023

Loading thumbnail…

ICE- 5: Shapes of Data

This interactive visualization presents an abstract, organic composition formed by layered, flowing shapes derived from embedded base64 image data. The piece functions as an artistic exploration of form, where the data source is a pixelated background image rendered through an SVG pattern. Built with D3 v7 and React, the visualization uses JavaScript to drive the SVG and WebGL rendering, creating a dynamic interplay of colorful, distorted geometries that showcase the aesthetic potential of raw data.

Mar 9, 2023

Loading thumbnail…

Fork of Buddha in colors

The gallery entry visualizes a dense, colorful generative composition built with React and rendered as SVG. It shows overlapping rotated polygons and semi-transparent rectangles scattered randomly across a tall canvas. The code uses nested `Array.map` loops with `Math.random()` to generate positions, sizes, and RGB fill colors for each primitive. A fixed Buddha outline is overlaid as an SVG path, scaled and translated into the scene. The visualization relies on ReactDOM to render the SVG structure directly to the page.

Mar 2, 2023