saishashank

@shashankPeddi·8 public vizzes

MY Tree ICE-8

This interactive tree chart visualizes a family hierarchy using D3.js. An animated SVG layout, with blue links and red-bordered nodes, shows the relationships from a single ancestor down through multiple generations. The code uses the `d3.layout.tree` API to position nodes and `d3.svg.diagonal` for the connecting paths. Clicking a node triggers a smooth transition, collapsing or expanding its children, while all elements are styled through inline CSS.

Apr 5, 2023

Loading thumbnail…

Europe Map ICE8

This example displays a monochrome vector map of Europe, rendered as individual SVG paths with grey strokes and white fills. It uses a Mercator projection centered on the continent, with D3’s `d3.geoPath` and `d3.geoMercator` to transform GeoJSON features into drawing commands. The map is built with React and D3 v5, fetching geographic data from a remote GeoJSON URL via `d3.json`.

Apr 5, 2023

Loading thumbnail…

World_Map_ICE_8

This visualization renders a world map using the Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, displaying land masses in purple, graticules in blue, and international borders in red. The map is drawn as SVG paths within a React component, with geographic data loaded from the world-atlas TopoJSON dataset and converted using topojson.feature and topojson.mesh. A white sphere background and graticule overlay provide cartographic context, while the React app manages asynchronous data loading with hooks.

Apr 5, 2023

Loading thumbnail…

Social_Network_graph_ICE-8

This example shows a small social network graph with nine people (including Shashank, Anju, and Prem) and eight weighted connections. The d3.v4 code uses `d3.layout.force` to position the nodes, with links drawn as black lines whose stroke width reflects the connection weight, and nodes represented as blue circles with red text labels. The SVG renders the graph at 900 by 600 pixels, and the nodes are draggable via `force.drag`, with positions updating on each tick event. Graph data comes from the local `graph.json` file.

Apr 5, 2023

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This interactive scatter plot animates through different axis pairings from the Iris dataset, cycling between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Using React and D3 v6, it leverages `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render data as colored SVG circles grouped by species. A `setInterval` triggers transitions in the reusable `scatterPlot()` function, updating axes and labels dynamically.

Mar 22, 2023

Loading thumbnail…

Line_Stroke_Death

This line chart visualizes the change in average life expectancy over time, using data from a brain stroke dataset. The x-axis maps years and the y-axis maps average life expectancy, with a smooth orange line connecting data points. Built with D3 v5, the visualization employs `scaleLinear` for both axes, `line` with `curveBasis` for the path, and `axisLeft`/`axisBottom` for tick marks. The data is loaded via `csv` from a GitHub gist.

Mar 22, 2023

Loading thumbnail…

Area Death's

This area chart displays the average life expectancy by year, with the area filled in orange beneath a curved line. The visualization uses D3 version 5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to smooth the data, while `axisLeft` and `axisBottom` render the labeled axes. Data is loaded from a CSV file hosted in a GitHub gist, and the SVG output includes a red title and purple axis labels.

Mar 22, 2023

Loading thumbnail…

Pie Chart

This pie chart shows the basic cost of Netflix subscriptions across ten countries, with each slice labeled in a legend that includes the country name and cost in dollars. The visualization uses D3.js v5 within a React framework, employing the `pie`, `arc`, and `scaleOrdinal` functions to generate the SVG segments. Data is loaded from a CSV file hosted on GitHub, sorted by cost, and rendered with a categorical color scheme. Interactive mouseover events log the cost to the console, while legends and text elements are styled via CSS.

Mar 22, 2023