100%

Data Visualization - Assignment 1

✓ Published0🌍 Public

Last edited Mar 1, 2022

Created on Mar 1, 2022

Forked from Data Visualization - Assignment 1

This example visualizes the distribution of 150,000 randomly generated points using a static heatmap rendered as an SVG. The viewport is divided into a 10 by 10 grid, and each cell’s fill color encodes the density of points within it, using a white-to-blue interpolated color scale via `d3.interpolateRgb`. The code computes per-cell point counts to determine the minimum and maximum densities, then maps those values to the color range. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the grid rectangles are bound to data with `d3.selectAll().data().enter()`.

AI-generated description

MSBD5005 Assignment 1a

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization - Assignment 1

This example uses a 10×10 heatmap grid to visualize the density of 150,000 randomly generated points, with each cell colored on a gradient from white to royal blue based on point count. The visualization is rendered as SVG using D3.js v4, employing `d3.interpolateRgb` for color scaling and D3’s data-join to bind grid cells to rectangles. Points are binned into rows and columns via JavaScript math, and the minimum and maximum densities normalize the color scale. Axes are added with `d3.axisBottom` and `d3.axisLeft`.

CCenz Wong

95% match

Loading thumbnail…

Dataviz 2018 Assignment Graphics

This example demonstrates a simple grid of blue squares rendered inside an SVG element. The visualization begins with a single static rectangle defined in the markup, then uses the D3.js `select` and `attr` APIs to programmatically append a looping series of additional rectangles, creating a dense 50-pixel grid pattern across the canvas. The underlying data is generated algorithmically rather than sourced from a dataset. The final result is an abstract, low-level exercise in shape composition, with the SVG output styled by a minimal external CSS file.

MMukund Khandelwal

74% match

Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar

74% match

Loading thumbnail…

Assignment-2

This visualization shows the results of Assignment-2, displaying data points as an animated scatterplot. It uses `d3.forceSimulation` to position and move circles, with labels rendered for each point, and includes a refresh button to reset the animation. The example relies on D3’s event handling for mouse interactions and transitions to update positions smoothly. The data appears to be generated randomly, and the rendering approach uses SVG elements managed through D3’s selection and data-join methods. The author is VaishnaviGunnaReddy, and the source is labeled v3.

Vvaishnavi6gan@gmail.com

74% match

Loading thumbnail…

Heatmap D3 random

This example shows a 50-by-50 heatmap with randomly generated values, where each cell’s color scales from light teal to dark green. It renders as an SVG using React, with d3.scaleBand for x and y positioning and d3.scaleLinear for the color range. The data is created in-memory via Math.random, and the chart fills the entire browser window.

LLewis Ward

73% match

Loading thumbnail…

Untitled

This example shows a 10-by-10 heatmap of categorical data, where each cell’s fill pattern encodes a numeric value instead of color. Four texture patterns with different circle sizes are mapped to value ranges via a `d3.scaleOrdinal`. The chart is built with D3 v4, using `d3.scaleBand` for axes and SVG `<rect>` elements for cells. Data is loaded from a remote CSV file, and textures are generated with the textures.js library.

Zzoniyac

73% match

Loading thumbnail…

Untitled

This example visualizes the distribution of a single numeric variable using a histogram with 70 bins. The code loads data from a CSV file, applies d3.histogram to compute bin counts, and renders bars with d3.scaleLinear axes. Bars below a threshold of 140 are colored orange, while others are teal, with a dashed line and label marking the split. The visualization is built with d3.v4, rendered as SVG within a React framework, and uses d3.axisBottom and d3.axisLeft for the axes.

Aansnejib2468

72% match

Loading thumbnail…

D3: Scatterplot!

This interactive scatterplot displays 50 random data points on Cartesian axes, with each circle colored blue or red depending on whether its x-coordinate falls in the left or right half of the plot. Clicking the “Randomize” button generates a fresh dataset and smoothly animates the points, axes, and color updates over two seconds. The visualization is built with D3 3.5.5, using the `d3.scale.linear`, `d3.svg.axis`, and `transition().duration(2000)` APIs, and renders entirely as SVG. The code derives from Scott Murray’s examples, forked from earlier gists by anonymous and jalapic.

MMissHanJ

72% match