D

dineshtadepalli12

@dineshtadepalli12·17 public vizzes

Loading thumbnail…

Social network Task2

This example shows a small social network of nine people connected by weighted links, with node labels displayed beside each circle. The graph uses a force-directed layout via `d3.layout.force` to position nodes, and link thickness is scaled by the square root of the weight value from the JSON data. Nodes are rendered as SVG circles and text, with drag interaction enabled through `force.drag`. The visualization reads its graph structure from `graph.json` and applies simple styling for green circles and blue labels.

Loading thumbnail…

Familytree Task2

This example shows a family tree as an animated SVG diagram. Colored nodes represent individuals across four generations, linked by lime-green lines that grow from parent to child. The tree is built from an array of parent-child pairs using `d3.stratify` and laid out with `d3.tree`. Each node is a circle with a bold text label, and its fill color is determined by its generation depth. The links and circles appear via D3 transitions, with the data embedded directly in the HTML.

Loading thumbnail…

ICE8 Task1 Country map

This map of the United States displays all 50 states and their internal borders, rendered in an SVG with an indigo fill and teal boundary strokes. Built with React and D3 v5, it uses the `geoAlbersUsaTerritories` projection from the geo-albers-usa-territories library and draws geographic paths via `d3.geoPath`. State boundaries come from TopoJSON data loaded from the us-atlas package, with interiors computed using the `mesh` method.

Loading thumbnail…

Task 1 word map

This visualization displays a world map using a natural Earth projection, with each country rendered as a light green path with blue, semi-transparent borders against a dark sphere. The map is built with D3 v5, using `d3.geoPath`, `d3.geoNaturalEarth1`, and TopoJSON to parse the world-atlas dataset from unpkg. Country boundaries are drawn via SVG paths, while the overall projection’s sphere is filled black to contrast with the map’s pale background.

Loading thumbnail…

Fork of World Map

This visualization displays a natural Earth projection of the world map with countries rendered in light green and oceans in sky blue. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data sourced from the world-atlas package at 110m resolution. A sphere outline is drawn first, followed by country features parsed with TopoJSON’s `feature` method. The map is static, with no interactions or animations beyond the initial data join.

Loading thumbnail…

ICE7 Task3 Line Chart

This example shows the annual GDP of a country in billions of dollars over time, with the x-axis mapping years and the y-axis mapping GDP values. The visualization uses a line chart rendered as an SVG, where the data is loaded from a CSV file hosted in a GitHub Gist. The code builds scales with `d3.scaleTime` and `d3.scaleLinear`, generates axes using `d3.axisBottom` and `d3.axisLeft`, and draws the line with `d3.line`. The chart includes axis labels, gridlines via tick sizes, and a blue stroke for the line path.

Loading thumbnail…

ICE 7 Task2

This visualization shows the distribution of most catches among non-wicketkeepers as a pie chart with a color-coded legend. The data is loaded from a CSV file using D3’s `csv` function, and the pie chart is generated with `d3.pie` and `d3.arc`, rendered as SVG in an HTML page. The chart uses `d3.scaleOrdinal` to assign colors to each player’s catches, and legend labels display player names alongside their values formatted with `d3.format`. The visualization is built with D3 v5 and rendered in SVG.

Loading thumbnail…

ICE7 Task4

This visualization displays yearly GDP in billions of dollars, with time on the x-axis and GDP on the y-axis. A thick black line with a green area underneath represents the trend over time, using a basis curve for smoothing. The chart is rendered as SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators. Data is loaded as CSV from a GitHub gist, with axes styled via external CSS.

Loading thumbnail…

ICE 7 Task1

This animated scatter plot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—as axes every two seconds. It uses D3.js to load CSV data and render SVG circles colored by species (red, green, blue). The visualization employs `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function to update the axes and points dynamically via `setInterval`.

Loading thumbnail…

ICE7 Task1

This animated scatter plot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—on both axes every two seconds. Points are colored by species (red, blue, indigo) using D3’s `csv` loader to fetch the Iris dataset. The visualization leverages the reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom`, while SVG circles update via `setInterval` and data joins, rendering in the browser with D3 v6.

Loading thumbnail…

ICE 7 task

This example visualizes the number of catches by non-wicket-keepers in cricket, plotting each player against their catch count over time using an SVG line chart. The visualization employs D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `curveBasis`, and `line` to construct the chart, with a gradient stroke applied to the line path. The data is loaded from a CSV file hosted on GitHub, and the chart includes labeled axes and a title, with axes rendered via `axisLeft` and `axisBottom` and custom styling applied through CSS classes.

Loading thumbnail…

ICE 7 - Line Chart

This example shows a line chart rendered in SVG within a React framework, drawing a single red trend line across a 900x700 canvas. The code uses D3 v6 to create the chart structure, with linear gradients defined in the SVG defs to color both the line and axis text in brown and red tones. The visualization pulls data from the v3-source file, though the specific dataset is not visible in the provided markup. Axis labels and the chart itself rely on D3’s standard scale and axis APIs, while the overall layout is fixed by the SVG dimensions set in index.html.

Loading thumbnail…

Task2 ICE6 Scatter Plot

This visualization is a scatter plot that displays the relationship between petal length and sepal length for iris flowers. Each dot represents a single flower, with its horizontal position determined by petal length and vertical position by sepal length. The plot renders as an SVG using D3's `scaleLinear` for axis scaling and `axisLeft`/`axisBottom` for tick marks. Data is loaded asynchronously from a CSV file via `d3.csv`. The code uses the `select` and `join` API to create circle elements, and labels are positioned with SVG `text` elements.

Loading thumbnail…

ICE 6

This visualization displays the top 10 players by number of catches, using a horizontal bar chart where bar lengths correspond to catch counts. The data is loaded from a CSV file using D3's `csv` function. Rendered as an SVG, the chart relies on React to manage state and render the SVG elements, while D3's `scaleBand` and `scaleLinear` handle the categorical y-axis and quantitative x-axis scaling. Grid lines and axis ticks are drawn manually with D3's tick generation.

Loading thumbnail…

ICE 6

This visualization displays the top 20 countries ranked by GDP, using horizontal bars to show population values. The chart is rendered as an SVG using React and d3.v5. D3’s scaleBand and scaleLinear map country names and population data from a CSV file, while the x-axis tick marks are drawn with line and text elements. The data source is a GitHub gist, and the bars are colored green with a blue gridline for scale reference.

Loading thumbnail…

assignment 5

This example displays summary statistics from a CSV file, showing the data size in kilobytes, row count, and column count. It uses the D3.js library’s `d3.csv` method to fetch the external dataset and `d3.csvFormat` to calculate the formatted string length. The visualization also includes a simple SVG circle rendered alongside the text, with CSS styling applied to the page. The computed summary is displayed inside an HTML `<pre>` element, updating the page content dynamically.

Loading thumbnail…

Fork of Smiley Face Part I

This example displays a simple smiley face drawn with SVG shapes inside a React component. The face consists of a green circle with a black stroke for the head, two black circles for eyes, and a mouth created using an arc path. The code uses D3’s `arc` generator to define the mouth with specified inner and outer radii and angles, while React renders the SVG elements. The fixed viewport is 960 by 500 pixels, and the face is centered using a translation transform.