cimadomo

@cimadomo·6 public vizzes

Asociaciones/año Scatter Plot with Color

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.

May 2, 2022

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.

Jul 25, 2021

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.

Jul 25, 2021

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.

Jul 25, 2021

Loading thumbnail…

Just Another Scatter Plot (he jianfeng)

This scatter plot visualizes population data for the top 10 most populous countries, showing each country's population on the x-axis using a linear scale with tick formatting that abbreviates large numbers. The y-axis uses a point scale to position each country as a separate categorical label. Built with React and D3 v6, the visualization loads CSV data from a remote URL, maps it to circle positions, and renders axes with custom grid lines and tick styling. Titles and axis labels are added using SVG text elements. While the code references a different dataset and column names, the displayed data uses the provided `data.csv` file.

Jun 1, 2021

Loading thumbnail…

parsing css

This example demonstrates how to fetch and log a CSV file containing CSS named colors and their corresponding hexadecimal values. It uses the Fetch API to retrieve the text data from a GitHub gist URL asynchronously. The code employs a concise async/await pattern within a `fetchText` function, then logs the raw CSV content to the browser console. The React framework is referenced in the metadata, though the provided HTML page itself is a minimal vanilla JavaScript implementation.

May 7, 2021