Skip to main content
Log in
P

pravalika.thogaru10@gmail.com

@TogaruPravalika·24 public vizzes

Loading thumbnail…

Data Visualization ICE8 - Country Map

This example displays a choropleth-style map of the United States using red-filled states with blue outlines and green hover states. Built with D3 v5 and TopoJSON, it loads US Atlas state boundaries and projects them using `geoAlbersUsa`. The `geoPath` generator renders each state as an SVG `<path>`, with a `<title>` element revealing the state name on hover. The map uses the `geo-albers-usa-territories` library for accurate territory placement.

Mar 30, 2023
Loading thumbnail…

Data Visualization ICE8 - Network Chart

This network chart visualizes a friend graph of eight people, with pink circular nodes labeled with names and black, arrowed lines showing the relationships between them. The chart uses D3.js force simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`) to position nodes, representing weighted friendships from a local `data.json` file. Nodes are draggable, change stroke on hover, and the SVG rendering includes markers for directed edges.

Mar 30, 2023
Loading thumbnail…

Data Visualization ICE8- Tree Map

This interactive tree map visualizes a phylogenetic tree of life, showing the hierarchical relationships among Bacteria, Archaea, and Eukarya down to specific species. Built with D3.js version 3.5, it uses `d3.layout.tree` to compute node positions and `d3.svg.diagonal` to draw curved links between generations. Users can expand or collapse branches through click interactions, with smooth animations updating the SVG layout. The dataset is embedded as a JavaScript array, with nodes colored by taxonomic level, and node styling defined via CSS.

Mar 30, 2023
Loading thumbnail…

Data Visualization - ICE8 - World Map

This example displays a world map using the D3.js library, rendering countries as red paths with blue outlines on a black sphere. It uses the `geoEquirectangular` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. Hovering over a country changes its fill to green via a CSS `:hover` rule. The visualization demonstrates geospatial data rendering with D3 v5 and TopoJSON’s `feature` method.

Mar 29, 2023
Loading thumbnail…

Fork of ICE - 8 Making Maps Country

This example displays a world map rendered as violet countries with black outlines on a green background, using geographic data from the World Atlas TopoJSON file. It isolates the United States of America from the full country feature collection while drawing all countries via d3.geoPath with the d3.geoAlbersUsa projection. The visualization filters features by name property and appends SVG path elements for each country, demonstrating map generation with topojson.feature and D3’s v5 API.

Mar 29, 2023
Loading thumbnail…

DV ICE7- Area Graph

This area graph shows annual car sales data from 2013 to 2022, with the x-axis representing years and the y-axis showing total sales. The chart uses D3 v5, specifically referencing the `scaleTime`, `scaleLinear`, `area`, and `curveBasis` APIs to generate a smooth, filled path in red. It loads CSV data from a GitHub gist and renders the visualization as an SVG, complete with labeled axes and a title. The y-axis uses a custom tick formatter that abbreviates large numbers (e.g., converting billions to "B").

Mar 12, 2023
Loading thumbnail…

DV ICE7- Line Graph

This line graph displays annual car sales totals from 2013 to 2021, with time on the x-axis and total sales on the y-axis. The visualization loads data from a CSV file, parses date strings, and uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the axes. A d3.line generator draws the path connecting data points, with custom tick styling and colored axis labels. The SVG rendering includes grid lines via tick sizes and a dedicated line path with stroke styling.

Mar 12, 2023
Loading thumbnail…

DV ICE7-Reusable Scatter Plot for Iris Data

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length across three flower species. The code uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` to render distinct shapes for each species. A reusable `scatterPlot` function configures margins, data accessors, and symbol size before rendering SVG marks. The chart displays all 150 records from the imported CSV file, with axes labeled and styled using the Share Tech font.

Mar 12, 2023
Loading thumbnail…

DV ICE7- Pie Chart for Monthly spendings data

This example shows a pie chart of monthly spending across departments, with each slice labeled and a legend displaying both the department name and its expenditure amount in dollars. The chart is rendered as an SVG using D3 v5, with the pie layout and arc generator (via `d3.pie` and `d3.arc`) computing slice positions and paths. A categorical color scale (`scaleOrdinal`) assigns colors to slices, and text elements are placed at arc centroids using `arcGenerator.centroid`. Data is loaded asynchronously from a CSV file via `d3.csv`, and the legend is built manually with appended rectangles and text elements.

Mar 12, 2023
Loading thumbnail…

Fork of Time Series: Part 2 - Line Chart

A line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, drawing a smooth, natural curve through the data points using D3's `line` and `curveNatural` generators. Time is mapped to the x-axis via `scaleTime` and temperature to the y-axis via `scaleLinear`, with custom `AxisBottom` and `AxisLeft` components rendering tick marks and labels. The React component loads the CSV asynchronously with `useEffect` and `csv`, applying a `timeFormat` for weekday labels. The SVG output is styled with CSS, including colored axes, grid lines, and a curved stroke for the temperature trend.

Mar 12, 2023
Loading thumbnail…

Fork of

A pie chart displays marks for different subjects, with each slice colored and paired with a legend identifying the subject and its numeric value. The chart reads subject and mark data from a CSV file via `d3.csv`, and uses `d3.pie` and `d3.arc` to compute the slice geometry, while `d3.scaleOrdinal` assigns categorical colors. Legends are generated as SVG groups with rectangles and text, and the whole visualization is rendered as an SVG element.

Mar 12, 2023
Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to display text using D3 version 7, outputting “Hello D3 version 7” in the browser. The code selects the document body via the `select` utility and sets its text content. A plain HTML page loads the D3 library from a CDN and then executes the bundled JavaScript. The styling renders the text at a massive 13em font size, but no data or animation is involved.

Mar 12, 2023
Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to display text using D3 version 7, outputting “Hello D3 version 7” in the browser. The code selects the document body via the `select` utility and sets its text content. A plain HTML page loads the D3 library from a CDN and then executes the bundled JavaScript. The styling renders the text at a massive 13em font size, but no data or animation is involved.

Mar 12, 2023
Loading thumbnail…

Piechart ICE - 7 Rohith Arabati

This pie chart visualizes annual car sales for different companies in India, with each slice labeled with its sales value in thousands and accompanied by a color-coded legend. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart from CSV data fetched from a GitHub gist. The SVG rendering includes pie segments, value labels, and a legend, all styled with custom CSS. The chart highlights relative sales proportions among companies, making comparisons straightforward.

Mar 12, 2023
Loading thumbnail…

Fork of HTML Starter

This example shows a single large text message, “Hello HTML!”, centered prominently within the browser window. The implementation uses basic HTML, CSS, and JavaScript with styles applied through a class selector. It demonstrates the simplest possible setup for rendering static content, relying on the DOM’s structure rather than any external libraries or data sources. The page is a bare-bones template that highlights how CSS controls typography and layout alignment without additional visualization logic.

Mar 6, 2023
Loading thumbnail…

Scientific Data Visualization ICE-6: Marks and Channels

This bar chart displays the calorie counts of the first 20 cereal products from a CSV dataset, using horizontal rectangles to encode values. The visualization employs React for structure and the d3 library's `scaleBand` and `scaleLinear` for axis mapping, with SVG for rendering. The code loads data via `d3.csv` from a gist URL, and the chart includes custom tick labels for both axes.

Mar 6, 2023
Loading thumbnail…

Data Visualization ICE6-Q2: Penguins Dataset Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The visualization uses D3 v6’s `scaleLinear` for axis scaling, `csv` for data loading, and SVG circles for marks, with axes generated via `axisLeft` and `axisBottom`. The chart also includes titles and axis labels to clarify the variables displayed.

Mar 5, 2023
Loading thumbnail…

Fork of Penguins Dataset Scatter Plot

This scatter plot visualizes the Penguin dataset, displaying flipper length on the x-axis and body mass on the y-axis, with each point colored by species (orange for Adelie, red for Gentoo, blue for the others). The code uses d3.csv to load data from a GitHub gist, d3.scaleLinear for both axes, and d3.axisBottom/axisLeft for tick labels. Circles are drawn with SVG, and each point's rx and ry attributes are mapped from bill length and bill depth, though the radius stays constant. The chart fills the browser window with margins.

Mar 5, 2023
Loading thumbnail…

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

A horizontal bar chart displays the basic cost of Netflix subscriptions in 15 countries, using SVG rectangles scaled by price. The visualization is built with React for component structure and state management, while D3 v5 provides CSV parsing, linear and band scales, axis ticks, and maximum value calculations. Data loads from a remote GitHub-hosted CSV file, and the chart includes custom gridlines and value labels rendered through React elements.

Mar 4, 2023
Loading thumbnail…

Data Visualization ICE5

This visualization presents metadata about a cereal nutrition dataset, displaying row count, column count, and file size as text on a styled HTML page. The page uses a background SVG image of cereal boxes and prominent headings to contextualize the data. The code loads a CSV file from a GitHub gist using `d3.csv`, then formats the data with `d3.csvFormat` to calculate the file size in kilobytes. The resulting message is inserted into a `<pre>` element via `textContent`, with CSS styling for italic red headings and green bold text.

Mar 1, 2023
Loading thumbnail…

Fork of HTML Starter

This example shows a single large text message, “Hello HTML!”, centered prominently within the browser window. The implementation uses basic HTML, CSS, and JavaScript with styles applied through a class selector. It demonstrates the simplest possible setup for rendering static content, relying on the DOM’s structure rather than any external libraries or data sources. The page is a bare-bones template that highlights how CSS controls typography and layout alignment without additional visualization logic.

Feb 28, 2023
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal Hello World visualization using D3 v5 to display the text “Hello VizHub!” inside a centered HTML div. It shows how to load D3 via a CDN, import API functions like `select` from the library, and import local ES6 modules using `import` and `export`. The code sets the div’s text content with `select('#message').text(message)`, using a message string defined in a separate `myMessage.js` file and styled with CSS.

Feb 28, 2023
Loading thumbnail…

Fork of Danny Phantom Face

This example renders a cartoon face inspired by Danny Phantom using React and D3 v6. It constructs the head from SVG primitives, including circles for the eyes and face, rectangles for eyebrows, and a D3 `arc` generator for the mouth. Hair and nose shapes are drawn as SVG polylines with manually defined coordinate points. The component positions all elements relative to the window dimensions and centers them on the screen, while D3’s `arc` API computes the mouth path.

Feb 22, 2023
Loading thumbnail…

Fork of Fork of Fork of Danny Phantom Face

This example renders a stylized cartoon face inspired by Danny Phantom, built as a React component that composes SVG elements. It uses D3 v6’s `arc()` generator to draw the character’s mouth, while the eyes, eyebrows, hair, nose, and eyelashes are constructed from SVG circles, rectangles, polylines, and lines. All facial features are positioned using computed offsets from the viewport center, with the code defining constants for colors, stroke widths, and coordinates. The visualization takes a full-window SVG canvas and uses React’s declarative JSX to structure the layered face.

Feb 22, 2023