Skip to main content
SimilarExport ZIP
100%

Mallak Alkhathlan assignment 1

✓ Published0🌍 Public
Mmnalk
Last edited Aug 29, 2021
Created on Aug 29, 2021
Forked from Hello VizHub

This chart displays student emotional data using two sets of horizontal bar charts. The first set uses CSS-styled rectangles with emoji labels, while the second set applies SVG `<linearGradient>` definitions and `stop` elements to color the bars. The visualization uses inline SVG, CSS transitions and hover states, and includes stroked paths for additional data representation.

AI-generated description

inspired by other people's work:

Cite from: 1)https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients [Gradients] 2)https://www.w3schools.com/graphics/svg_stroking.asp [svg stroking] 3)https://www.w3schools.com/charsets/ref_emoji_smileys.asp [Emoji] 4)https://www.w3schools.com/css/css_colors.asp [CSS Color Names]

MIT Licensed

Similar vizzes

Loading thumbnail…

Mallak Alkhathlan assignment 1

The graphic displays a survey of student emotional responses as a horizontal bar chart, with two distinct visual encodings. The first set of bars uses plain orange rectangles with emoji labels (e.g., 😤, 😂) to show counts, while the second set employs SVG linear gradients, transitioning through colors like Tomato, SlateBlue, and Orange, with rounded corners. The SVG uses CSS classes for hover interactions, changing bar fills to SlateBlue and text to Tomato. The chart, defined in an inline SVG within `index.html` and styled by `styles.css`, relies on native SVG elements (`rect`, `linearGradient`, `text`) and CSS transitions—no external JavaScript libraries.

Mmnalk
92% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

MMukund Khandelwal
68% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

MMukund Khandelwal
68% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

MMukund Khandelwal
68% match
Loading thumbnail…

Untitled

This bar chart displays the number of students for various grades and locations, with bars colored blue and axes labeled "Grades" and "Num_students." The visualization uses D3.js v6 to create an SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Data is hardcoded in an array of objects, while axes are generated with `d3.axisLeft` and `d3.axisBottom`. The chart includes a pink background rectangle and console logs for debugging scale behavior.

Hhanulik.ondrej@gmail.com
67% match
Loading thumbnail…

D3: Linked charts

A bar chart displays student grades from a dataset of student IDs and numeric grade values, with each bar representing a student. The visualization uses linked charts to show grades and allows sorting by ascending or descending order. Built with D3.js, it uses SVG rendering with animated bar transitions and axes. The bars are color-coded using hue and saturation, and hovering highlights individual bars to reveal exact grade labels. The data appears to be sample grade records with student IDs, and the chart is designed to compare grade distributions across students.

AAdlopez2016
67% match
Loading thumbnail…

D3: Linked charts

Two linked bar charts display the same dataset of grades and associated names. Three sorting buttons reorder both charts simultaneously, with bars animating into their new positions. The example uses D3.js version 3.5.5 with ordinal and linear scales, SVG rendering, and transition delays to animate bar heights and the appearance of axes. The data is embedded as a JavaScript array of objects with name and grades properties.

AAdlopez2016
66% match
Loading thumbnail…

Untitled

A smiley face chart built with React and D3.js (v2) visualizes sales data as animated, drop-shadowed bars. The bar chart maps categorical x-axis values to ordinal scales and y-axis values to linear scales, rendering SVG rectangles with D3’s selection and mutation APIs. Tooltip-like captions are applied via axis tick formatting, and the animation and styling use D3’s SVG, scale, and axis components, with data fetched through a chart transformation function.

SSravan1888
66% match