LakshmiManjushaReddyYarreddu

@LakshmiManjushaReddyYarreddu·13 public vizzes

Fork of ICE-6

This visualization presents a horizontal bar chart displaying the "Unitprice" for the top 10 records from a Supermarket Sales CSV dataset. Each bar represents a product line, with its length proportional to the unit price. The chart is built using React and D3 v5, leveraging `d3.csv` for data loading, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the x-axis price scale. The SVG rendering includes grid lines and axis labels, with blue bars drawn using SVG rectangles within a transformed group.

Apr 28, 2023

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This is a force-directed social network graph built with D3 v4 and rendered as SVG. It uses `d3.layout.force` to position nine named nodes connected by eight weighted links, with stroke width proportional to link weight. Each node appears as a blue circle with a red text label, and nodes are draggable via `force.drag`. The layout applies gravity, distance, and charge settings to arrange the network, updating positions on each tick. Data comes from an external `graph.json` file.

Apr 13, 2023

Loading thumbnail…

Fork of ICE-8: Social Network

This example visualizes a small social network of six people, with five connections between them, using a force-directed graph layout. In the visualization, blue circular nodes represent individuals and red lines with varying thickness indicate the strength of their relationships. The code loads the network data from a `data.json` file, then uses D3’s `d3.layout.force` to simulate the layout, with node dragging enabled and labels attached to each node. All graphical elements are drawn as SVG shapes, styled via CSS.

Apr 10, 2023

Loading thumbnail…

Fork of ICE - 8: Tree Map

This interactive tree diagram visualizes a hierarchical family tree, showing relationships between individuals such as “venkat reddy” and their descendants. The visualization uses D3.js version 3.5.17 with a collapsible node layout, where clicking a node toggles the display of its children. The SVG rendering includes red circular nodes connected by green diagonal links, with text labels positioned to the left or right of each node. Animations transition nodes and links smoothly when expanding or collapsing branches, using the `d3.layout.tree` and `d3.svg.diagonal` APIs.

Apr 10, 2023

Loading thumbnail…

Fork of ICE-8 USA Country Map

This map of the United States displays state boundaries and country outlines using a spherical projection, with light blue landmasses, a white sphere backdrop, and black state borders. It is rendered as SVG via React, using D3’s `geoAlbers`, `geoPath`, and `geoGraticule` utilities to project and draw geometries. Data comes from the US Atlas TopoJSON dataset, loaded asynchronously with `d3.json` and transformed using `topojson.feature` and `topojson.mesh`.

Apr 10, 2023

Loading thumbnail…

Fork of ICE-8 World Map

This fork of the ICE-8 World Map displays a natural Earth projection of global country boundaries, rendered as an SVG with a blue sphere background and light green landmasses. Each country is drawn as a vector path using the `d3.geoPath` projection and `geoNaturalEarth1` projection function, with styling defined through CSS classes. The map loads geographic data from the world-atlas countries-110m JSON file via the `topojson` library’s `feature` API, and the visualization is built entirely with D3 v5 and SVG elements.

Apr 10, 2023

Loading thumbnail…

Fork of Fork of Line Chart

This example shows US auto sales from 2005 to 2022 as a line chart, with the year on the x-axis and sales on the y-axis. It loads CSV data from a GitHub gist, then uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the SVG path. The chart includes labeled axes, gridlines via tickSize, and a red line path, with styling applied through external CSS.

Mar 29, 2023

Loading thumbnail…

Fork of ICE 7 Pie chart

This example displays a pie chart of the top 10 countries by population in 2022, with each slice labeled with its population value in thousands and accompanied by a legend listing country names and corresponding figures. The chart uses D3 v5, specifically the `pie`, `arc`, and `scaleOrdinal` APIs to generate and color the slices, while the `arcGenerator.centroid` method positions the text labels within each segment. Data is loaded asynchronously from a CSV file fetched from a GitHub gist URL. The visualization is rendered as SVG, with sections and legends appended to the canvas.

Mar 29, 2023

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization displays supermarket sales in India over time, combining a smooth line chart with an area chart to emphasize sales trends. The chart uses D3 v5's `scaleTime` and `scaleLinear` for axes, with `line()` and `area()` generators using `curveBasis` for curved paths. Data is loaded via `csv()` from a GitHub gist, where each date is parsed with `timeParse("%Y")`. SVG rendering includes labeled axes, gridlines via tick sizes, and a bold dark line over an orange filled area.

Mar 23, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example presents the classic Iris dataset as a reusable D3 scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Different species are distinguished through distinct SVG symbols, generated using D3’s `symbol` and `scaleOrdinal`. The visualization is built with a reusable `scatterPlot` function, which configures linear scales, axes, margins, and symbol size. Data is loaded as CSV via D3’s `csv` method, and the plot updates the DOM by joining path elements. The output is a clean, interactive-free scatter chart rendered as SVG.

Mar 23, 2023

Loading thumbnail…

Creating a Scatter Plot with D3.js

This example visualizes the Iris flower dataset as a scatter plot of petal length against petal width, with each point colored by species. It loads the data from a CSV file using d3.csv and maps values to screen coordinates with d3.scaleLinear and d3.extent. The SVG circles are rendered via d3.select, and axes are generated with d3.axisLeft and d3.axisBottom. The code runs as a React example with D3 v6, using an HTML page that appends an SVG to the body and sets the chart dimensions to the full window size.

Mar 8, 2023

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, mapping petal length and sepal width for individual samples. Circles are colored by species, with a legend-free color scheme distinguishing Adelie (grey), Gentoo (green), and other species (blue). The visualization uses D3 v5 with a React-friendly SVG rendering approach, employing `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for chart scaffolding. It includes a titled header and responsive sizing based on window dimensions.

Mar 7, 2023

Loading thumbnail…

Fork of Fork of ICE5

This gallery example shows metadata about a students' performance dataset, displaying the file size, row count, and column count in a large, bold centered text block. The page features a background SVG image of the dataset and links to the raw CSV data. The code uses the D3.js library’s `d3.csv` API to fetch the dataset from a GitHub gist, and `d3.csvFormat` to calculate its size. The presentation is styled with CSS, including a background image, while the metadata message is inserted into an HTML `<pre>` element.

Mar 3, 2023