L

likith1266

@likith1266·26 public vizzes

Loading thumbnail…

USA Map

This example displays a map of the United States, rendered as an SVG using a React component. It shows the nation’s land area in green, state boundaries as black lines, and an orange sphere background. The code employs D3’s `geoAlbers` projection and `geoPath` to draw geographic features, with `geoGraticule` available for reference lines. TopoJSON data from the `us-atlas` repository is loaded via `d3.json`, and the `feature` and `mesh` functions extract the landmass and state interiors.

Loading thumbnail…

ICE-8 World Map

This interactive world map visualizes country boundaries using data from the World Atlas TopoJSON. It renders a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, displaying green landmasses with teal country interiors and gray graticules on an orange sphere. Built with React, the visualization loads the TopoJSON via d3.json and uses topojson.feature and topojson.mesh to prepare the geographic data for SVG rendering.

Loading thumbnail…

ICE-8 Family Tree

This visualization shows a hierarchical family tree with three levels of nodes, where circle size encodes a numeric value and node color varies by branch. The root node "Sandeep" branches into two children, each with their own offspring, using colored links that match the child nodes' fill colors. Built with D3 v5, it uses `d3.hierarchy` and `d3.tree` to compute the layout, then renders SVG paths for curved links and circles with text labels. Node styling is applied directly via inline attributes and CSS classes, with stroke and fill colors drawn from the data properties.

Loading thumbnail…

Social Network Graph

This social network graph displays eight individuals connected through friendship links, with each node labeled by name and visualized as a green circle. The network structure is computed using `d3.forceSimulation` with force-based layout including link, charge, collision, and center forces, applied to data loaded from a JSON file. The SVG rendering includes drag-and-drop interaction via `d3.drag`, and hover effects highlight nodes by changing their stroke color. Marker arrows indicate link direction between source and target nodes.

Loading thumbnail…

Fork of papa - Social Network Graph

A social network graph displays eight people as purple circular nodes connected by directed lines with arrowheads. The visualization uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, while forceLink manages the connections. Users can drag nodes to rearrange the layout via d3.drag. The data.json file provides the nodes and links with relationship labels and strength values, with link thickness not directly reflecting the value attribute. Nodes highlight with a green stroke on mouseover, and labels are rendered as SVG text elements.

Loading thumbnail…

ICE-8 Network Graph

This example shows a small network of six people connected by weighted links, with each node labeled by name and grouped by color. The visualization uses the D3.js v4 force layout via `d3.layout.force` to position nodes and links dynamically. SVG circles and text elements render the graph, with link stroke widths proportional to the `weight` attribute from the JSON data. Node positions update on each `tick` event, and nodes support drag interactions through `force.drag`.

Loading thumbnail…

ICE-8 World Atlas

This visualization displays a world map using the Natural Earth projection, filling landmasses in green with black borders and the ocean sphere in orange. It loads country boundaries from a TopoJSON file via the `json` method, then converts them to GeoJSON using `feature` from Topojson. The map is rendered as SVG paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The code asynchronously fetches data and appends country paths to the SVG, with styling defined in external CSS.

Loading thumbnail…

ICE 7 Pie Chart

This visualization presents a pie chart of top car company sales by price, with each slice labeled with its value and accompanied by a legend listing the corresponding model names. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the segments and map categorical colors, while the legend is built manually with SVG `rect` and `text` elements. Data is loaded from a GitHub Gist via `d3.csv` in a React-based setup, with the SVG rendered directly in the browser.

Loading thumbnail…

ICE 7 line chart Likith

This visualization displays Google’s stock price over the last 10 years using a line chart. The x-axis encodes time by year, while the y-axis shows stock value, with grid lines and axis labels styled via CSS. Built with D3 v5 in a React framework, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded from a CSV file hosted on GitHub and parsed into JavaScript `Date` objects before drawing.

Loading thumbnail…

D3 Scatter Plot-Likith

This interactive scatter plot visualizes the Iris Dataset, initially mapping petal length against sepal length with points colored by species. The visualization updates every two seconds, cycling through different attribute combinations (petal width, sepal width, petal length, sepal length) for the x-axis. Built with D3.js, it uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and a reusable scatter plot module. The SVG chart includes labeled axes, a title, and animated transitions between views.

Loading thumbnail…

Ice 7 area chart

This area chart visualizes 10 years of Google stock prices, with the x-axis encoding years and the y-axis encoding stock values. The chart uses D3 v5 within a React framework, rendering as an SVG. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area` with `curveBasis` to draw the filled region beneath a smoothed line. Data is loaded from a CSV via `d3.csv`, with axes labeled and ticks formatted using `d3.format`.

Loading thumbnail…

Fork of Fork of ICE-7 pie chart

This pie chart visualizes the number of car units sold, categorizing the data by class name and assigning each segment a distinct color from a predefined palette. The chart renders as an SVG with arcs generated using d3.arc and positions data through d3.pie, while d3.scaleOrdinal maps colors to categories. A legend on the right displays each class with its corresponding color and formatted value using d3.format. Data is loaded asynchronously from a CSV file via d3.csv.

Loading thumbnail…

Fork of ICE-7 pie chart

This pie chart displays the number of car units sold for different car models, using a dataset of units per car name. The visualization renders each segment as an arc with a distinct color and includes a legend showing the car name and its corresponding value. Built with D3 v5, it uses the `pie` and `arc` generators to compute the segments, while `scaleOrdinal` assigns colors and `format` handles the numeric tick labels. The data is loaded asynchronously via `d3.csv` from a GitHub gist.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization displays the top 10 countries by deaths from air pollution in 2020, using a pie chart where each slice represents a country’s death count. The chart is rendered as an SVG using D3 v5, with data fetched from a CSV URL. The code uses `d3.pie` and `d3.arc` to generate the slices, while `d3.scaleOrdinal` assigns colors. Text labels show death counts in thousands, and a legend lists each country with its corresponding color and value.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths in 2020 due to air pollution, with each slice labeled in thousands and a corresponding legend. The code uses d3.pie and d3.arc to generate the chart, d3.scaleOrdinal to assign slice colors, and d3.format for tick labels. Data is loaded via d3.csv from a remote URL. The SVG rendering places the pie at (250,250) and the legend at (500,100), with text elements positioned via arc.centroid.

Loading thumbnail…

Fork of Reusable Scatter Plot

A scatter plot of the Iris dataset shows petal length against sepal length for three flower species, with each species color-coded in green, indigo, or red. Users click through animated transitions that rotate the x-axis among four measured variables every two seconds, using D3 scales, axes, and circle elements. The visualization also renders an additional set of circles with rectangular corner radii based on sepal measurements, and loads data asynchronously via D3’s `csv` parser.

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the axes while coloring points by species. The chart uses D3 v6 with SVG rendering, loading CSV data via `d3.csv` and parsing numeric values. Scales are created with `d3.scaleLinear` and axes with `d3.axisLeft` and `d3.axisBottom`. Circles are drawn with `d3.selectAll` and a data join, with fill colors assigned per species via a switch function. Axis labels are added as SVG text elements.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width on the x- and y-axes, with each point colored by species (green, blue, or red). Built with D3 v6 and SVG, it uses `d3.csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes. The code also reads sepal measurements but does not use them visually. Data is loaded from a GitHub-hosted CSV file, and the chart fills the browser window with fixed margins and 24-pixel tick labels.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This fork of the Iris Dataset scatter plot visualizes sepal and petal measurements, encoding petal length and width along the x- and y-axes while coloring points by species (setosa, versicolor, virginica). The D3 v6 code loads CSV data, uses `scaleLinear` and `extent` for scales, and renders circles via SVG with `select` and `.join`. The circles include `rx` and `ry` attributes mapped from sepal dimensions, and axes are added using `axisLeft` and `axisBottom`. The layout fills the browser window, with tick labels sized at 24 pixels.

Loading thumbnail…

ICE 6 - Likith Chowdary Nuthi

This visualization displays the top 10 countries by Olympic gold medal counts using a horizontal bar chart. The chart is built with React components and D3.js, specifically using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gold medal values are loaded from a CSV file via `d3.csv`, with the data sliced to ten entries. Each bar is rendered as an SVG `<rect>` element, with gridlines and axis labels generated through D3’s tick methods.

Loading thumbnail…

Fork of Bar Chart

This example shows a horizontal bar chart of the elevations of 25 mountain peaks, using the Mountains_dataset.csv. It displays the marks and channels concept with rectangular bars encoding elevation values. The visualization is built with React and D3 v5, using `scaleBand` for the categorical mountain names and `scaleLinear` for the elevation axis. The SVG is rendered with React components, and the chart includes gridlines and axis labels, with a static dataset fetched via `csv`.

Loading thumbnail…

Fork of Bar Chart

This bar chart visualizes the elevations of the 25 highest mountain peaks, using horizontal bars scaled from 14,000 feet upward. The visualization maps mountain names along the y-axis and elevation values along the x-axis, with tick marks and gridlines rendered as SVG elements. It is built with React for component structure and uses D3 v5 APIs including `scaleBand`, `scaleLinear`, `max`, and `csv` to load and process the Mountains_dataset.csv file. The chart applies a steelblue fill to the rectangular marks and an orange stroke for its vertical gridlines.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of anime ratings for the top 20 entries, loaded from a CSV file hosted on GitHub. It uses React to manage state and render SVG elements, while D3 v5 (via d3.csv, d3.scaleBand, and d3.scaleLinear) handles data parsing and scaling. The x-axis is generated with d3’s tick marks and labeled lines, and each bar’s width is proportional to its anime_id value, with country names on the y-axis.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of the top 20 countries by COVID-19 cases, using data loaded from a CSV file via `d3.csv` and rendered with React and D3 v5. The visualization uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and draws SVG `<rect>` elements for the bars with tick marks and labels generated from `xScale.ticks()`. The chart updates reactively from React state, with the data slice and parsing handled inside a `useEffect` hook.

Loading thumbnail…

ICE-5 Likith Chowdary Nuthi

This visualization presents a welcome screen for "Captain America's World," displaying a static image of the character alongside a summary of a used car dataset loaded from a CSV file. Using D3.js version 7, the code fetches the data via `d3.csv`, then calculates and displays the dataset’s size in kilobytes, row count, and column count as plain text in a `<pre>` element. The page styling relies on custom CSS, including a blue background, silver preformatted blocks, and a fixed image size, with no interactive charts or transitions.

Loading thumbnail…

Fork of homework smiley face

A stylized smiley face rendered as a static SVG. The code uses React and D3's `arc` generator to create the black mouth, while circles, ellipses, and lines compose the face features, including multicolored pupils and geometric "hair" lines. The graph is centered within a fixed 940×490 pixel SVG canvas, with all shapes positioned via explicit coordinates.