ayodhyanandh

@ayodhyanandh·18 public vizzes

ice 8 india map

This interactive map of India shows a drill-down from state boundaries to district-level detail. Clicking a state triggers an animated zoom, implemented with a custom pan-and-zoom transform via `d3.zoom` and `svg.transition().duration()`. The map is rendered as SVG paths using `d3.geoMercator` and `d3.geoPath`, with geographic data loaded as TopoJSON from a GitHub gist and converted to GeoJSON features via `topojson.feature`. The React front end manages state and click handlers through `useState` and `useEffect`.

Apr 13, 2023

Loading thumbnail…

ICE 08 worldmap

This example displays an interactive world map using an equirectangular projection, rendered as SVG paths with countries filled in a light cream color and a blue ocean background. Hovering over any country changes its fill to red, providing immediate visual feedback. The visualization uses D3 v5’s `d3.geoPath` and `d3.geoEquirectangular` for map generation, while TopoJSON’s `feature` method converts the world-atlas countries-110m.json dataset into GeoJSON features for rendering. Styling is controlled through CSS classes for earth and country elements.

Apr 13, 2023

Loading thumbnail…

ICE - 8: Ayodhya family tree

This interactive family tree visualizes hierarchical relationships among named individuals, starting with “raju” and branching through four generations. Users can click nodes to expand or collapse subtrees, with smooth animated transitions. The visualization uses the D3.js library’s tree layout and diagonal link generator, rendering nodes as circles with labels and curved steel-blue links in SVG. The data is embedded directly in the code as a JavaScript object, and animations rely on D3 transitions.

Apr 13, 2023

Loading thumbnail…

Social_Network_graph_ICE-8

A social network graph displays nine named individuals connected by weighted links, with node size fixed and link thickness proportional to edge weight. Using the D3 v4 force layout, the visualization loads data from a JSON file containing nodes grouped by affiliation and links with numeric weights. SVG elements render the graph, with green circles and black text labels for each person. The force simulation applies gravity, distance constraints, and charge to position nodes, while user interaction enables dragging. The code employs `d3.layout.force`, `.start()`, and tick handlers to update line and node positions dynamically.

Apr 13, 2023

Loading thumbnail…

ICE - 8 ayodhya social network

This example shows a social network family tree with ten nodes representing named individuals, connected by animated parent-child links. Using the d3.stratify() utility to build hierarchy from flat data, it renders the tree via d3.tree() with SVG circles and text labels. Path connections animate into place with transition().duration(), while nodes expand to a fixed radius size. The visualization employs d3.v6 and SVG elements on a light blue background, with every node styled with light yellow fill and green stroke.

Apr 11, 2023

Loading thumbnail…

Fork of A Week in San Francisco Area Chart

A smooth maroon area chart displays San Francisco temperature trends over time, with the x-axis labeled "Time" and the y-axis labeled "Temperature." The visualization loads CSV data from a Gist URL, parsing timestamps and numeric temperatures. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to render an SVG path with gridlines and axis labels. The chart is a follow-along project from a D3 course.

Mar 24, 2023

Loading thumbnail…

Fork of A Week in San Francisco Line Chart

This example shows a line chart of San Francisco temperatures over a week, with a smoothed curve and labeled axes for time and temperature. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render an SVG path. Data is loaded from a CSV via `d3.csv`, and margins, tick marks, and an axis label are added through SVG groups and text elements.

Mar 24, 2023

Loading thumbnail…

Fork of basic cost of netflix

This visualization presents a pie chart of the basic monthly Netflix subscription costs across ten countries, sourced from a gist-hosted CSV file. It displays the relative cost proportions and uses a legend to list each country with its corresponding price in dollars. Built with D3.js v5 within a React framework, the code leverages `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate the SVG chart. The `csv` function loads the data, which is sorted and limited to the top ten entries before rendering.

Mar 24, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot of the Iris dataset, cycling through four measurement columns every two seconds. It animates the x-axis mapping while keeping sepal length on the y-axis. The chart uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` for data loading. A custom `scatterPlot` function builds the SVG, and circles transition between positions as the x-value changes. The visualization fills the viewport and applies styling from the Share Tech font.

Mar 24, 2023

Loading thumbnail…

Fork of sample

This horizontal bar chart displays the top 10 Indian T20 players by runs scored, sourced from a GitHub-hosted CSV file. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the continuous x-axis. Rendered as SVG rectangles, the chart includes axis ticks and labels, though the y-axis labels extend beyond the visible plot area.

Mar 11, 2023

Loading thumbnail…

ICE 6-2

This scatter plot displays the relationship between flipper length and body mass for three penguin species, using D3.js v5 within an HTML page. Each point is colored by species, and also encodes culmen length and depth as the x and y radii of oval marks. The chart loads remote CSV data, uses d3.csv for parsing, and constructs axes with d3.axisLeft and d3.axisBottom. The visualization includes labeled axes and a title, rendered as SVG elements with custom styling.

Mar 11, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin dataset scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with colors distinguishing species. The visualization is rendered as an SVG using D3 v5, employing `d3.csv` to load data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for tick marks. Circles are drawn via `selectAll` and `join`, with a fixed radius of 5 pixels. The code also parses additional measurements like culmen length and depth, though these are not used in the plot itself.

Mar 11, 2023

Loading thumbnail…

sample

This example visualizes the top 10 T20 Indian cricket players by runs scored, using a horizontal bar chart rendered with SVG. The data is loaded from a CSV file, and the chart uses `scaleBand` for the y-axis player names and `scaleLinear` for the x-axis run totals. React manages the component state and rendering, while D3’s `csv` fetches the dataset and `max` computes the domain. Grid lines and axis labels are drawn manually as SVG elements.

Mar 10, 2023

Loading thumbnail…

Fork of ICE-6

A fork of the ICE-6 example displays the basic monthly cost of Netflix in various countries using a horizontal bar chart. The visualization is built with React and D3 v5, rendering SVG bars whose lengths correspond to the `basic_cost` field from a CSV dataset of Indian players, though the title suggests cost data. The code constructs scales with `d3.scaleBand` and `d3.scaleLinear`, draws axes and gridlines manually, and loads data via `d3.csv`. The chart shows the top 15 countries, with bars and tick labels positioned using scale mappings.

Mar 10, 2023

Loading thumbnail…

t20

This example shows metadata about a t20 cricket players dataset, including its size, row count, and column count. It uses D3 v7 to fetch a CSV file via `d3.csv`, then computes the dataset’s size in kilobytes using `d3.csvFormat(data).length`. The results are displayed as plain text inside a `<pre>` element, with a background image and dataset link provided in the HTML/CSS. The page’s heading and anchor tags present the data source and a clickable reference.

Mar 4, 2023

Loading thumbnail…

Fork of t20

This example displays metadata about a T20 cricket dataset, including its size in kilobytes, row count, and column count. The page fetches the dataset from a GitHub-hosted CSV file using `d3.csv`, then calculates and presents these statistics in a styled `<pre>` container. The page uses D3 v7 for data loading and formatting via `d3.csvFormat`, with CSS providing a credit card image as the background. The visualization is minimal, focusing on textual summary output rather than graphical charts.

Mar 4, 2023

Loading thumbnail…

t20

This page displays metadata about the T20 cricket dataset, including its size in kilobytes, number of rows, and number of columns. It fetches the dataset from a CSV file hosted on GitHub using d3.csv, then computes the metadata by measuring the length of d3.csvFormat output and accessing the data array and its columns property. The results are displayed as plain text in a pre element, with a credit card SVG background and red hyperlink styling from the CSS.

Mar 4, 2023

Loading thumbnail…

t20highlights

This bar chart displays the populations of the ten most populous countries, based on 2018 estimates from the United Nations’ World Population Prospects. The visualization uses D3 v5 to render SVG graphics, employing `scaleLinear` for the population axis and `scaleBand` for the categorical country labels. Customized D3 axes, including formatted tick labels that abbreviate large numbers, are drawn using `axisBottom` and `axisLeft`. The chart also includes styled grid lines, a title, and an axis label, all defined through CSS classes applied to SVG elements.

Mar 4, 2023