Vineel Gannu

@gannuvineel·15 public vizzes

HTML Starter

This example displays the text “Hello HTML” centered on a plain white page, alongside a console message. It demonstrates a minimal HTML document structure with an embedded stylesheet and script. The page uses standard HTML and CSS for layout and styling, while a JavaScript `console.log` statement outputs “Hello JavaScript!” to the browser’s developer tools. It serves as a barebones starting point for web development, with no external libraries or data sources.

Aug 5, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between age groups and confirmed COVID-19 cases in Canada, using red circles sized at a fixed radius to represent case counts across nine age categories. The chart employs d3.scaleBand for the x-axis age groups and d3.scaleLinear for the y-axis case counts, with axes rendered via d3.axisBottom and d3.axisLeft. Data is loaded from a CSV file using d3.csv, and the visualization is rendered as SVG with styled grid lines and labeled axes, highlighting that the 80+ age group has the highest number of cases.

Jul 27, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays the number of confirmed COVID-19 cases per week in San Francisco, with a title and labeled axes for date and case count. The visualization uses D3 v5 to render an SVG, employing `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` for the chart structure. A `line` generator with `curveBasis` connects the data points, while circles added via `selectAll('circle').data()` trigger a custom tooltip on mouseover. The data is loaded from `casesbydate.json` using the `json` method, and the chart includes grid lines and axis labels for readability.

Jul 26, 2020

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps categorical values like "apple" and "lemon" to distinct colors, while the size legend uses d3.scaleSqrt to encode numeric ticks as proportional circle radii. Both legends are built with D3 v5 data joins, using selection.enter and merge to update groups, circles, and text. The code exports modular functions from colorLegend.js and sizeLegend.js, with styling applied via CSS classes like .tick.

Jul 23, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It emphasizes customized axes: the y-axis removes domain and tick lines, while the x-axis uses a tick format that abbreviates large numbers (e.g., converting "G" to "B") and includes a custom label. The visualization uses d3.scaleLinear and d3.scaleBand, with d3.axisBottom and d3.axisLeft for rendering. Data is loaded via d3.csv and rendered as SVG rectangles.

Jul 17, 2020

Loading thumbnail…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

Jul 16, 2020

Loading thumbnail…

Let's make a face with D3.js!

A face is drawn using the country shape of Canada, loaded as TopoJSON and projected with `d3.geoMercator`. The code filters the country features by ID and renders the path with `d3.geoPath`, applying a transform to position and scale it. Clicking or hovering logs the geometry coordinates. The example demonstrates fundamental SVG DOM manipulation with D3.js v5 by appending paths and styling them directly.

Jul 16, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how to make a visualization respond to browser resizing by redrawing SVG content to match the container’s current dimensions. The code uses D3 v5 to create a blue X composed of two `<line>` elements, whose coordinates are recomputed whenever the window fires a resize event. It reads the computed width and height from the chart `<div>` using `clientWidth` and `clientHeight`, then updates the SVG’s `width` and `height` attributes accordingly. The rendering relies on standard D3 data joins and attribute setters.

Jul 16, 2020

Loading thumbnail…

geoPath measures

This visualization displays a world map with city populations and interactive country metrics. City markers are sized proportionally to population using a square-root scale, plotted with `geoPath` and `geoNaturalEarth1` projections. Country boundaries come from the World Atlas TopoJSON, with graticules and interiors rendered via D3’s geoPath. Hovering over a country reveals path area, measure, bounding box, and centroid coordinates, computed through `geoGenerator.area`, `bounds`, `centroid`, and `measure` APIs. Data is sourced from the Simplemaps World Cities Database.

Jul 16, 2020

Loading thumbnail…

HTML Starter

Jul 15, 2020

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, with each city represented as a circle whose area encodes population using a square-root scale. The visualization uses d3’s geoNaturalEarth1 projection, geoPath, and geoGraticule to render country boundaries and graticules, while React manages the SVG scene. City coordinates and populations come from a Simplemaps World Cities CSV, and country boundaries derive from the World Atlas TopoJSON, styled with subtle gray fills and strokes.

Jul 11, 2020

Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

Jul 1, 2020

Loading thumbnail…

HTML Starter

This example presents a bare minimum HTML page that displays the text “Hello HTML” in a large, centered font. It serves as a basic starter template for web-based projects, demonstrating the fundamental structure of an HTML document alongside a small embedded script. The page uses inline CSS to style the body, and the script logs “Hello JavaScript!” to the browser’s console. It does not include any external libraries or data sources, focusing solely on plain HTML, CSS, and JavaScript fundamentals within a single file.

Jul 1, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries, with country names on the y-axis and population counts on the x-axis. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map data, `axisBottom` and `axisLeft` for axes, and SVG `rect` elements for bars. Population data is loaded from a CSV and scaled by a thousand. Axis ticks are styled with CSS, and the x-axis format converts large numbers to abbreviations like "B" for billions via D3's `format` function.

Jun 20, 2020

Loading thumbnail…

Cars Report

This example displays a static SVG scene containing a red circle and a blue rectangle, rendered on an HTML page. It loads a small dataset of car records from a JSON string defined in `cars.js` and uses React to parse and access the data. The core logic in `index.js` imports the parsed car array and sets the text content of a nonexistent element with the ID `message-element` to the first car’s make, though the page’s HTML does not include that element. The visualization itself is purely declarative SVG markup, with no interactive or data-driven rendering.

May 23, 2020