Skip to main content
Log in
B

bhavana.bayyapu@gmail.com

@bhav4925·9 public vizzes

Loading thumbnail…

Pie Chart Analysis Of Chocolate

This pie chart visualizes the proportional distribution of chocolate types or attributes, with each categorical segment sized to its share of the whole. Built with D3.js, the chart uses SVG arcs and a color scale to distinguish slices, while HTML and CSS structure and style the page. The rendering relies on D3’s pie and arc generators to compute angles, and transitions are applied to animate the chart on load, revealing the data-driven layout directly from the embedded dataset.

Mar 27, 2024
Loading thumbnail…

line chart using d3

This example uses D3.js v7 to create a line chart visualizing restaurant profit trends over recorded years. It loads CSV data from a GitHub gist and maps the year and profit columns to a linear x-axis and y-axis, rendering the line as an SVG path with a steelblue stroke. The chart includes axes labeled "Recorded Year" and "Profit In Million," plus an interactive tooltip that displays the data values on mouse movement. The SVG container is configured with custom margins, and the entire chart is styled with a black background and white text via CSS.

Mar 26, 2024
Loading thumbnail…

Area Chart For the Restaurant Data

This area chart visualizes the annual profit of an Indian restaurant over time using an SVG rendered with D3 v5. The chart plots profit in millions against recorded year, with a smooth basis curve connecting data points and a filled area beneath the line. The visualization uses D3’s `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` functions to construct axes and paths, with profit data parsed from a CSV file loaded via `d3.csv`. Styling is applied through external CSS for axis labels and the chart’s fill color.

Mar 25, 2024
Loading thumbnail…

Line Chart For the Restaurant Data

The line chart displays the weekly profit of an Indian restaurant, highlighting trends and fluctuations across the data range. It uses D3.js to generate SVG paths and axes, with CSS handling page styling and layout. Profit values are plotted against time, with a single line emphasizing overall performance. The visualization relies on D3’s scale functions and axis generators to map data points, while the underlying dataset is embedded directly within the HTML file, making it a self-contained example.

Mar 25, 2024
Loading thumbnail…

Pie Chart Of the restaurant data

This pie chart visualizes the profit analysis of the top 10 Indian restaurants in the USA, with each slice sized by profit in millions and labeled with its value. A legend to the right pairs each restaurant name with its corresponding color and profit figure. The visualization uses D3.js v5, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart within an SVG. Data is fetched asynchronously from a CSV file hosted on GitHub, and the Poppins font is applied throughout for consistent styling.

Mar 25, 2024
Loading thumbnail…

Fork of blood pressure

This visualization shows the relationship between age and sleep duration for a group of individuals, with each person represented as a point on a scatterplot and connected by a smooth line. The chart uses D3.js v5 to load CSV data from a GitHub gist, parse the numeric fields, and render the SVG visualization. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` with `curveBasis` to create the curved trend line. The line is styled in maroon with a thick stroke, while gridlines and axis labels are formatted with custom CSS. The data source is a public dataset on sleep health and lifestyle.

Mar 23, 2024
Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes cancer mortality trends in the USA, cycling through liver, breast, and prostate cancer datasets. Built with D3 v6 as a reusable chart, it animates between cancer types every 3 seconds, updating the y-axis and point symbols (star, square, circle) accordingly. The chart leverages SVG rendering and custom symbol mappings to distinguish cancer types, with axes and margins configured for readability.

Mar 21, 2024
Loading thumbnail…

Scatterplot_restaurant

This scatter plot visualizes the relationship between restaurant ratings and total review counts. Each circle represents a restaurant, positioned by its rating on the x-axis and total reviews on the y-axis, with a warm fill color against a blue background. Built using React and D3 v6, the code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear` for both axes, and renders circles as SVG elements. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with labels rotated for the y-axis.

Mar 13, 2024
Loading thumbnail…

Barchart_Restaurantreview

This bar chart visualizes restaurant ratings for a subset of twelve establishments, sourced from a CSV file. The chart uses horizontal bars to compare ratings, with the length of each bar encoding the rating value. The visualization is built with React and the D3.js library, using `scaleBand` and `scaleLinear` to position bars and axes. The SVG rendering includes styled axes and a color palette, with the application's data loading handled by D3's `csv` function.

Mar 13, 2024