Skip to main content
Log in
K

koteswararao614@gmail.com

@Koti2199·12 public vizzes

Loading thumbnail…

Line Chart For The Restaurant Data

This line chart visualizes restaurant profit trends from 1985 to 2024, with each data point representing annual profit in millions. The chart plots these values using green circular markers connected by a green line, with hover effects changing marker color to orange for interactive feedback. The visualization uses D3.js v7 to load data from a CSV file, applying `d3.scaleBand` for the x-axis years, `d3.scaleLinear` for the y-axis profit scale, and `d3.line` to generate the path. The SVG rendering is styled with the Poppins font on a teal background.

Mar 27, 2024
Loading thumbnail…

Area Chart For the Restaurant Data

This area chart visualizes the profit in millions of an Indian restaurant over recorded years, with the data loaded from a CSV file. The chart displays a smooth, curved area and line path using D3’s `area` and `line` generators with the `curveBasis` interpolation, rendered as SVG. The axes use `scaleLinear` for both time and profit values, with gridlines and labels styled via CSS. The visualization is built with D3 v5, imported through ES modules, and styled with the Poppins font on a purple background.

Mar 27, 2024
Loading thumbnail…

Reusable ScatterPlot for Restaurant Data

This interactive scatter plot visualizes restaurant data, comparing profit in millions against restaurant rating, with the y-axis dynamically cycling through different metrics such as total reviews. Built with D3.js, the visualization uses a reusable `scatterPlot` component that manages data binding and SVG rendering. The plot updates every three seconds, animating the y-axis and redrawing data points to reflect the changing attribute. Data is loaded from a CSV file containing restaurant information, and the interface is styled with the Poppins font.

Mar 27, 2024
Loading thumbnail…

PieChart For Restaurant Data

A pie chart visualizes the profit analysis of the top 10 Indian restaurants in the USA, with each slice representing a restaurant's profit in millions and a legend listing names and values. The visualization uses D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` to generate SVG path segments with color-coded fills and white text labels. Data is loaded asynchronously from a CSV file via `csv()`, and the chart renders within a 960x600 SVG container with a dark themed stylesheet.

Mar 27, 2024
Loading thumbnail…

Line Chart For The Restaurant Data

This interactive visualization displays the message "Hello HTML!" centered in a large, bold font. The page demonstrates a minimal setup using standard HTML and CSS, with the text styled through a CSS class defining font size and alignment. The underlying code is a static HTML document with embedded CSS styling, relying on the browser’s default rendering engine without any additional JavaScript or external data source.

Mar 25, 2024
Loading thumbnail…

Fork of Barchart of the restaurant data

This horizontal bar chart visualizes restaurant ratings for the top 30 venues from a CSV dataset, using React with D3 v5 to render SVG marks. The chart displays restaurant names on the y-axis and their numerical ratings on the x-axis, with bar lengths encoded by the `scaleLinear` rating values. Gridlines and axis labels are generated using D3's `scaleBand`, `axisBottom`, and `scaleLinear` utilities. The code uses `csv()` to load external data and renders styled rectangles with a color palette defined in CSS, while the React component manages the asynchronous data loading and state updates.

Mar 21, 2024
Loading thumbnail…

Scatterplot of the restaurant data

This scatterplot displays the relationship between restaurant ratings (on the x-axis) and total review counts (on the y-axis), using one circle per restaurant. The visualization reveals whether higher-rated establishments tend to attract more reviews. The code loads data from a CSV file using `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG elements. It applies margins for axis placement, labels both axes with rotated text for the y-axis, and styles circles with a brown fill and light border. The chart is built with D3.js v6, rendering to SVG within an HTML page.

Mar 20, 2024
Loading thumbnail…

Fork of loading and parsing CSV data

This example demonstrates how to load and parse a CSV file of restaurant ratings using D3.js, displaying the data summary in the browser. The page includes SVG elements and custom CSS styling, with D3.js v7 used to fetch the CSV via `d3.csv` and compute file size, row count, and column count. The result is shown in a message container alongside an embedded SVG image. The code highlights D3's CSV parsing and document manipulation capabilities within a simple HTML/CSS framework.

Mar 7, 2024
Loading thumbnail…

Fork of Fork of loading and parsing CSV data_backup

This example demonstrates a simple data-loading interface for restaurant ratings. It shows a page that uses D3.js (version 7) to fetch a CSV file from a GitHub gist, then displays a text summary of the file's size in bytes and kilobytes, along with the row and column counts. The page also includes an embedded SVG image of a restaurant. The code highlights the use of `d3.csv` and `d3.csvFormat` for parsing and measuring the data, while the visual layout relies on basic HTML, CSS, and an external SVG asset.

Mar 6, 2024
Loading thumbnail…

Fork of Fork of Circles with D3_check

A simple gray cat built from D3.js-drawn circles and lines sits centered on a pink canvas, with its body, head, ears, eyes, and nose formed by circle elements and its legs and tail as line elements. The example uses D3’s selection and join methods to bind static position data directly to SVG shapes, avoiding animation or interactivity. While the code’s data is hard-coded, the structure invites creative theming—such as Halloween or Christmas—by swapping the color palette or adding props, as suggested in the accompanying challenge notes.

Feb 28, 2024
Loading thumbnail…

Fork of snowman

A pink snowman with eyes, buttons, a hat, stick arms, a carrot nose, and an umbrella stands beside a green tree on a ground line. The scene is built by binding arrays of circle, line, and rect data elements to SVG shapes using D3’s selectAll/join pattern. A polygon defines the nose, and a d3.arc generator creates the umbrella’s blue canopy. The visualization renders entirely in SVG with hardcoded coordinates, demonstrating straightforward D3 v7 data joins and shape generation.

Feb 28, 2024
Loading thumbnail…

Fork of windmill

This example depicts a simple natural scene, including a ground line, a windmill constructed from lines, polygons, and a rectangle, a white circle as the windmill's hub, a yellow circle for the sun, and a small bird formed from line segments. The visualization uses a static, declarative rendering approach with D3.js’s `select` and `join` APIs to create and bind SVG primitives like `line`, `circle`, `rect`, and `polygon` to hardcoded data arrays. The drawing is scaled to the container’s dimensions and given a light blue background.

Feb 27, 2024