Deeraj Thakkilapati

scatter_KL

Area Chart KL

pie chart

ICE8 : Social Network graph

This example visualizes a social network as an interactive force-directed graph. Eight people are connected by friend relationships, with each node represented by a colored circle and its name label. The graph uses D3 v6’s `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, while SVG `<line>` elements with arrow markers depict the connections. Users can drag nodes to reposition them, and hovering highlights a node with a green stroke. Data is loaded from a JSON file containing node and link arrays.

Visualizing Tree for Plant Species

This example visualizes a hierarchical tree of plant species, showing the branching relationships between flowering plants like tulips and roses, and non-flowering plants such as ferns and mosses. The D3.js tree layout organizes nodes horizontally by depth, while SVG circles and green links represent each species and its connections. Clicking a node triggers an animated collapse or expansion of its children using D3's transition system. The code uses `d3.layout.tree`, `d3.svg.diagonal`, and `d3.selectAll` with 750-millisecond transitions for smooth interactivity.

ICE-8:India Map with states

This example displays a choropleth map of India with each state filled by a categorical color scale. It uses D3 v5’s `geoMercator` projection and `geoPath` to render SVG paths from TopoJSON state boundaries, sourced from a remote GitHub repository. State names are shown as tooltips via appended `title` elements. The color mapping uses `scaleOrdinal` with `schemeCategory10`, and boundary styling is applied through CSS.

ICE-8 World Map

This example shows a world map of countries rendered as filled green shapes with black outlines on a white sphere. It uses D3.js to load TopoJSON data from the world-atlas package, converts it to GeoJSON features via `topojson.feature`, and draws the paths with a `d3.geoPath` generator using the `d3.geoNaturalEarth1` projection. The SVG output includes a separate sphere path for the globe outline, with styling applied through the external stylesheet.

ICE7_Area_chart

This area chart visualizes soccer data with previous points plotted over time. It uses D3 version 6, specifically `scaleTime`, `scaleLinear`, and the `area` generator with `curveBasis` to create a smooth filled path. The SVG rendering includes styled axes with tick marks and labels, and the data is loaded from an external CSV via `csv()`.

DEERAJ_ICE7_line_chart

This line chart shows the points scored by Germany’s soccer team over the last 15 years, with year on the x-axis and previous points on the y-axis. It renders as an SVG using D3 v5, loading data from a CSV file via `d3.csv`. The visualization uses `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` with `path` to draw the green trend line, with custom styling from an external stylesheet.

Deeraj_ICE7_PIE Chart

This pie chart visualizes the points scored by different countries in FIFA, with each slice representing a country’s previous points total. The chart is rendered as an SVG using D3 v5, with the `d3.pie` and `d3.arc` functions generating the slices and labels, while `d3.scaleOrdinal` assigns colors. A legend on the right maps each color to its country name and numerical value. Data is fetched asynchronously from a CSV file via `d3.csv`.

Reusable D3 Scatter Plot for IRIS

This example presents the classic Iris dataset as an interactive scatter plot, mapping petal width and sepal length to the x and y axes while encoding species with distinct symbols. Built with D3.js v6, it uses a reusable scatter plot factory function that leverages `scaleLinear`, `scaleOrdinal`, and `symbol` APIs. Data is loaded from a CSV file, rendered as SVG paths, and includes labeled axes with a custom font.

Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length on the x-axis and body mass on the y-axis. Each point is colored by penguin species (Adelie, Gentoo, or Chinstrap) and its radius visually encodes bill dimensions. Built with D3 v5, it uses `d3.csv` to fetch the remote dataset, `d3.scaleLinear` and `d3.extent` for axes, and `d3.axisLeft` and `d3.axisBottom` for labeled scales. The plot is rendered as SVG circles positioned using `d3.select` and data-driven joins.

ICE-6 Q1

This example shows the top 15 countries by points scored in FIFA, rendered as a horizontal bar chart using React and D3 v5. The D3 `csv` function loads the data, and `scaleBand` positions the country labels on the y-axis while `scaleLinear` maps point values to bar widths. The chart is drawn as an SVG, with blue gridlines and tick labels generated from `xScale.ticks()`. Spacing above and below the plot area is reserved, though no title or legend appears within the SVG itself.

Fork of D3 Starter

This example displays the text "Hello D3 version 7" centered on a plain white page using the D3.js library. The page loads D3 version 7.8.2 from a CDN and calls `d3.select('body')` to target the body element, then applies `.text(...)` to set its content. The visualization demonstrates a minimal D3 setup, where the HTML structure is predefined and the JavaScript in `index.js` directly manipulates the DOM to produce the static output.

ICE5

This example displays the metadata of the most browsed songs in 2021, including file size, row count, and column count, on a page with a decorative background. It loads a CSV dataset using `d3.csv` and computes the message text with `d3.csvFormat` and `Math.round`. The page uses D3 v7, vanilla JavaScript, and CSS to present the information, with the result inserted into a `<pre>` element via `textContent`.

Lets Draw a Clown

This example uses D3.js v5 to construct a clown from basic SVG shapes, including circles, paths, and rectangles. The code builds the clown’s features—ears, eyes, nose, mouth, limbs—through explicit `attr` calls, and centers the figure using an SVG group transformed to the middle of the canvas. An animation loop uses `transition` with a duration of 1000 milliseconds and chained `.attr` tweens to make the red nose expand and contract repeatedly, with the `on('end', animate)` callback re-triggering the sequence. The static clown drawing is rendered with inline style definitions from a separate stylesheet.

Fork of Fork of Let's make a face with D3.js!

A face rendered in SVG with D3.js v5 shows a yellow smiley with eyes, pupils, nose, mouth, and a cap, all built from basic shapes. The code uses D3 selections to append circles and a path, with the mouth drawn via the `d3.arc()` generator. Static attributes set positions and styles, while the overall composition centers on an SVG group. The example demonstrates fundamental DOM manipulation through D3’s `select` and `append` methods.

Fork of Fork of Let's Make a Face Part

This interactive visualization assembles a smiley face from modular React components, combining a green-to-yellow gradient background circle with eyes, a mouth, and teeth. Built with React and rendered as SVG, the face uses D3's `arc()` API to draw the mouth and teeth shapes as annular sectors. The teeth are further detailed with black line elements of varying heights, creating a stylized, playful appearance. The face’s dimensions and features are parameterized through props, allowing for easy customization of size, positioning, and component attributes.

Fork of Fork of Let's make a face with D3.js!

This example shows a yellow smiley face with animated eyebrows, which shift upward and then return to their resting position in a looping motion. The face is constructed entirely from SVG primitives—circles for the eyes and head, rectangles for the brows, and a path for the mouth—all centered within a 960×500 viewport. Using D3 v5, the code demonstrates DOM manipulation through chained `select`, `append`, and `attr` calls, while the eyebrow animation relies on the `transition` API to tween the `transform` attribute over 1500 milliseconds.