KrishnaVamsi09

@KrishnaVamsi09·8 public vizzes

Untitled

A static legend template renders five color-coded grade categories—A, B, C, D, and F—as labeled rectangles inside a bordered box. Built with d3.v4, the code appends SVG rectangles and text elements using chained `attr` calls, with fixed coordinates and fill colors (green, steelblue, dark blue, light blue, and red). The example includes two buttons that reference undefined update functions, indicating an intended but unimplemented interactivity; currently, the visualization displays only the legend without any data-driven elements.

May 25, 2020

Loading thumbnail…

Untitled

This example shows a horizontal bar chart comparing marks across grade categories (Grade_A through Grade_F) using a CSV data source. Each bar is color-coded based on its mark value via the `colourPicker` function, and hovering with the mouse triggers an animated enlargement of the bar while displaying a tooltip with the mark and grade. The visualization uses D3 v4 with SVG rendering, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and transitions via `transition.duration` and `transition.delay` for the initial render and hover interactions.

May 25, 2020

Loading thumbnail…

Untitled

This example shows a dataset of ten groups labeled A through J, each with two numeric variables, rendered as a horizontal bar chart. The visualization uses the D3.js library, with `d3.scaleBand` mapping the categorical groups to the x-axis and `d3.scaleLinear` mapping the numeric `var1` values to the bar lengths (the `var2` column is loaded but not displayed). The SVG-based chart is generated by `index.html` and styled with `style.css`, with chart dimensions and margins defined inline; the bars are drawn using `d3.shape` rectangles, and axis ticks are labeled via `d3.axisBottom`. The data is read from the `data.csv` file asynchronously.

Apr 30, 2020

Loading thumbnail…

Stylized Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, using population data from the United Nations World Population Prospects 2019. The chart uses React with D3 v5 for scales and rendering, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the x-axis, and SVG rectangle marks with native `<title>` tooltips. Population values are formatted with `d3.format`, converting gigabytes abbreviation to billions for axis labels.

Mar 29, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML” centered on the screen with a very large font size. It uses plain HTML and CSS, with the body element configured for text alignment and an em-based font size. No external libraries or data sources are involved, serving as a barebones starter template for web-based visualization projects.

Mar 29, 2020

Loading thumbnail…

Untitled

This interactive bar chart visualizes XYZ Foods stock prices from 2011 to 2016, with dollar-valued y-axis labels and a traditional bar layout. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG rendering with animation. Hovering over a bar triggers a `mouseover` event that highlights the bar in orange, expands its dimensions, and displays a temporary price label, while `mouseout` reverts these changes. Data is loaded from a local CSV file.

Mar 29, 2020

Loading thumbnail…

D3 Course 1: Bar Chart

This example presents a horizontal bar chart of national populations, sourced from a local CSV file. Built with D3.js v5, it uses the SVG rendering approach with `d3.scaleLinear` and `d3.scaleBand` to position bars, and `d3.axisLeft`/`d3.axisBottom` for labeled axes. Population values are formatted with tick formatting for readability. The chart includes a title and axis labels styled via CSS.

Mar 29, 2020

Loading thumbnail…

Untitled

This example shows an interactive network graph rendered as SVG, displaying nodes and links that respond to drag and force-based movement. It uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute layout, while d3.drag enables node repositioning. Nodes appear as colored circles with labels, and edges are drawn as straight lines. The visualization updates iteratively through the simulation’s tick event, redrawing positions dynamically on an 800x500 canvas.

Mar 11, 2020