vineeth0000

@vineeth0000·8 public vizzes

snake species

This interactive tree diagram shows a simple biological classification of snakes into two families—Cobra and Colubrid—with three species beneath each. The visualization uses D3.js layout and SVG rendering to draw collapsible nodes and yellow links. Users can click a node to expand or collapse its children, with smooth transitions animating the repositioning of elements. The code defines the tree structure in raw JavaScript and uses the D3 `diagonal` projection to create the connecting paths.

Mar 30, 2023

Loading thumbnail…

ice__8

This example visualizes a social network graph, showing the connections between eight people as blue circles linked by blue lines. The layout is computed using `d3.forceSimulation` with link, many-body charge, collision, and center forces in D3 v6, and nodes are rendered as draggable SVGs. Node labels display names in large black text, and hovering highlights a node with a thick purple stroke via CSS class toggling.

Mar 30, 2023

Loading thumbnail…

ice-8

This visualization displays the 50 states of the USA as a red choropleth map with black state borders, where hovering over a state turns it black. It uses the `d3.geoPath()` and `geoAlbersUsaTerritories()` projections to render geographic features from a TopoJSON file loaded from the us-atlas package. The React-based app fetches the data via `useData()` and renders the map as an SVG using `topojson.feature()` and `topojson.mesh()` to extract land boundaries and interior borders.

Mar 29, 2023

Loading thumbnail…

ICE 8

This example renders a world map using the equirectangular projection, filling each country solid red against a blue sphere. It highlights countries in black on hover. The visualization loads TopoJSON world-atlas data, converts it to GeoJSON with TopoJSON’s `feature` method, and draws paths using `d3.geoPath` and `d3.geoEquirectangular`. The SVG output is styled via CSS, and interactions rely on the `:hover` selector.

Mar 29, 2023

Loading thumbnail…

ICE7

This interactive scatter plot visualizes the relationship between petal width and sepal length for iris flowers, with each species represented by a distinct symbol. Built using D3 v6, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbol` to encode species as different shapes, and `d3.axisLeft`/`d3.axisBottom` for labeled scales. The SVG rendering fills the browser window, with explicit axis titles and a bold title, drawing data from a CSV file hosted in a GitHub Gist.

Mar 13, 2023

Loading thumbnail…

ICE7

This visualization shows the number of wickets taken in ODI cricket from 2000 to 2010, with a filled area chart highlighting the trend over time. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `line()`, and `area()` generators with `curveBasis` to render smooth paths in SVG. Axes are created via `axisBottom` and `axisLeft`, and data is loaded from a remote CSV using `csv()`. The chart includes styled tick lines, axis labels, and a bold orange fill for the area under the curve.

Mar 13, 2023

Loading thumbnail…

ice7

This line chart shows the number of wickets taken in ODI cricket from 2000 to 2010, with year on the x-axis and wicket count on the y-axis. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for gridlines, and a `line` generator to create the blue path. The data is loaded from a CSV and rendered as SVG.

Mar 13, 2023

Loading thumbnail…

ICE__7

A pie chart displays the all-time leading wicket-takers in ODI cricket, with each slice sized by the number of wickets and labeled via a legend listing player names and values. The visualization uses d3.pie and d3.arc to compute and render the SVG segments, while d3.scaleOrdinal with schemeCategory10 assigns colors based on wicket counts. Data loads from a remote CSV file using d3.csv, and mouseover events log the wicket value to the console. The chart is positioned with an SVG transform, and legend text styling is defined in an external stylesheet.

Mar 12, 2023