vishnupriya eupuri

@Vishnupriyaeupuri·14 public vizzes

reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes the relationship between age and price, with points colored by gender. It automatically alternates between two subsets of the data every five seconds, using a timer to refresh the visualization. The implementation leverages D3 v6’s modular functions, including `scaleLinear`, `scaleOrdinal`, `extent`, and `axisLeft`/`axisBottom`, within a custom chart factory function. Data is loaded from a remote CSV file and parsed, while SVG rendering and animation are handled through D3’s selection and join methods, ensuring a clean, declarative approach to updating the plot.

Mar 28, 2024

Loading thumbnail…

reusable scatter plot

This reusable scatter plot displays age against fare price, with points colored by gender. The visualization alternates between two halves of the dataset every five seconds using `setInterval`, clearing the SVG and re-rendering with D3’s `selectAll` and `join` pattern. It uses `scaleLinear`, `scaleOrdinal`, `extent`, and `axisLeft`/`axisBottom` from D3 v6 to build axes and scales. The custom `scatterPlot` function exposes chainable methods for width, height, margins, and radius, while the data loads from a CSV URL via `d3.csv`.

Mar 28, 2024

Loading thumbnail…

scatterplot

This scatter plot visualizes the relationship between Age and Fare from a CSV dataset, with points colored by Sex. The visualization alternates between two subsets of the data every five seconds, dynamically resizing the SVG to fit the browser window. Built with D3.js, it uses the scatterPlot module and responsive-axes library to generate linear scales, axis labels, and semi-transparent circles. The code loads data via d3.csv, parses numeric fields, and employs setInterval to toggle between the two plot views, demonstrating a simple animated data exploration technique.

Mar 28, 2024

Loading thumbnail…

area chart

This area chart displays yearly values loaded from a remote CSV file, using a steelblue filled path to visualize trends over time. Built with D3 v7, the code uses `d3.csv` to fetch data, `d3.scaleLinear` for both axes, `d3.area` to generate the area path, and `d3.axisBottom`/`d3.axisLeft` for the labeled axes. The SVG output includes custom margins, axis titles, and tick formatting.

Mar 28, 2024

Loading thumbnail…

reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes inventory data by plotting quantity against price. The visualization alternates between two halves of the dataset every five seconds, automatically switching between the first and second half of the data points. Built with D3.js v6, the code uses `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for color encoding, while axis and label rendering rely on `axisLeft` and `axisBottom`. The custom `scatterPlot()` function encapsulates chart configuration through chainable methods, and data is loaded from a CSV file using `d3.csv`.

Mar 28, 2024

Loading thumbnail…

Re-usable Scatter Plot

This reusable scatter plot visualizes the relationship between product quantity and price from a CSV inventory dataset. It uses D3 v6 to load the data, map the numeric fields to linear scales, and render circles with fixed radius on an SVG canvas. The code demonstrates a modular chart-building pattern with explicit margins, axis generation via `d3.axisBottom` and `d3.axisLeft`, and a consistent steelblue fill for all data points. The chart is embedded in a centered, styled layout.

Mar 28, 2024

Loading thumbnail…

Reusable D3 Scatter Plot

This example shows a pie chart representing the number of subjects each student has enrolled in, with color-coded slices, labels, and a legend. The visualization loads student data from a CSV file via `d3.csv`, and maps it to pie geometry using the `d3.pie` and `d3.arc` generators. Slices are rendered as SVG paths with a `d3.scaleOrdinal` color scale, while labels and legend items are positioned using arc centroids and fixed translations. The chart uses D3 v7 and renders within an SVG container.

Mar 28, 2024

Loading thumbnail…

Line chart.js!

This line chart visualizes yearly data from a CSV file, plotting values against years with a blue line on axes labeled "Year" and "Value." It uses D3 v7 to load the data via `d3.csv`, scales the x- and y-axes with `d3.scaleLinear`, and renders the line path using the `d3.line` generator. The chart explicitly appends axes, labels, and the line to an SVG element, with margins set to accommodate tick marks and text. The example demonstrates basic DOM manipulation and data binding in D3.

Mar 27, 2024

Loading thumbnail…

reusable scatter plot

This reusable scatter plot visualizes the relationship between passenger age and fare from the Titanic dataset, colored by gender. Built with D3.js v6, it uses an SVG-based rendering approach with scales that adapt to the data domain. The x-axis represents age in years, the y-axis displays fare in dollars, and each circle is colored according to the passenger's gender using a categorical color scale. The code follows a modular, reusable function pattern, allowing the chart to be easily configured with different dimensions, data, and accessor functions. Axis labels clearly identify the variables, and the plot updates dynamically based on the data provided.

Mar 27, 2024

Loading thumbnail…

Line chart.js!

This example uses D3.js to render a line chart from a remote CSV file of employee data, plotting monthly temperatures. The visualization first loads the data with `d3.csv`, parses the numeric fields, and then builds an SVG chart with `d3.scaleLinear` for the x- and y-axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and a `d3.line` generator to draw the temperature trend. The chart is rendered as an SVG with axes positioned using margins, while the line itself is styled in steel blue.

Mar 27, 2024

Loading thumbnail…

Line chart.js!

This example visualizes the ages of Titanic passengers as a line chart, plotting each passenger’s age in sequence along the x-axis. The chart uses D3.js v7 to load CSV data from a GitHub-hosted file, parse the values, and render an SVG with scales, axes, and a line generator. The code employs `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.line` to draw the path, with axes appended via `d3.axisBottom` and `d3.axisLeft`. The rendering is entirely SVG-based, showing a simple yet effective use of core D3 DOM manipulation and data binding.

Mar 27, 2024

Loading thumbnail…

pie chart

This pie chart displays the proportional sales distribution across countries for the year 2020, using a dataset of students loaded via `d3.csv`. The visualization renders each country as a colored slice with labels positioned at the centroid of each arc. It uses D3 v7’s `d3.pie()` and `d3.arc()` generators to compute and draw the arcs, with `d3.scaleOrdinal` and `d3.schemeCategory10` providing categorical colors. A legend on the right maps colors to country names, and the SVG output is created within a fixed 600×400 pixel canvas.

Mar 27, 2024

Loading thumbnail…

scatterplot

This scatter plot visualizes the relationship between students’ study hours and their exam scores. The chart uses D3.js v7 to render SVG circles, with a linear scale mapping study hours on the x-axis and exam scores on the y-axis. The data is loaded from a CSV file via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with labels for both variables. The code defines a reusable `createScatterPlot` function that takes data and a container ID, setting fixed margins and a 600x400 pixel drawing area.

Mar 27, 2024

Loading thumbnail…

Bargraph

A scatter plot displays the relationship between two numeric variables as circles in a Cartesian coordinate system. The example loads a dataset from a CSV file named `scatter.csv` using the `d3.csv` method, then passes the parsed data to a `createScatterPlot` function that renders the visualization into an HTML container. The implementation relies on the D3.js v7 library for data loading and chart construction, though the JavaScript file defines the plotting logic separately. An error handler logs any issues encountered during the asynchronous CSV fetch.

Mar 27, 2024