Fork of Blank Canvas

100%

Fork of Blank Canvas

✓ Published1🌍 Public

Last edited Feb 7, 2024

Created on Feb 7, 2024

This example presents a dashboard of four Chart.js charts rendered on canvas, mixing a bar chart of color votes, two line charts of monthly datasets, and a pie chart of categorical proportions. It loads Chart.js from a CDN and builds each chart via the library’s `Chart` constructor with `getContext('2d')`. A separate D3 script sets the SVG canvas size with `select` and `attr`, while the dashboard uses inline HTML styling with a container layout. The data are hardcoded example values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Blank Canvas

This example demonstrates a fork of a fork of a blank canvas, presenting two distinct bar chart visualizations. The first chart renders a simple dataset with values 4, 8, 15, 16, 23, and 42 using D3 v7's `scaleLinear` and `select`/`selectAll`/`append` APIs to draw rectangles and text labels on an SVG canvas. The second chart uses the Chart.js library to display categorical vote counts in a bar format with semi-transparent background colors and border styling. Both charts are drawn to an HTML canvas element, with the page's styles defining a fixed, full-viewport layout.

Aagopu@nd.edu

88% match

Loading thumbnail…

Fork of Blank Canvas - 020924a

This example displays a full-window, rounded rectangle rendered as a blank canvas using D3 v5 and SVG. The code sizes the SVG to the browser viewport and appends a single `<rect>` element with a 40-pixel corner radius. No data is loaded or displayed; the visualization serves as a minimal starting point for further development, using `d3.select` to bind the SVG element and set its attributes.

DDavid Schmidt

76% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu

76% match

Loading thumbnail…

Blank Canvas

A simple bar chart displays five static values, from 336 down to 30, as vertical rectangles. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map the data to pixel coordinates, with axes rendered via `axisLeft` and `axisBottom`. Bars are drawn as SVG `rect` elements, positioned and sized directly from the hardcoded dataset, with no interaction or animation.

JJeffrey Mcintyre

75% match

Loading thumbnail…

Fork of HTML Starter

A dark-themed dashboard loads a local CSV file via D3 v7, summarizes the data into three key performance indicators, and renders a bar chart of a selected numeric column. The SVG visualization uses D3 scales, axes, and a linear gradient fill for the bars. The page includes a file picker, controls for selecting columns, and a fixed 420-pixel chart area.

MManeesh Kumar

75% match

Loading thumbnail…

Fork of Fork of assignment 7 PieChart

This dashboard displays four coordinated D3 v7 charts from a 200-row CSV dataset: a scatter plot of units sold versus profit colored by region, a pie chart of revenue distribution across regions, a line chart of monthly revenue trends, and an area chart of cumulative monthly revenue. Each visualization uses SVG rendering with scales, axes, and color encoding via `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.pie`, `d3.arc`, and `d3.rollups` for aggregation. The interactive layout includes grid lines and legends within styled chart sections.

Sshyamraghav12@gmail.com

75% match

Loading thumbnail…

Fork of HTML Starter

This example displays a bar chart of categorical data, showing the number of votes for six color categories. It uses the Chart.js library to render the visualization on an HTML canvas element. The chart is configured with colored bars, borders, and a y-axis that begins at zero, using the `Chart` constructor with a bar type and associated datasets. The data is hardcoded within the script.

MMateusz Urban

75% match

Loading thumbnail…

Fork of Blank Canvas

This example creates a full-screen, rounded rectangle that fills the browser window. It uses D3 v5 to select the SVG element and dynamically sets its dimensions based on the viewport’s client width and height. The code appends a single `rect` element with a 40-pixel corner radius, rendering a minimal blank canvas. No data is loaded; the focus is purely on establishing a responsive SVG drawing surface using D3’s `select` and attribute manipulation.

Iineshp2020@gmail.com

75% match