P

PoojaThandra

@PoojaThandra·16 public vizzes

Loading thumbnail…

Fork of Pooja's Area Chart

This fork of Pooja's area chart visualizes Myntra's stock sales from 2011 to 2022 using a combined line and area chart rendered as an SVG. It utilizes D3 v5 APIs such as `d3.area`, `d3.line`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to draw the smoothed basis curve and the filled area beneath it. The data is loaded from a CSV file via `d3.csv`, with sales values parsed as numbers and years mapped to the x-axis. Styling is applied through external CSS, defining the chart’s colors and tick formatting.

Loading thumbnail…

Fork of pooja's Line Chart

This visualization displays the sales of Myntra from 2011 to 2022 as a line chart, with time on the x-axis and sales figures on the y-axis. The chart is rendered using the D3 library (v5) in SVG format, applying `scaleTime` and `scaleLinear` for scaling, `axisBottom` and `axisLeft` for axes, and a `line` generator to draw the path. Data is loaded from a CSV file via a GitHub gist URL using `d3.csv`.

Loading thumbnail…

Fork of Pooja's Line Chart

This fork of Pooja's line chart visualizes Myntra's stock sales from 2011 to 2022, showing a temporal trend of sales figures over the years. The SVG chart uses d3.scaleTime and d3.scaleLinear for the axes, while d3.line generates the path connecting data points. d3.csv loads the dataset from a GitHub gist, with year values parsed as Date objects and sales as numbers. The visualization includes axis labels, a title, and styling through an external CSS file.

Loading thumbnail…

Fork of pooja's Line Chart

This line chart visualizes the sales of Nykaa from 2009 to 2022, with time on the x-axis and sales figures on the y-axis. The chart is rendered as an SVG using D3 v5, with axes formatted via `d3.axisBottom` and `d3.axisLeft`, and the line drawn using `d3.line`. Data is loaded from a GitHub Gist CSV file using `d3.csv`, and parsed into date and numeric values before being passed to the rendering function.

Loading thumbnail…

Fork of Fork of Line Chart

This line chart displays the number of students at a university from 2000 to 2008, with years on the x-axis and student counts on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to generate the path. Data is loaded via `d3.csv` from a GitHub Gist, and the chart includes custom axes, grid lines, and labeled titles.

Loading thumbnail…

Fork of Pooja's Pie Chart

This fork of a pie chart visualizes movie ratings for recent Indian films. The visualization uses a D3.js v5 pie layout with a categorical color scale to differentiate movie titles. A legend displays each movie name alongside its corresponding rating value in points. Data is loaded from a remote CSV file via the `d3.csv` method, and the chart is rendered as an SVG with `d3.arc` for the pie segments and `d3.scaleOrdinal` for color assignment.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot of petal width against sepal length, encoded using D3's scaleLinear, scaleOrdinal, and symbol scales. Each of the three iris species is represented by a distinct D3 symbol shape, rendered as SVG paths using the symbol generator. The code builds a reusable scatterPlot function with configurable accessors for x, y, and symbol values, and adds axisBottom and axisLeft for the axes. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with the plot filling the entire browser window.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different flower measurements every two seconds. A reusable D3 scatter plot module uses `scaleLinear`, `axisLeft`, and `axisBottom` to render circles in an SVG. The code imports data via `csv` from D3 v6, parses numeric columns, and updates the x-axis mapping with `setInterval`. The full-window visualization includes custom styling from the Share Tech font.

Loading thumbnail…

Fork of Fork of Scatter Plots of Iris Dataset

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between any two of its four features (sepal length, sepal width, petal length, and petal width) for three flower species. Users select the x-axis and y-axis feature via a custom button panel, which triggers d3 v5 to update the chart. The SVG render displays semi-transparent colored circles representing each species, with axis labels and a legend. The code uses d3.csv to load data, scaleLinear for scales, and axisBottom and axisLeft with gridlines to build the plot.

Loading thumbnail…

Fork of Scatter Plot

A scatter plot visualizes the classic Iris Dataset, showing sepal length against petal length for 150 flowers across three species. Circles are plotted without color or legend, with fixed 10-pixel radii. The visualization uses d3-fetch’s `csvParse` to load and parse the data, d3-scale’s `scaleLinear` for axes, and d3-axis’s `axisLeft` and `axisBottom` for labeled axes. The implementation is modular, with separate files for axes, scatter plot, and main visualization logic.

Loading thumbnail…

Fork of Penguin Data POoja

This scatter plot displays penguin data, mapping flipper length against body mass while encoding bill length and depth through non-standard `rx` and `ry` attributes on circles. Each species is colored distinctly: Adelie in blue, Gentoo in red, and Chinstrap in black. The visualization uses D3 v5's `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to render an SVG with labeled axes and a cursive title. Data is loaded from a CSV via `d3.csv` and parsed with type coercion.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length to body mass for each observation. Each data point is drawn as an ellipse, with its horizontal and vertical radii derived from bill length and bill depth, respectively, and colored by species (Adelie, Gentoo, or Chinstrap). The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render SVG circles via data joins. Axis labels and a title are appended as SVG text elements.

Loading thumbnail…

Fork of Pooja's ICE-6

This bar chart displays the average on-time performance (Time) for the top ten airlines, sourced from a CSV file of diamond pricing data. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. SVG rectangles are rendered with the `d3.csv` loading and React’s `useState`/`useEffect` hooks, with axes drawn using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of ICE5

This page displays the metadata of a GDP dataset, revealing the number of rows, columns, and file size in kilobytes after fetching a CSV. The visualization uses D3 v7’s `d3.csv` and `d3.csvFormat` to load and measure the data, then dynamically writes the summary into a `<pre>` element using `textContent`. A background SVG and hyperlink provide context and access to the dataset.

Loading thumbnail…

ICE5

This example displays a webpage that presents the metadata of a GDP dataset, including its file size, row count, and column count, within a large text overlay on a stylized background. The page uses the D3.js library (version 7) to load a CSV file from a remote URL via `d3.csv` and compute the dataset’s properties with `d3.csvFormat`. The background is set using a custom SVG image via CSS, while HTML headings and a link provide context and access to the underlying data, all rendered in a React-independent, vanilla JavaScript setup.

Loading thumbnail…

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

This example builds a smiley face with D3.js v5, demonstrating fundamental DOM manipulation through SVG shapes and animated transitions. A red circle forms the head, with eyes, eyebrows, and a mouth added as separate SVG elements. The eyebrows are rectangles that move up and down via chained `transition().duration(2000)` calls, creating a simple animation loop. The code uses D3’s `select`, `arc`, and transition methods to append and animate elements, with positioning handled through explicit `attr` coordinates.