Skip to main content
Log in
J

Jeyasuriya M

@Jeyasuriya1998·10 public vizzes

Loading thumbnail…

Apexchart

This example shows a React application that renders an interactive ApexCharts visualization. It loads the ApexCharts library, React, and ReactDOM from CDNs, then uses the ApexCharts API to display a chart within a React component. The chart appears to be a line or area chart, with the data and configuration passed directly to the ApexCharts constructor. The rendering approach relies on React’s declarative component structure to mount the chart into the page.

Dec 7, 2021
Loading thumbnail…

Stack Bar Chart

This stacked bar chart displays the counts of correct and incorrect responses, categorized by strong and weak confidence levels, across five timestamps from November 19, 2021. The chart uses d3.stack with stackOrderAscending to layer the four color-coded categories, while React checkboxes allow users to toggle which categories appear. The visualization is rendered as an SVG using d3.scaleBand and d3.scaleLinear for axes, with a useResizeObserver hook making the chart responsive to container width changes.

Dec 7, 2021
Loading thumbnail…

Stacked Bar

This stacked bar chart visualizes counts of four answer categories—Strong Correct, Strong Wrong, Weak Correct, and Weak Wrong—across five dates in November 2021. Each bar segment is color-coded and labeled using Chart.js’s datalabels plugin, with black borders delineating segments. The chart uses Chart.js’s stacked bar configuration, setting both x and y axes to stacked mode and enabling counts to accumulate per date. Data is hardcoded in a JavaScript object, and the canvas renders via the HTML5 Canvas API.

Nov 30, 2021
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal webpage that displays the text “Hello HTML!” in large, centered type. It shows the basic structure of an HTML document that combines CSS for styling and JavaScript for potential interactivity, though the code itself contains no JavaScript logic. The page uses a single styled `<div>` element with a CSS class to control font size and alignment. This starter template relies on plain HTML and CSS, without external libraries or data sources, and serves as a foundation for building more complex visualizations.

Nov 30, 2021
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays student performance across five test attempts, breaking down questions into four categories based on correctness and confidence level. The bar chart uses color to distinguish between correct strong, correct weak, incorrect strong, and incorrect weak responses, while the x-axis orders test numbers by their totals. The visualization is built with the Vega-Lite API, which configures the bar marks, scales, and tooltips, while D3’s CSV loader is present for data fetching. The data is hardcoded in the script, representing fictional assessment results rather than an external dataset.

Nov 30, 2021
Loading thumbnail…

Fork of Stylized Line Chart

A smooth line chart displays San Francisco weekly temperature trends over time, using a natural curve to connect data points from the Data Canvas Sense Your City dataset. Built with React and D3 v5, the SVG visualization employs `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with `line.curveNatural` generating the styled path. Axis components render tick marks and labels, while the chart omits individual data points for a clean, minimalist look. Temperature is plotted against timestamps, with Poppins typography and teal stroke styling.

Nov 29, 2021
Loading thumbnail…

Iris Scatter Plot React & D3

This example visualizes the Iris flower dataset as a scatter plot, showing sepal length against sepal width. Built with React and D3 v5, it renders SVG circles for each data point, with axes and tick marks generated from D3 scales. The code uses `scaleLinear`, `extent`, and `format` from D3 for scaling and tick formatting, while React components like `AxisBottom`, `AxisLeft`, and `Marks` structure the visualization. Data is loaded asynchronously via D3's `csv` utility and parsed into numeric values.

Nov 27, 2021
Loading thumbnail…

Population Bar Chart React & D3

This example shows a horizontal bar chart comparing the populations of the ten most populous countries in 2020, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3 v5 providing the scale functions `scaleBand` and `scaleLinear` for positioning bars and axes. Data is loaded asynchronously from a CSV file using D3’s `csv` utility, and population values are formatted with billions labeled as “B” using `format`. Axis components and marks are built as reusable React components (`AxisBottom`, `AxisLeft`, `Marks`), and tooltips appear on bar hover via SVG `<title>` elements.

Nov 27, 2021
Loading thumbnail…

Pie Css Rendering Data with React & D3

This visualization displays CSS named colors as a radial burst of pie slices, with each slice filled using its corresponding hex value from a CSV dataset of color names. The code combines React hooks for state management and data loading with D3 utilities, specifically `d3.csv` for fetching the data and `d3.pie` and `d3.arc` for computing and rendering the arc paths as SVG elements. React renders the SVG markup, while D3 handles the geometric calculations, producing a colorful circular chart that showcases the color palette.

Nov 27, 2021
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a bar chart of student performance data, showing chapters on the x-axis and total scores on the y-axis, with bars colored by difficulty level and tooltips revealing the total score. The underlying data is a small set of chapter names, percentages, scores, levels, and elapsed times. The visualization is built with the `vega-lite-api` library, which generates a Vega-Lite specification that is rendered by the Vega engine. The code registers both Vega and Vega-Lite, applies custom configuration for axis styling, and uses the d3 `csv` function to fetch data from a remote URL, though the live render uses hardcoded data instead.

Nov 22, 2021