Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
JJack Chen
Last edited Sep 9, 2024
Created on Sep 7, 2024

This example presents two distinct scatter plots built with D3.js v7 and rendered via SVG. The first chart visualizes a CSV dataset of house attributes, plotting GrLivArea against SalePrice, with points colored pink or teal depending on whether the price exceeds $129,000. The second chart displays a static dataset of x/y coordinates, featuring interactive circles that change color and size on mouseover, display a tooltip with coordinates, and allow users to click anywhere on the SVG to add new data points. Both charts use responsive scaling and axis functions like `d3.scaleLinear` and `d3.axisBottom`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates an interactive scatter plot where users can dynamically select which data columns to display on the x- and y-axes using dropdown menus. It visualizes relationships between numeric attributes like horsepower, weight, and acceleration. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Circles transition smoothly to new positions over one second using chained `transition` and `delay` methods when axes change, with data loaded from a CSV file containing automotive specifications.

OOsekovS
82% match
Loading thumbnail…

Fork of ice5.2

This example visualizes a scatter plot of housing data, with house size on the x-axis and price on the y-axis. Each circle represents a property. The visualization uses the D3.js library, specifically `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for axis rendering. The CSV data is fetched from a remote gist URL. The SVG rendering approach is employed, with circles appended to the SVG container. The code also applies margin conventions to structure the chart layout.

Kktvgs25@gmail.com
79% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a scatterplot visualization of the Iris dataset, showing the relationships between sepal and petal measurements across three flower species. The visualization uses D3.js (d3.v4) with an SVG rendering approach, implementing multiple scatterplots to compare different attribute combinations. The code employs d3.scaleLinear for axis scaling, d3.scaleOrdinal with a categorical color scheme for species differentiation, and d3.axisBottom/Left for tick marks. The iris data is loaded from a CSV file and mapped to separate plot regions within a single SVG canvas.

Eeyxxr1260@gmail.com
79% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a fork of a shapes-and-colors visualization built with D3 v7 and SVG. It renders a static SVG canvas containing a collection of colored shapes, styled entirely through external CSS. The code uses `d3.select` to target the SVG element and loads D3 from a CDN, while the stylesheet controls the visual appearance. No interaction or animation is implemented; it focuses on showcasing basic SVG and CSS integration.

Ggabcee
79% match
Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS-- ME

This example shows a bar chart of monthly values from a CSV file, using SVG rectangles positioned along a time-based x-axis and a linear y-axis scaled to the data’s maximum. The code loads data with `csv` from D3 v7, then uses `scaleBand` and `scaleLinear` to map each row to a bar’s position and height. A data join appends `rect` elements to the SVG, relying on the coordinate system’s top-left origin. The chart is styled minimally with CSS, which sets default margins and stroke properties.

Ddiegobrivo
78% match
Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS

This example shows an interactive horizon chart for air pollution data, letting users compare pollutant levels across six types (SO2, NO2, O3, CO, PM10, and PM2.5) for selected years. The visualization uses D3.js (v7) with an SVG rendering approach, displaying time-series data from a GitHub-hosted CSV dataset. It employs d3.rollup to aggregate measurements and d3.scaleTime for the x-axis, while a dropdown menu switches between annual datasets. The chart updates dynamically by redrawing the SVG elements when the user changes the year selection.

Eeyxxr1260@gmail.com
78% match
Loading thumbnail…

Fork of assignment 7 ScatterPlot

This D3.js v7 example presents a reusable scatter plot that visualizes the relationship between units sold and profit, with points colored by region. Each circle represents a data record from a 200-row CSV dataset. The visualization implements a configurable chart function with setters for data, dimensions, and axis mappings. It uses SVG rendering, d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeTableau10 for categorical colors, and d3.csv for data loading, alongside axis generators and grid lines.

Sshyamraghav12@gmail.com
78% match
Loading thumbnail…

Fork of HTML Starter

This example displays a scatter plot of housing data, mapping living area (GrLivArea) on the x-axis against sale price (SalePrice) on the y-axis. Each data point is rendered as a small green circle using D3.js selections and the `append("circle")` method. The visualization loads a CSV dataset from a remote URL via `d3.csv`, and constructs linear scales with `d3.scaleLinear` to position the circles. Axes are generated using `d3.axisBottom` and `d3.axisLeft`. The plot is embedded within an HTML page styled with large, centered text.

Mmuzzheng
78% match