Skip to main content
Log in
K

Kanagaraj-NN

@Kanagaraj-NN·15 public vizzes

Loading thumbnail…

Fault Localization 9 load csv

Fault Localization 9 load csv presents three horizontally arranged bar charts comparing suspiciousness, recency, and line complexity across 25 source-code lines from Apache Commons Lang. Each chart uses D3 v5’s `scaleLinear` and `scaleBand` to map numeric values and line identifiers to SVG rectangles. Clicking colored sort buttons (red, orange, steelblue) reorders all three charts by that metric. Data is loaded from an external CSV via `d3.csv`.

Dec 2, 2018
Loading thumbnail…

Fault Localization 8 update

Three horizontally aligned bar charts display the top 25 suspicious code lines from Apache Commons Lang, each chart ranking the same items by a different metric: suspiciousness in red, recency in orange, and line complexity in steel blue. The code uses d3.csv to load the data and d3.scaleBand with d3.scaleLinear to render SVG rectangles for each metric. Three colored buttons trigger a re-sorting of all charts simultaneously using d3.select and the sort method, demonstrating an interactive update pattern across synchronized views.

Dec 1, 2018
Loading thumbnail…

Fault Localization 6

Three adjacent horizontal bar charts compare fault-localization metrics for the top 25 suspicious lines from Apache Commons Lang. The charts show suspiciousness, recency, and line complexity using steelblue, orange, and red bars respectively, with a shared y-axis of source-code line identifiers. A sort button reorders the data, though the code does not implement this interaction. The visualization uses D3 v5 with scaleLinear, scaleBand, axisLeft, and axisBottom to render SVG bars from CSV data.

Nov 30, 2018
Loading thumbnail…

Fault Localization 7

Three horizontally aligned bar charts compare three metrics—suspiciousness, recency, and line complexity—for the top 25 ranked source-code lines from the Apache Commons Lang project. Each chart shares a common y-axis of line identifiers, while the x-axis scales linearly per metric, with bars colored steelblue, orange, and green respectively. The visualization, built with D3 v5, uses `scaleLinear` and `scaleBand` to position bars and `axisBottom` for the value axes. A sort button is provided but its interaction is not implemented in the shown code.

Nov 30, 2018
Loading thumbnail…

Fault Localization 5

This visualization presents a tri-panel view of fault localization data for 25 source code lines, showing suspiciousness, recency, and line complexity as horizontal bar charts. Each panel shares the same y-axis ordering by line ID, enabling cross-comparison of metrics. The charts are rendered as SVGs using D3 v5, with the third panel featuring a sort button that reorders bars by line complexity. The suspiciousness and recency panels use `d3.scaleLinear` for x-axes, while all panels employ `d3.scaleBand` for categorical y-axis spacing. Data originates from a CSV file containing Apache Commons source file references.

Nov 30, 2018
Loading thumbnail…

Fault Localization 3

Three horizontally aligned bar charts compare suspiciousness, recency, and line complexity for 25 source-code lines from Apache Commons Lang. Each chart shares the same line IDs on the y-axis, with bar lengths scaled by d3.scaleLinear, while d3.scaleBand handles row spacing. The data loads from data.csv and renders as SVG using D3 v5 selections and axes. An unlabeled sort button exists but its behavior is not implemented.

Nov 26, 2018
Loading thumbnail…

Fault Localization 4

Three side-by-side horizontal bar charts rank the top 25 fault-prone lines from a CSV of Java source metrics by suspiciousness, recency, and line complexity. Each chart shares the same y-axis ordering of line IDs while sorting only the complexity view via the “sort” button, which reorders data with `scaleLinear` and `scaleBand`. Built with D3 v5, the SVG visualization uses `csv`, `axisLeft`, and `axisBottom` to render the grouped comparisons.

Nov 26, 2018
Loading thumbnail…

Fault Localization 2

This visualization displays three horizontally stacked bar charts comparing fault-localization metrics for Java source code lines, using suspiciousness, recency, and line complexity as measured values. Each chart shares the same y-axis ordering by line ID, with the next two panels omitting the left labels to emphasize differences. Built with D3 v5, the code loads data from a CSV file and renders SVG rectangles using scaleLinear, scaleBand, axisLeft, and axisBottom functions, applying steelblue bars across three separate chart regions.

Nov 25, 2018
Loading thumbnail…

Making a Bar Chart

A bar chart displays population estimates for ten countries, with steel-blue rectangles sized by each nation’s population in thousands. The visualization uses D3 v5’s `select`, `csv`, `scaleLinear`, and `max` APIs to load the data and prepare scales, though only the scales are defined—the bars are appended with fixed width and height attributes rather than being scaled to data values. Rendering targets an SVG canvas.

Nov 25, 2018
Loading thumbnail…

Fault Localization

A horizontal bar chart visualizes fault localization data from a CSV file, showing suspiciousness scores for lines of code in two Apache Commons Java files, with each row labeled by identifier. The chart uses D3 v5's `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes. Steelblue rectangles are appended to an SVG canvas, sized by each line's suspiciousness value, providing a quick comparison of which code lines are most likely responsible for faults.

Nov 25, 2018
Loading thumbnail…

Untitled

A horizontal bar chart displays the suspiciousness scores of individual code lines from a Java file, with each bar labeled by an identifier and the x-axis showing the score. The visualization uses a linear scale for suspiciousness and a band scale for the row index. Built with D3 v4, it loads data from a CSV and renders SVG rectangles, axes, and labels using `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and the `d3.axisBottom` and `d3.axisLeft` components.

Nov 25, 2018
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of suspicious code lines ranked by ID, with populating data from a CSV file. It demonstrates how to customize D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick formatter (format('.3s')) to abbreviate numbers, replacing 'G' with 'B'. Data is loaded via d3.csv and rendered as SVG rectangles using scaleLinear and scaleBand. Axis labels and a title are added with custom styling through styles.css.

Nov 25, 2018
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—two circles and a rectangle—positioned on a 960×500 canvas, with one circle filled red. The page combines raw SVG markup in the HTML with an external CSS stylesheet that hides body overflow and defines a highlighted class. No JavaScript or external libraries are used; rendering relies entirely on native SVG elements and CSS styling.

Nov 24, 2018
Loading thumbnail…

HTML Cars Report

This example displays a simple, static HTML report listing three used cars with their model years and prices, highlighting the first item in red. It demonstrates a basic hypertext-based data presentation without any JavaScript libraries or dynamic rendering. The page is built with plain HTML and styled using a separate CSS file, where the `body` rule sets a large monospace font and the `.highlighted` class applies red text to the selected list item. The data is hardcoded directly in the markup, showing a straightforward approach to visualizing tabular information.

Nov 24, 2018
Loading thumbnail…

Cars Report

This example renders a static report of car listings, displaying the text “Hello world” in a large, centered Ubuntu font on a dark background. It uses a predefined dataset of car objects, including make, model, year, and price, though the visualization itself does not currently display this data. The code imports car data from a `cars.js` module and relies on ES6 module syntax, with styling via external CSS and Google Fonts. The page structure is minimal, using an HTML `<pre>` element for text output.

Nov 24, 2018