akhila157

@akhila157·12 public vizzes

Social Network Graph

This social network graph visualizes friendships between eight people, with red circular nodes labeled by name and connected by red lines with arrowheads to indicate directed relationships. The layout is computed using d3.forceSimulation with link, charge, collision, and center forces, while nodes and links are rendered as SVG elements. Dragging is enabled via d3.drag, and hovering highlights nodes with a black outline using the nodeHover class. Data comes from a JSON file containing node and link arrays.

Apr 10, 2023

Loading thumbnail…

TREE ICE8

An animated, collapsible family tree visualizes the S.V.Rao lineage, with each node representing a person or family unit. Styled circles use different stroke and fill colors to indicate relationship types and generational levels. The example builds the tree using the D3.js layout and SVG diagonal link generators, with transitions animating nodes as they expand and collapse upon click. Data is embedded directly in the code as a hierarchical JavaScript object, and the visualization supports smooth updates when navigating the family structure.

Apr 10, 2023

Loading thumbnail…

ICE8 Country Map

This visualization renders a choropleth map of Indian states using D3.js with a Mercator projection. It loads GeoJSON data containing administrative boundaries and assigns each state a distinct color from D3’s schemeCategory10 palette. The code employs `d3.geoPath` with the projection to generate SVG paths, appending tooltip titles that display state names. The map uses topojson’s `feature` method to extract geometry, and the styling includes a light green background with white state borders, rendered via SVG elements.

Apr 10, 2023

Loading thumbnail…

ICE8 - World Map

This interactive map displays world country boundaries on a natural Earth projection, rendered as green SVG paths with black outlines against a light blue background. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to convert topology data, while TopoJSON extracts country features from the world-atlas dataset. The SVG canvas is populated dynamically as the geographic data loads, creating a static but scalable representation of global landmasses.

Apr 10, 2023

Loading thumbnail…

Area Chart

This area chart displays the population of the USA from 1960 to 2021, with time on the x-axis and population count on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. It generates a line path via `d3.line` and fills the area beneath it using `d3.area` with `d3.curveBasis` smoothing. The data comes from a CSV file loaded with `d3.csv`, and axis labels are added directly in the SVG.

Mar 26, 2023

Loading thumbnail…

Line Chart

This line chart displays the population of the USA from 1960 to 2021. The visualization uses D3 v5 to load CSV data and render an SVG path. It employs `scaleTime` and `scaleLinear` for the axes, with `axisBottom` and `axisLeft` to generate ticks and gridlines. The line is drawn using the `line` generator, and the dataset is parsed with `d3.timeParse`.

Mar 26, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the basic cost of Netflix subscriptions for the top 10 countries, sorted in descending order from a CSV dataset. It uses D3.js version 5, leveraging the `pie`, `arc`, and `scaleOrdinal` APIs with a categorical color scheme, rendered as SVG. A legend lists each country alongside its cost in dollars. The visualization encodes values by arc length and color, with tooltips logging data to the console on mouseover.

Mar 26, 2023

Loading thumbnail…

Akhila

This animated scatter plot visualizes the Iris dataset, encoding petal width and sepal length along the axes and distinguishing species by color and symbol shape. Points cycle through different measurement columns every ten seconds using `setInterval`, updating the x-axis scale and data bindings via d3 joins. The visualization uses d3’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisBottom`/`axisLeft` APIs, loading CSV data from a GitHub gist. Additional HTML/CSS legend boxes label species with blue, green, and orange swatches.

Mar 26, 2023

Loading thumbnail…

Reusable Scatter Plot for Iris Data

A reusable scatter plot displays the Iris dataset by mapping petal width to the x-axis and sepal length to the y-axis, with species represented by distinct symbols. Built with D3.js, the chart uses `scaleLinear`, `scaleOrdinal`, and `symbol` to generate SVG paths, while `axisLeft` and `axisBottom` render labeled axes. The visualization adapts to the browser window size and loads data from a remote CSV file.

Mar 21, 2023

Loading thumbnail…

ICE6

This bar chart displays the average star ratings for fifteen books, using data loaded from a CSV file via `d3.csv`. The visualization uses React hooks (`useState`, `useEffect`) to manage the data, while D3 v5 APIs construct the scales and axes: `scaleBand` for the book names on the y-axis, `scaleLinear` for the ratings on the x-axis, and `axisBottom`/`axisLeft` for ticks. Each book’s rating is rendered as an SVG `<rect>` within a `<g>` group, with grid lines and tick labels drawn manually using D3 selections. The chart is embedded in an HTML page that loads React and D3 from CDN.

Mar 12, 2023

Loading thumbnail…

AKHILA

This example visualizes Palmer Penguins data as a scatter plot, mapping flipper length on the horizontal axis and body mass on the vertical axis, with each point colored by species (orange, red, or green). It also encodes culmen length and depth as the `rx` and `ry` ellipse radii of each circle, adding a second bivariate dimension. The code uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering circles as SVG elements within a React-free HTML page. Axis labels and a title are appended as text elements.

Mar 12, 2023

Loading thumbnail…

ICE5

This example displays the metadata of a Good Reads customer dataset, presenting the file size, row count, and column count as plain text. The page uses D3 v7’s `d3.csv` to fetch a remote CSV file, then applies `d3.csvFormat` to calculate the data size in kilobytes and `Math.round` for the row and column counts. A CSS background image of a coder and styled headings provide the visual context, while the results are rendered into a `<pre>` element using `document.getElementById`.

Mar 1, 2023