Ramch16

@Ramch16·17 public vizzes

Project Dashboard

This dashboard presents a clickable title page for a project on the history of volcanoes, using a background image and a button to navigate to a separate visualization page. The page is styled with inline CSS to center headings and the button, while the button links directly to an external HTML file via an anchor tag. No JavaScript or external visualization libraries, such as D3.js, are used in this code; the rendering is limited to static HTML and CSS with the background image sourced from a local file path.

May 1, 2023

Loading thumbnail…

Volcano Map

This visualization displays the global distribution of historically significant individuals from the Pantheon dataset, where each circle represents a person positioned by birth location. The map uses equal-area natural Earth projection with graticule lines, and circle size encodes the Historical Popularity Index (HPI) using a square-root scale. The accompanying date histogram enables time-brushing to filter the map through linked selection. Built with React, the implementation leverages D3 modules including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, and `scaleTime`, while tooltips employ the Tippy library.

May 1, 2023

Loading thumbnail…

Fork of React + D3 Viz Starter

This fork of a React + D3 Viz Starter displays a global map of volcanoes colored by primary type, with markers for stratovolcanoes, calderas, shields, and shield(s). The visualization relies on a `VizContainer` component that abstracts SVG/group elements and follows the margin convention, optionally showing margins via a `showMargins` prop. The code references Leaflet’s `L.map` and `L.marker` APIs to plot volcano coordinates, binding popups with volcano names, while the data includes fields for volcano name, type, and country.

May 1, 2023

Loading thumbnail…

4 Generations Monkey ICE-8

This interactive tree diagram visualizes four generations of monkey species, starting from Macaca mulatta and branching through subspecies like Macaca fuscata and Saimiri boliviensis. The SVG animation, built with d3.layout.tree and d3.svg.diagonal, arranges nodes horizontally by depth, with green dashed links connecting 12 named species. Users can click nodes to collapse or expand subtrees, highlighting the evolutionary relationships among the displayed primate taxa.

Mar 30, 2023

Loading thumbnail…

World_Map_ICE_8

This example displays a world map rendered from the Natural Earth dataset, with each country drawn as a filled path with a steel-blue stroke. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths from TopoJSON data loaded via the `world-atlas` package. The map is shown on a plain background, with country shapes filled white and stroked with a semi-transparent blue outline, highlighting the landmass boundaries without additional data encoding.

Mar 30, 2023

Loading thumbnail…

India_Map_ICE-8

This interactive map of India allows users to click on states to zoom in and display their districts. It uses React for the interface and the D3 library’s `geoMercator` and `geoPath` to render the geographic boundaries as SVG polygons. The map is built from TopoJSON data for both state and district boundaries, and a custom D3 zoom transform animates the transition between the national and state-level views, updating the stroke width during the zoom.

Mar 30, 2023

Loading thumbnail…

ICE_8_Social_Network_Graph

This example shows a small social network graph of people and their friendships, with nodes labeled by name and linked by green directed edges that use arrow markers. A force-directed layout, built with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, positions the nodes, while drag interactions and hover highlighting are supported via D3’s `drag` and CSS classes. The code loads `data.json` specifying nodes and links, renders SVG circles and text, and uses D3 v6 through an ES module import.

Mar 28, 2023

Loading thumbnail…

World_Map-ICE-8

This example displays a world map using a cylindrical stereographic projection, rendered with SVG. The map fills the viewport, with each country drawn as an orange polygon outlined in black, using `d3.geoPath` combined with TopoJSON data. The projection is implemented through a custom `geoCylindricalStereographic` function derived from `parallel1.js`, and the map’s styling is controlled via CSS classes assigned to the country elements. The visualization relies on `d3` version 5 and `topojson` to process and display the geographic data.

Mar 27, 2023

Loading thumbnail…

Ram_ICE7_SP

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length. The chart uses D3.js 6.7.0 APIs like `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to map data points to positions and render axes. Each species is represented by a distinct symbol from D3's `symbols` generator, with all points filled brown. The plot is rendered as an SVG directly in the browser, sized to the full window dimensions. The data is loaded from a remote CSV file via D3's `csv` function.

Mar 13, 2023

Loading thumbnail…

ICE7_Ram_Area_chart

This area chart shows the population growth of Indian states from 2013 to 2022, with the y-axis representing population and the x-axis representing years. The chart uses a green filled area under a basis curve to visualize the population trend over time. The visualization is built with D3 v6, using `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` for the filled region, and `axisLeft` and `axisBottom` for the tick marks. The data is loaded from a CSV file via `csv()`, with population values parsed as numbers and years converted to Date objects.

Mar 13, 2023

Loading thumbnail…

Ram_ICE7

This visualization shows the population rankings of Indian states in 2018 as a pie chart with proportional slices and labeled segments. The chart uses D3 v5’s pie layout and arc generator to create segments, with scaled color encoding via scaleOrdinal and value labels formatted using d3.format. Data is loaded asynchronously from a CSV file hosted on GitHub Gist, and the accompanying legend lists each state’s name alongside its corresponding population figure.

Mar 13, 2023

Loading thumbnail…

Ram_ICE7_Iris

This interactive scatter plot animates through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—by cycling the x-axis variable every second while keeping sepal length on the y-axis. Built with D3.js (v6), the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll`/`join` to render and update circles. Data comes from a CSV file of the Iris dataset loaded via `d3.csv`. The SVG animation runs in a `setInterval` loop, and the plot is generated through a custom `scatterPlot` module with configurable dimensions, margins, and radius.

Mar 12, 2023

Loading thumbnail…

Ram_ICE7_line_chart

This line chart visualizes the population growth of Indian states from 2013 to 2022. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` to map years and population values. It loads CSV data from a GitHub gist and renders the result as an SVG path with a green stroke. The chart includes labeled axes and a grid, with the y-axis labeled “Population” and the x-axis labeled “years.”

Mar 12, 2023

Loading thumbnail…

ICE6_1_Ram

This scatter plot visualizes penguin flipper length against body mass, with each point colored by species (orange for Chinstrap, yellow for Gentoo, brown for Adelie). The code loads CSV data from a GitHub gist using d3.csv, scales positions with d3.scaleLinear, and renders circles as SVG elements. Axes are generated with d3.axisLeft and d3.axisBottom, while the chart includes labeled titles for the x-axis (flipper length) and y-axis (bill length), though the y-axis label incorrectly describes the plotted variable.

Mar 12, 2023

Loading thumbnail…

ICE-6

This visualization displays the population growth rankings of Indian states in 2018 as a horizontal bar chart. It shows the top 20 states from a CSV dataset, with bar lengths representing the numeric ranking values on a linear scale. The React-based application loads data with `d3.csv`, slices the first 20 rows, and renders SVG rectangles using `d3.scaleBand` for the state categories and `d3.scaleLinear` for the ranking axis. Axis tick marks and labels are generated manually from the scales, with styling controlled by the accompanying CSS file.

Mar 10, 2023

Loading thumbnail…

Ram_ICE5

This example displays shipment sales and profit data by loading a CSV file and summarizing its contents. It shows key dataset statistics, including the total number of rows, columns, and file size in kilobytes. The page uses D3.js (d3.csv) to fetch and parse the external CSV, then updates the text of a DOM element via `textContent` to present the summary. A custom CSS background, provided as an SVG, and decorative fonts style the page.

Mar 2, 2023

Loading thumbnail…

Ram_ICE_4_Assignment_D3.js!

This example demonstrates a playful SVG smiley face constructed entirely through D3.js v5 DOM manipulation. The face features animated eyebrows that move up and down using chained `transition().duration()` calls, a mouth drawn with the `d3.arc()` path generator, and CSS-styled elements like ears, teeth, and a headband. The code uses `select`, `arc`, and `attr` to build the face on an SVG canvas, with HTML divs layered for additional facial features. The animation runs automatically in a loop, showing the eyebrows shifting repeatedly between raised and resting positions.

Feb 22, 2023