tejasviprasad06@gmail.com

@tejasvi06·14 public vizzes

ICE-8: Tree chart for cat species

This tree chart visualizes the taxonomic hierarchy of cat species, starting from the Felidae family and branching through Pantherinae and Felinae subfamilies down to individual species like lions and cheetahs. Each node is color-coded by taxonomic level, with curved links drawn using SVG paths whose stroke colors indicate the parent-child relationship. The visualization uses the d3.tree layout to position nodes hierarchically, with d3.hierarchy structuring the nested data and custom link path calculations creating smooth cubic Bézier curves between parent and child nodes.

Mar 29, 2023

Loading thumbnail…

Japan Country

This example displays a map of Japan rendered as SVG paths, with a slider controlling the level of topographic simplification. The visualization uses a TopoJSON dataset of Japan, which is converted to GeoJSON via `topojson.feature` and then processed with `topojson.presimplify` to compute area-based simplification weights. A `d3.geoTransform` custom stream applies a threshold filter, and `d3.geoPath` projects the filtered coordinates using a Mercator projection fitted to the viewport. The slider triggers redraws that dynamically show coarser or finer terrain detail, with a header reading “Japan Map.”

Mar 29, 2023

Loading thumbnail…

ICE 8 - Social Network Graph

This visualization displays a social network of eight people, showing friendships among the group through a force-directed graph. Each person is an orange circle labeled with their name, and lines with arrowheads connect friends, with one duplicate link appearing between TEJU and MADHU. The graph uses `d3.forceSimulation` with forces for links, charge, collision, and centering to arrange the nodes. Users can drag nodes to reposition them, and hovering highlights a node with a green outline. Node and link data come from a JSON file, rendered as SVG elements.

Mar 29, 2023

Loading thumbnail…

Making a map

This example shows an interactive world map with zoom and pan capabilities. Countries are rendered as styled SVG paths with hover highlighting, while the globe’s sphere is drawn as a separate background layer. The visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate paths, and `d3.zoom` for interaction. Geographic data comes from the world-atlas TopoJSON file, processed via `topojson.feature`, and rendered as SVG with CSS-styled country shapes.

Mar 27, 2023

Loading thumbnail…

ICE-7 Line Chart Temperature vs Time

This line chart displays temperature over time for Massachusetts, plotting data points from a CSV file on an SVG canvas. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, with the line generated via d3.line and curveBasis for smoothing. Axes are rendered with d3.axisBottom and d3.axisLeft, including custom tick lines and rotated axis labels. The chart loads external data through d3.csv and applies margin-based layout, showing a single orange line with grid lines and a title.

Mar 11, 2023

Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the axes while using different symbols to represent each flower species. The visualization automatically cycles through four data columns every 15 seconds, updating the x-axis to explore different variable relationships. Built with D3.js version 6.7.0, it leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbols`, and `symbol` APIs to create an SVG chart with animated transitions. The reusable chart component demonstrates a modular approach to data visualization.

Mar 11, 2023

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes the top 10 countries by COVID-19 deaths, with each slice’s area proportional to the total fatalities and labeled with values in thousands. A legend on the right pairs each country with its corresponding color and death count. Built with D3.js v5, the example uses `d3.pie` to compute arc angles, `d3.arc` to generate SVG paths, and `d3.scaleOrdinal` for slice colors. Data is loaded asynchronously from a CSV via `d3.csv` and sorted before rendering.

Mar 10, 2023

Loading thumbnail…

ICE-7 Area chart Temperature vs Time

This area chart displays temperature changes over time for Massachusetts, with temperature on the y-axis and timestamp on the x-axis. The visualization uses an orange filled area beneath a curve rendered as an SVG path generated by d3.area with curveBasis smoothing. Axes are created with d3.axisBottom and d3.axisLeft, while d3.scaleTime and d3.scaleLinear map data to pixel coordinates; the CSV data is loaded and parsed via d3.csv.

Mar 10, 2023

Loading thumbnail…

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

This example displays a horizontal bar chart of COVID-19 death counts for 15 countries, ranked by total deaths. Built with React and D3 v5, it renders SVG marks through React components, using D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` to load the external dataset. The code manually draws gridlines, axis ticks, and labels, with each bar’s width mapped to the death count.

Mar 9, 2023

Loading thumbnail…

Scatter Plot- Penguine Dataset

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis and body mass on the y-axis, with each circle colored by penguin species (Adelie, Gentoo, or Chinstrap). The code uses D3 v5’s `csv` loader, `scaleLinear` for axes, and `extent` to compute domains, rendering circles as SVG elements with `attr`-based positioning. It also loads bill length and depth values as extra attributes on each mark, despite not using them for the chart’s geometry. The axes are drawn with `axisLeft` and `axisBottom`, and custom text labels are appended manually.

Mar 8, 2023

Loading thumbnail…

Data Visualization ICE-5

This page displays metadata about an Airbnb dataset, including its size in kilobytes, row count, and column count. The visualization presents this information as plain text within a pre-formatted HTML element, overlaid on a background image of the Airbnb logo. The code fetches a CSV file and uses the D3.js `d3.csv` and `d3.csvFormat` APIs to load and calculate the data's size, then updates the page’s content dynamically via JavaScript. Styling is handled through external CSS, which sets the background image and text colors.

Feb 28, 2023

Loading thumbnail…

ICE-4 Making a face using Vizhub

This example assembles a cartoon face from SVG primitives, including hair, ears, a neck, head, eyes, eyebrows, nose, mouth, and animated hat ellipses, with dark sunglasses and a cigarette added. The code uses D3.js v5 API’s `select` and `arc` to construct paths and attach shapes, while `transition().duration(2000)` animates the hat’s vertical position in a looping up-and-down motion. The face is drawn entirely with hard-coded coordinates and no external data, rendering in SVG within a 960-by-500 viewport.

Feb 20, 2023

Loading thumbnail…

ICE-4 Make a face with Vizhub.js!

A cheerful orange smiley face with animated eyebrows is rendered as an SVG using D3.js v5. The face is constructed from circles, rectangles, and a path, with the mouth drawn via the `arc` generator. The eyebrows move up and down through chained `transition` calls with a duration of 2000 milliseconds, demonstrating fundamental DOM manipulation. The visualization runs in a yellow viewport with hardcoded dimensions of 900 by 500 pixels.

Feb 20, 2023

Loading thumbnail…

Fork of Fork of Smiley Face Part II - Mila PWD

This example renders a stylized Portuguese water dog face using React and SVG. The dog, built from geometric primitives, includes a black head shape, white eyes with brown pupils, a brown nose with black nostrils, and a red tongue inside a white mouth. The code uses React’s `ReactDOM.render` to mount an `<App>` component that generates SVG elements like `<circle>`, `<polygon>`, `<ellipse>`, and `<rect>`, all positioned relative to the screen’s center. The drawing dynamically adapts to the browser’s inner width and height.

Feb 20, 2023