Skip to main content
SimilarExport ZIP
100%

Asociaciones/año Scatter Plot with Color

✓ Published0🌍 Public
Ccimadomo
Last edited May 2, 2022
Created on Jun 1, 2021

This scatter plot displays the creation dates and thematic categories of associations in Málaga, with each circle colored by its temática. The visualization uses React with D3 v5 scales including `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `scaleOrdinal` for color encoding. Data is loaded from a CSV file via D3’s `csv` function and rendered as SVG circles with opacity. The chart includes custom axis components for bottom and left orientations, with tooltips currently showing the association name through SVG `<title>` elements.

AI-generated description

A scatter plot of Tipos de asociaciones en Málaga.

Falta solucionar tooltip, para que muestre nombre de asociación (ahora da error NaN).

MIT Licensed

Similar vizzes

Loading thumbnail…

OLD Asociaciones en Málaga. Vega-Lite API

This visualization displays the associations in Málaga as a scatter plot, mapping each association’s creation date along the x-axis and its thematic category along the y-axis. The circles are colored by thematic area, with a tooltip revealing the association’s name. The graphic is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and the data is fetched from a CSV file using d3.csv. The chart uses custom configuration for axis and label styling, and it renders as an SVG, filling the browser window.

Ccimadomo
82% match
Loading thumbnail…

Asociaciones en Málaga Stacked Barchart. Vega-Lite API

This stacked bar chart visualizes associations in Málaga, displaying the sum of activities per association, with bars segmented by thematic category. The chart uses the Vega-Lite API with a `markBar` encoding, mapping quantitative activity sums to the x-axis, association names to the y-axis, and thematic color to the segments. Data is loaded asynchronously from a CSV via `d3.csv`, and the visualization is rendered to SVG through the Vega-Lite API, with customized axis styling for improved readability.

Ccimadomo
77% match
Loading thumbnail…

Asociaciones en malaga from bar chart

This example displays the top 10 most populous countries as horizontal bars, with each bar’s length proportional to its population. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and `csv` to load data from the United Nations World Population Prospects 2019. SVG rectangles render the bars, with numeric tick labels formatted via `format`. The chart updates data through a custom `useData` hook, and includes axis components for layout.

Ccimadomo
73% match
Loading thumbnail…

este

This interactive scatter plot explores the data from the Data Canvas Sense Your City Dataset, allowing examination of relationships between variables. The visualization uses D3.js and React, rendering SVG circles for data points with tooltips. While the code initially suggests a scatter plot with axis components and marks, it also includes a nested data aggregation structure using `d3.nest()`. The final rendering shows a bar chart using D3's ordinal and linear scales, with axes and tick formatting, though the implementation appears incomplete or experimental.

Mmpiedray
73% match
Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot component displays categorical data points across two quantitative axes, with color encoding by category and optional tooltips for interactivity. Built with D3 v6, it renders SVG circles, axes, and labels while supporting configurable margins, scales, and color schemes. The component uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is processed through customizable accessor functions, and the chart animates via D3 transitions when updated.

Bbassansackey@gmail.com
72% match
Loading thumbnail…

ScatterPlot with Color

This interactive scatter plot visualizes the Iris dataset, displaying relationships between user-selected attributes via dropdown menus. The chart uses D3.js scaling functions and SVG circles, with color encoding by species through an ordinal color scale. Built with React, the visualization updates axes and marks dynamically, leveraging D3's `csv` parser for data loading and `scaleLinear` for axis construction.

AAnthony Zornig
72% match
Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange
71% match
Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini
71% match