Priyank Singh

@priyank449·6 public vizzes

"Sales Trend Over Time" line chart visualization

This line chart visualizes sales amounts over a sequence of invoice dates, using a small embedded dataset of 2023 transactions. The SVG rendering is built with D3 v7, employing `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, and `d3.line` to generate the path. Axes are added via `d3.axisBottom` and `d3.axisLeft`. The chart is a minimal React-free example, relying on plain JavaScript and CSS within an HTML page.

Apr 23, 2024

Loading thumbnail…

Visualization: Sales Distribution by Country (Bar Chart)

This example shows a bar chart of sales amounts by country, with two bars displaying the dataset values from the USA, UK, and Canada. The visualization uses an SVG rendering approach with D3.js v7, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to create the corresponding axes. Bar rectangles are appended to the SVG container with their width determined by the scale’s bandwidth and their height proportional to the sales values.

Apr 23, 2024

Loading thumbnail…

Quantity vs. Price Scatter Plot visualization

This scatter plot visualizes the relationship between transaction quantity and price, with each data point represented as a steelblue circle positioned along linear axes. The visualization uses D3.js v7 within an HTML page, employing `d3.scaleLinear` for both x and y coordinates, `d3.axisBottom` and `d3.axisLeft` for the axes, and SVG rendering inside a `div` container. The dataset is hardcoded in the JavaScript file, and the chart dimensions are fixed at 600 by 400 pixels with defined margins, demonstrating a basic D3 scatter plot implementation with a React-friendly structure.

Apr 23, 2024

Loading thumbnail…

Fork of HTML Starter

This example shows a scatter plot of transaction data, plotting Quantity on the x-axis against Price on the y-axis using D3.js v7. The code defines a small inline dataset, sets up an SVG canvas with margins, and uses `d3.scaleLinear` to map data values to pixels. Circles are rendered with `d3.axisBottom` and `d3.axisLeft` adding the corresponding axes. The visualization is a minimal, static representation of the relationship between the two numeric variables.

Apr 23, 2024

Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a simple bar chart visualizing a small dataset of five numeric values, rendered as sky-blue rectangles with white value labels. It uses D3.js (version 7.8.5) to create an SVG container, bind data to rectangles via `selectAll().data().enter().append()`, and set each bar’s height and position based on its value. The code also leverages method chaining with `.attr()` to configure dimensions, colors, and text properties, with all rendering occurring client-side in the browser.

Apr 22, 2024

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and position colorful circles within an SVG container using D3.js v7. It employs the D3 general update pattern with `selectAll`, `data`, and `join` to manage circle elements, setting coordinates, radius, fill color, and opacity through method chaining with `.attr`. The circles are defined as an array of data objects hardcoded in `index.js`, and the SVG dimensions adapt dynamically to the container’s client width and height. The visualization highlights D3’s data-driven approach for rendering and updating DOM elements.

Apr 22, 2024