Divyasri0310

@Divyasri0310·14 public vizzes

ICE 08 11590101 Tree

This visualization displays a phylogenetic tree of dinosaur taxonomy, with branches for Ornithischia and Saurischia and their subgroups. Node labels are colored according to a color property in the data, using a hierarchical layout. The code employs D3 v5’s `tree` and `hierarchy` functions to compute positions, `linkHorizontal` for curved branch paths, and `zoom` for interactive panning and scaling. Data loads from an external JSON file, and the SVG renders with a custom Playfair Display font and CSS styling.

Mar 30, 2023

Loading thumbnail…

ICE 08 Network Graph 11590101

This interactive network graph visualizes friend connections between eight individuals. Each node represents a person, and each directed, arrowed line indicates a "Friend with" relationship. The graph uses a force-directed layout, dynamically positioning nodes through physical simulation while users can click and drag any node to explore the network. The visualization relies on D3 v6 APIs, including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, and renders nodes as circles with labels over an SVG canvas.

Mar 30, 2023

Loading thumbnail…

ICE 08 11590101 Country Map

This choropleth map of India visualizes the country's first-level administrative divisions, with each state filled using a categorical color scheme and labeled with its name. The visualization is rendered as an SVG using D3 v5 and the TopoJSON library, which processes geographic data from a local maps.json file containing IND_adm1 boundaries. The map employs a Mercator projection with custom translation and scaling, and path generation is handled by `d3.geoPath`. State names are positioned using the projection's centroid function, and the design features a gradient background with white state borders that highlight on hover.

Mar 30, 2023

Loading thumbnail…

ICE 08 11590101

This example presents a world map rendered with D3 v5 and TopoJSON, using the `geoMercator` projection and `geoPath` to draw country boundaries from the world-atlas countries-110m dataset. The SVG displays oceans in blue and countries in purple, with a hover effect that changes the fill color to pink via CSS. The code loads the TopoJSON data asynchronously with `d3.json`, converts it to GeoJSON using `feature`, and appends each country as a path element.

Mar 30, 2023

Loading thumbnail…

Reusable D3 Scatter Plot with IRIS Data

This example presents a reusable scatter plot of the Iris dataset, cycling through four attribute pairs every two seconds. It renders SVG symbols whose shapes encode the flower species, with axes updating to reflect the current dimensions being compared. Built with D3 v6, the visualization uses `scaleLinear`, `scaleOrdinal`, `symbol` for mark generation, and `axisBottom`/`axisLeft` for scales. Data is loaded via `csv` from a GitHub gist, while a `setInterval` loop reconfigures the plot’s accessor functions to animate between variable combinations.

Mar 13, 2023

Loading thumbnail…

ICE 7 Area Chart 11590101

This area chart visualizes rice production in the US from 1991 to 2021, with the year on the x-axis and production in tonnes on the y-axis. The chart uses a smooth curve for the line and a teal filled area beneath it, styled with a light blue background. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis`, along with `csv` for loading data and `axisBottom`/`axisLeft` for labeled axes with gridlines. Data is parsed from a remote CSV file.

Mar 12, 2023

Loading thumbnail…

ICE 7 Line Chart 11590101

This example visualizes rice production in the US from 1991 to 2021 using a line chart rendered in SVG. The chart plots production volume in tonnes against parsed year values, with axes, gridlines, and labels styled via CSS. It loads CSV data from a GitHub gist and uses D3 v5 APIs including `csv`, `scaleTime`, `scaleLinear`, `line`, `axisBottom`, `axisLeft`, and `extent` to generate the visualization. The line path is drawn in purple with a stroke width of four pixels.

Mar 12, 2023

Loading thumbnail…

ICE-7 PieChart 11590101

This pie chart visualizes the net worth of the top 10 billionaires, with each slice labeled by its dollar value and accompanied by a legend listing names and amounts. The code uses D3 v5 APIs including `d3.pie()`, `d3.arc()`, and `scaleOrdinal` to generate SVG paths, with data fetched as CSV from a Gist. Slice labels are positioned using `arc.centroid()`, and a linear-gradient background is applied via CSS.

Mar 12, 2023

Loading thumbnail…

Pie Chart 11590101

A donut chart visualizes 2022 US auto sales by brand, displaying each brand's market share as a proportional arc with a color-coded legend. The chart shows sales percentages and raw numbers (in thousands) next to each brand name using D3's `pie`, `arc`, and `scaleOrdinal` APIs. Data is loaded asynchronously from a CSV via `d3.csv`, with the total sales calculated to compute percentages for display.

Mar 12, 2023

Loading thumbnail…

ICE 7 Line Chart 11540905 Task 3

This line chart displays Amazon’s annual net income from 1994 to 2020, with years on the x-axis and income in millions on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator to draw the path. Data is loaded via `d3.csv` from a GitHub gist, with gridlines styled via tick marks and a red stroke for the income trend line.

Mar 11, 2023

Loading thumbnail…

ICE_06

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, using a thistle background with crimson, dark blue, and green circles. Built with React and D3 v5, the code uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map data from a GitHub-hosted CSV file. Each circle’s x and y positions derive from flipper and body measurements, while the `join` operator appends SVG circles with radii and species-based colors.

Mar 9, 2023

Loading thumbnail…

ICE-6_11590101

This visualization displays the top 10 countries by total COVID-19 cases as a horizontal bar chart, with country names on the y-axis and case counts on the x-axis. The bars are rendered as SVG rectangles using React and D3 v5, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`, and axes are drawn manually with gridlines and tick labels. The title indicates the chart focuses on the highest COVID-19 case counts among nations.

Mar 9, 2023

Loading thumbnail…

ICE5_DV

This example displays metadata about a company’s employee dataset, including its size in kilobytes, number of rows, number of columns, and column names. The data is loaded from a CSV file using `d3.csv` with a Promise, and the resulting information is rendered as plain text in a `<pre>` element. The page includes a linked dataset, styled headings, and a background image, with styling managed through a separate CSS file. The implementation relies on D3.js version 5 for data parsing and text formatting.

Mar 2, 2023

Loading thumbnail…

Fork of Face with path curves

This visualization renders a stylized face using React and SVG, composed of layered geometric components such as curved path strokes for eyes, lips, and eyebrows, a filled circle for the face, and ellipses for earrings. The code defines reusable React components like `Eyes`, `Lips`, and `Earings`, then positions them with SVG transform translations and scaling around a central coordinate system. The face is assembled from path curves and shapes, with the ReactDOM renderer mounting the SVG output into the DOM.

Feb 23, 2023