Mireia Parra

@mireiaparra·6 public vizzes

Ratings of Robert De Niro's movies

This visualization shows the relationship between Pokémon Attack stats and Generation number, with each data point representing a Pokémon plotted along these two axes. The rendering uses an SVG canvas created with D3.js (version 7.8.5), where the x-axis maps Attack values and the y-axis maps Generation using `scaleLinear` and `extent` functions. Data is loaded asynchronously from a CSV file hosted on GitHub via D3's `csv` method, with numeric fields parsed for accurate scaling. The chart fills the entire browser window by setting SVG dimensions to `window.innerWidth` and `window.innerHeight`, while the page margins are zeroed in CSS for a full-screen display.

Jan 15, 2024

Loading thumbnail…

Ratings of Robert De Niro's movies

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red semi-transparent circle represents a car, with its position determined by the d3.scaleLinear functions for the x and y axes. The visualization uses d3.axisBottom and d3.axisLeft to render the axes, and the code parses numerical data fields before rendering the SVG output.

Jan 15, 2024

Loading thumbnail…

Data Visualization

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal dimensions by selecting different measurements for the X and Y axes via dropdown menus. The D3.js visualization uses `csv` to load data and `scaleLinear` with `extent` for axes, while circles animate their positions with `transition` when axes change. The scatterPlot module uses `selectAll` and `join` for rendering SVG circles and axes, with an interactive menu system built with `dispatch` for change events.

Jan 3, 2024

Loading thumbnail…

Data Visualization: menu

This scatter plot displays the Iris dataset, mapping petal width against sepal length for each sample. A visible menu container is present, though its interactive functionality is not yet implemented. The visualization is built using D3 version 6.7.0, specifically leveraging the `csv`, `select`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The SVG rendering is sized to the browser window and uses the 'Share Tech' font from Google Fonts. The code includes commented-out logic for cycling through different data columns, suggesting future interactivity.

Jan 3, 2024

Loading thumbnail…

Data Visualization: menus

This example shows a scatter plot of the Iris dataset, with points colored by species and axes labeled for petal width and sepal length. A dropdown menu container is positioned at the top left, though its interactive functionality is not yet implemented. The visualization uses D3.js version 6.7.0, with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, and renders as an SVG that adapts to the window dimensions. The code structure separates the reusable `scatterPlot` component from the main data-loading script, which fetches CSV data from a GitHub gist.

Jan 3, 2024

Loading thumbnail…

Data Visualization

This scatter plot animates through four dimensions of the Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds. The visualization uses D3 v6 with a reusable `scatterPlot` function that leverages `scaleLinear`, `axisLeft`, and `axisBottom` for axes. Data is loaded via `csv` from a GitHub Gist and parsed into numeric values. The plot renders as SVG circles with a radius of five, and the animation is driven by `setInterval` updating the `xValue` accessor and re-calling the plot.

Jan 3, 2024