Skip to main content
Log in
B

bharathavulapati@gmail.com

@abc18·20 public vizzes

Loading thumbnail…

Fork of graph

A force-directed graph connects a central "Job Postings Data" node to nine companies, each linking to one job title. The visualization uses an SVG container and D3 v7's `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` APIs to position nodes. Light gray links and black-bordered circles render the network, with node labels displayed next to each circle. The layout adjusts to the browser window width while maintaining a fixed height.

Apr 9, 2025
Loading thumbnail…

Fork of tree

This fork of tree visualizes a job hierarchy using a horizontal tree layout, organizing positions by work type (HOURLY or YEARLY) and location, with leaf nodes representing specific job titles. The rendering uses D3 v7’s `d3.hierarchy` and `d3.tree` layouts, drawing SVG links via `d3.linkHorizontal` and nodes as distinct shapes—circles, rectangles, and diamonds—colored by depth. Node labels are positioned based on whether each node has children, and a legend clarifies the shape-color mapping.

Apr 9, 2025
Loading thumbnail…

Fork of graph

A fork of graph visualizes job postings data as a network of companies and job titles connected to a central node. It uses d3.forceSimulation and d3.forceLink to position nodes and links in an SVG canvas, with labels and styled circles. The rendering includes a static force-directed layout with light gray links and black-bordered nodes.

Apr 9, 2025
Loading thumbnail…

Fork

A force-directed network graph depicts job postings, linking companies from a local data source (such as "Corcoran Sawyer Smith" and "PrimeTech") to specific job titles like "Marketing Coordinator" and "Building Engineer." A central "Sales Data" node connects to each company, which then branches to its associated roles. Built with D3 v7, the visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while SVG elements render draggable clusters with light-gray links and black node borders.

Apr 9, 2025
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes student scores across subject pairs, cycling through Math-Science, Math-English, and Science-English comparisons. Built with d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft, the chart renders SVG circles on axes with labels. The plot supports configurable dimensions, value mappings, and labels through setter methods, and it redraws dynamically when the metric combination changes. Data loads from a CSV file containing raw marks, which are converted to numeric values for plotting with animation updates.

Apr 1, 2025
Loading thumbnail…

Fork of pie chart

A pie chart shows the total fruit yield from 2014 to 2024, with slices sized by each fruit's summed yearly values and sorted in descending order for readability. The visualization uses D3 v6's `d3.pie` and `d3.arc` to create the SVG paths, with `d3.scaleOrdinal` assigning colors from `d3.schemeCategory10`. A legend on the right maps each fruit to its colored box and total yield, built using D3's `selectAll` and `enter` operations. The underlying data comes from a CSV file fetched via `d3.csv` from a remote gist.

Apr 1, 2025
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays individual student math scores against science scores from a CSV dataset, with each circle representing one student. The code builds the chart using D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, rendered as SVG within a full-window container. A custom `scatterPlot` generator function uses getter-setter methods to configure width, height, data, margins, and circle radius, while the axes and labels are added inside the chart’s rendering loop.

Apr 1, 2025
Loading thumbnail…

Fork of area chart

This fork of a D3.js area chart visualizes apple fruit yield from 2014 to 2024. The SVG chart uses a fixed y-scale from 25,000 to 35,000 and features a semi-transparent steelblue area. Data is loaded from an external CSV file via `d3.csv`, with the Apple row extracted by matching the fruit name. The visualization employs `d3.scalePoint` for the categorical year axis and `d3.scaleLinear` for the yield axis, while an `d3.area` generator constructs the path. Axis labels are added using standard D3 text elements, with rotated tick labels for readability.

Apr 1, 2025
Loading thumbnail…

Fork of line chart

This line chart displays the fruit yield of apples from 2014 to 2024, sourced from a CSV file loaded via `d3.csv`. The visualization uses `d3.scalePoint` for the categorical year axis and `d3.scaleLinear` for the yield values, with a `d3.line` generator to draw the steelblue path. The SVG rendering includes rotated axis tick labels and custom text annotations for both axes.

Apr 1, 2025
Loading thumbnail…

Fork of reusable scatter plot

This scatter plot visualizes the relationship between math and science marks, with each point colored by performance category: green for 'Excellent', orange for 'Average', and red for 'Needs Improvement'. Built using D3 v6, it uses a reusable chart function with setter methods for customization, d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.symbolCircle for point shapes. SVG renders axes, labels, a title, and a legend showing the categories.

Mar 31, 2025
Loading thumbnail…

Fork of scatter plot

This fork of a scatter plot displays the relationship between Math and Science marks for a group of students, with each green circle representing one student. The visualization loads data from a CSV file and uses D3 v6’s `csv` parser to process the marks, mapping them to pixel coordinates via `scaleLinear` and `extent`. Axes are rendered with `axisLeft` and `axisBottom`, while the plot includes labeled X and Y axes and a bold title. The SVG rendering fills the browser window, with circular marks positioned using `attr` bindings for cx and cy.

Mar 25, 2025
Loading thumbnail…

Fork of barchart

This bar chart visualizes total fruit yield from 2014 to 2024, with each bar representing a fruit type and its summed yearly values. Built using React and D3 v5, it loads CSV data via `d3.csv`, processes the data with `useState` and `useEffect`, and renders bars with `scaleBand` and `scaleLinear`. Axes are created using `axisLeft` and `axisBottom`, while React’s `createElement` constructs the SVG elements, including axis labels and green rectangles for the bars.

Mar 25, 2025
Loading thumbnail…

Fork of Student

This visualization presents a summary of a student performance dataset, displaying the file size in kilobytes, the number of rows, and the number of columns as highlighted statistics on a styled card. The page fetches a CSV file from a GitHub gist and uses the D3 v7 library’s `d3.csvParse` method to parse the text, then calculates and writes the results into the HTML via the `innerHTML` property. The data source and rendering approach are evident through the fetch call and the CSS-styled output.

Mar 18, 2025
Loading thumbnail…

Fork of student

This example displays a basic summary of a student performance dataset, showing the file size in kilobytes, row count, and column count. It loads a CSV file from a remote GitHub Gist using the Fetch API and parses it with `d3.csvParse`. After parsing, it calculates the approximate file size from the raw text length and extracts the row and column counts from the parsed data. The results are displayed in an HTML div, with the dataset’s dimensions logged to the browser console for debugging.

Mar 18, 2025
Loading thumbnail…

student

This visualization displays a summary of a student performance dataset, showing the file size, row count, and column count as prominent text. The page fetches a CSV file from a GitHub repository using the Fetch API, parses it with d3.csvParse, and dynamically updates the HTML to present the computed statistics. The description emphasizes the data's scale before explaining the loading and parsing workflow.

Mar 18, 2025
Loading thumbnail…

student

This example demonstrates the VizHub V3 Runtime Environment’s core workflow, rendering a static “Hello World!” message inside a container DIV with a large, adjustable font size. The `main` function receives the container and sets its innerHTML via a template literal, featuring an Alt-drag interactive widget for live property changes. It showcases the simplified entry point without an `index.html`, highlighting continuous hot reloading for immediate visual feedback.

Mar 18, 2025
Loading thumbnail…

student

This example demonstrates the VizHub V3 Runtime Environment’s core workflow, rendering a static “Hello World!” message inside a container DIV with a large, adjustable font size. The `main` function receives the container and sets its innerHTML via a template literal, featuring an Alt-drag interactive widget for live property changes. It showcases the simplified entry point without an `index.html`, highlighting continuous hot reloading for immediate visual feedback.

Mar 18, 2025
Loading thumbnail…

Fork of Let's make a boba tea

This example displays a stylized boba tea cup with a green lid, a red straw, black tapioca pearls, and semi-transparent ice cubes, all rendered as static SVG shapes. The code builds the visualization by appending D3-selected SVG elements—rectangles, ellipses, and circles—positioned relative to a centered group. It uses d3.select, .append, and .attr to set coordinates and styles, with random placement for the boba and ice cubes to distribute them within the cup. The visualization demonstrates basic SVG drawing techniques with D3 v5, relying on hardcoded dimensions and no external data source.

Feb 24, 2025
Loading thumbnail…

Fork of Circles with D3

This example uses D3 to render a static collection of seven colored circles on an SVG canvas. The code employs the D3 General Update Pattern with `selectAll`, `data`, and `join` to bind an array of objects containing x, y, radius, and fill properties to circle elements. A light green background is applied via inline styles, and each circle uses a semi-transparent opacity value. The visualization demonstrates dynamic attribute assignment through arrow functions and method chaining within a `main` export function.

Feb 23, 2025
Loading thumbnail…

Fork of Let's make a face with D3.j

This example demonstrates fundamental DOM manipulation with D3.js by constructing a boba tea cup using basic SVG shapes. The visualization builds a cup, cap, straw, and tea layer with d3 selections and attribute methods, while randomly positioning black circles to represent boba pearls. Using d3.v5, the code appends elements to an SVG container and applies transforms like rotation to the straw. The rendering approach relies on static SVG geometry rather than data binding, showcasing how D3 can create custom graphics through programmatic element creation and styling.

Feb 23, 2025