Pranav Revankar

@pranavrevankar·10 public vizzes

Scatter plot

This scatter plot displays the relationship between total ad spend and acquisitions for various delivery brands, with each circle representing a brand's performance. The chart uses a linear scale for both axes, with a grid and labeled axes for clarity. It is built with D3 v5, using `csv` to load data, `scaleLinear` for scaling, and `axisBottom` and `axisLeft` for ticks. SVG circles are rendered with a fixed radius, and the data comes from a CSV file containing management entities and brand metrics.

Feb 26, 2020

Loading thumbnail…

Column charts with D3 - customizing axes

A column chart displays total ad spend per management entity from a CSV dataset, with a horizontal axis ordered by data rows and a vertical scale from zero to the dataset maximum. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars and axes. D3’s `format('.3s')` shortens tick labels, while the left axis shows spend values with grid lines extending across the chart. Axis labels and a title are added as text elements.

Feb 19, 2020

Loading thumbnail…

Bar charts with D3 - customizing axes

This bar chart displays total ad spend across management entities, with a horizontal layout and a logarithmic-style axis label. The visualization uses d3.scaleLinear and d3.scaleBand to map spend values and entity names, while d3.axisLeft and d3.axisBottom render the axes with custom tick formatting via d3.format. SVG rendering with d3.select and data binding via d3.csv, importing data from a CSV file containing spend and acquisition metrics.

Feb 19, 2020

Loading thumbnail…

Bar charts with D3

This example visualizes total advertising spend across different management entities using horizontal bar charts. The bar lengths encode the numeric "Total Ad Spend" values, while the y-axis lists the corresponding management entities. The SVG rendering uses D3 v5’s `scaleLinear` and `scaleBand` for positioning, with `axisLeft` and `axisBottom` for tick marks. Data is loaded via `d3.csv` from a local CSV file, and bar colors are styled through CSS.

Jan 28, 2020

Loading thumbnail…

Face Curran with d3.js

A yellow circle with animated eyes and a smile renders in an SVG using d3.js. The right eye transitions from black to red over two seconds, while the smile—drawn as an arc path via `d3.arc()`—gradually morphs from a thick ring to a solid filled shape over twenty seconds. The code builds shapes from scratch using `d3.select`, `attr`, and `transition`, with fixed coordinates for eye spacing and offsets.

Jan 19, 2020

Loading thumbnail…

Building shapes with SVG and CSS

This example demonstrates how SVG elements and CSS transforms can combine to build and scale geometric shapes. It shows a circle, rectangle, line, and path grouped together within an SVG canvas, with the entire group scaled down using a CSS `.scale` class that applies `transform: scale(0.2)`. The visualization highlights the SVG API for drawing primitive shapes and CSS for coordinate transformations, while accompanying JavaScript modules handle car data filtering and report generation via Promises.

Jan 18, 2020

Loading thumbnail…

Cars Report2

This example shows a simple report of cars filtered by price, displaying a list of car details as plain text. The page initially shows a loading message, then uses `getCars` to asynchronously fetch an embedded JSON array of car objects after a two-second delay. The `generateReport` function filters the cars by a maximum price and formats each entry with the `formatCar` module, producing a text output that replaces the loading message. The project relies on JavaScript modules and Promises, with basic styling applied via monospace fonts and a red highlight class.

Jan 18, 2020

Loading thumbnail…

React Starter

This example demonstrates a dynamic data-report generator in React. It displays a list of cars filtered by year, using a custom `generateReport` function that applies `formatcar` to each entry. The app fetches car data asynchronously via `getCars`, which returns a Promise after a 2-second delay. The interface updates the DOM directly with the message, leveraging React for rendering and plain JavaScript promises for data handling.

Jan 18, 2020

Loading thumbnail…

HTML Starter

This example displays “Hello HTML” centered on a blank page. It uses a single HTML file with embedded CSS to style the body text, setting the font size to 13em and aligning it to the center. The rendering is achieved through the browser’s native HTML and CSS processing, requiring no external libraries or JavaScript. It serves as a minimal, foundational template for web-based visualizations, demonstrating the basic document structure needed to begin building interactive graphics.

Jan 13, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” in the center of the viewport, using a large font size for visual impact. It relies purely on standard HTML and CSS, with no external libraries or JavaScript. The page is styled using the `body` CSS rule to center the text and set an extremely large font size of 13em, making the greeting the sole focus of the visualization. The content is static, with no interaction or data sources involved.

Jan 11, 2020