vineeth-001

@vineeth-001·10 public vizzes

ICE__7

This visualization displays the all-time leading wicket-takers in One Day International cricket, using a pie chart where each slice represents a player’s total wickets. The data is loaded from a CSV file via `d3.csv`, and the chart is rendered as SVG using `pie` and `arc` generators. Slice colors are assigned with `scaleOrdinal`, and a legend lists each player’s name and wicket count, formatted with `format`. The code also defines an `arcGenerator` for centroid positioning, though it does not add labels inside the chart.

Mar 11, 2023

Loading thumbnail…

ICE___7

This visualization reproduces the Keeling Curve, showing the rise in atmospheric CO₂ concentration from 1958 onward. The chart displays monthly average measurements as a black line over time, with a time-based x-axis and a linear y-axis for CO₂ levels. The data comes from NOAA's Global Monitoring Laboratory. The code uses d3.scaleTime, d3.scaleLinear, d3.line, d3.timeParse, and d3.csvParse within a standard d3.v7 framework to load, parse, and render the time-series line chart. Axes are drawn using d3.axisLeft and d3.axisBottom.

Mar 10, 2023

Loading thumbnail…

ICE 7

This animated scatter plot cycles through the four numeric dimensions of the Iris dataset, changing the x-axis attribute every two seconds while keeping sepal length fixed on the y-axis. It uses d3's `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for tick marks, and the `join` operator for idempotent SVG circle updates. Data loads via `d3.csv`, and the plot resizes to the browser window.

Mar 10, 2023

Loading thumbnail…

ICE-6 (penguin dataset)

This visualization displays a scatter plot of penguin measurements, with flipper length on the x-axis and body mass on the y-axis. Each circle is colored by species—blue for Adelie, black for Gentoo, and red for Chinstrap—using a custom marker function. The code loads a CSV dataset and uses D3 v5 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the axes and SVG circles. The y-axis label is mislabeled as "bill_length_mm" despite showing body mass values.

Mar 5, 2023

Loading thumbnail…

ICE_6

This example displays the top 10 all-time leading run-scorers in cricket as a horizontal bar chart. The SVG visualization uses D3 v5 with `d3.scaleLinear` and `d3.scaleBand` to map runs and player names, while `d3.axisLeft` and `d3.axisBottom` render the axes. Data comes from a CSV file loaded via `d3.csv`, with run values parsed as numbers. Each player’s total runs are shown as orange bars, with a titled chart and formatted tick labels using `d3.format`.

Mar 5, 2023

Loading thumbnail…

ICE 5

This page displays metadata about the IPL 2016 dataset, including its size in kilobytes, row count, and column count. It uses D3 v7’s `d3.csv` to fetch a CSV file from a GitHub gist and `d3.csvFormat` to compute the data’s size. The page presents the information in a styled `<pre>` element, with a background SVG image and linked dataset details.

Mar 3, 2023

Loading thumbnail…

Untitled

This example displays metadata about a motor vehicle sales dataset, including its size in kilobytes, row count, and column count. The data is loaded from a CSV file using D3 v7’s `csv` method, and the summary text is rendered inside an HTML `<pre>` element. The page uses CSS background images from external SVG URLs for visual styling, with JavaScript calculating the dataset’s size via `csvFormat().length`.

Mar 2, 2023

Loading thumbnail…

ICE 4

This example renders a stylized portrait of Danny Phantom’s face using React and D3. The SVG drawing is built from geometric primitives—circles for the eyes and face, rectangles for eyebrows, and polygons for the hair—with D3’s `arc()` generator creating the mouth. Code defines the hair’s corner coordinates and applies transformations for positioning. The visualization fills the browser window, using raw D3 shapes without data binding or interaction.

Feb 22, 2023

Loading thumbnail…

Fork of Fork of Danny Phantom Face

This interactive portrait uses React and SVG to render a stylized face inspired by Danny Phantom, with the drawing scaled to the browser window. The code constructs the character’s features—including the face circle, eyes with irises and pupils, eyebrows, a polyline nose, and an arc-shaped mouth using D3’s `arc()` generator—from explicit coordinate points and dimensions. Hair is defined as a polygon with precomputed vertex coordinates, while all elements are grouped and centered within an SVG canvas. The rendering is driven entirely by these hard-coded parameters, with no external data source.

Feb 22, 2023

Loading thumbnail…

Fork of Danny Phantom Face

This example renders a stylized face inspired by the cartoon character Danny Phantom, composed entirely of SVG shapes positioned relative to the viewport center. It displays circular eyes with offset irises and pupils, rectangular eyebrows, a polyline nose, a smile-shaped path created with d3.arc, and a large polygon representing hair. The implementation uses React to define the SVG elements while calling d3’s arc function from the d3 library to generate the mouth path, with all coordinates computed from window dimensions.

Feb 22, 2023