Skip to main content
Log in
M

marianamartins87

@marianamartins87·24 public vizzes

Loading thumbnail…

World Mapchoropleth

A world map displays country boundaries and graticules, with semi-transparent circles sized by the "Total Dead and Missing" statistic from a CSV of location coordinates. The visualization uses React with D3 v5, employing `d3.geoNaturalEarth1` and `d3.geoPath` for the map projection, `d3.geoGraticule` for grid lines, and a square-root scale for circle radii. Country shapes come from World Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`.

Apr 22, 2021
Loading thumbnail…

Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration incident. The x-axis maps the reported date using a time scale, while the y-axis uses a logarithmic scale to show the total dead and missing, with hover tooltips displaying the exact date. Built with React and D3 v5, the visualization renders as an SVG, using `scaleTime`, `scaleLog`, and `extent` from D3 to compute scales and domains. The code loads the dataset via D3's `csv` function and uses custom React components for axes and marks.

Apr 22, 2021
Loading thumbnail…

brushing World Map migrants

This example shows a world map of missing migrants, with bubble circles sized by the total dead and missing count at each location. A linked histogram below displays the same data over time, and brushing a time range filters the map’s bubbles to only show incidents within that period. The visualization uses React for component structure, d3.geoNaturalEarth1 and d3.geoPath for the map projection, d3.scaleSqrt for bubble sizing, and d3.brushX for the interactive time filter. Data comes from a CSV of missing migrants, rendered as SVG.

Apr 22, 2021
Loading thumbnail…

diferent views World Map migrants

A world map displays migrant deaths and missing persons as semi-transparent bubbles, sized by the total count per location using a square-root scale. A time-series histogram below aggregates these totals by month, with bars showing the sum of deaths and missing per reporting date. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for map projections, `scaleSqrt` for bubble sizing, and `bin` with `timeMonths` for histogram binning. Data comes from the Missing Migrants Project CSV, with geographic coordinates parsed from location strings.

Apr 8, 2021
Loading thumbnail…

Fork of World Map migrants

This visualization displays a world map with semi-transparent circles marking locations of missing migrants, sized proportionally to the total number of dead and missing individuals. Using React, d3.geoNaturalEarth1, and d3.geoPath, it renders land boundaries, interiors, graticules, and a sphere. Circle radii are scaled with d3.scaleSqrt based on data from a CSV dataset, which is loaded via d3.csv and combined with World Atlas TopoJSON for geographic features.

Apr 7, 2021
Loading thumbnail…

Fork of Missing Migrants

This chart visualizes the Missing Migrants dataset, showing the total number of dead and missing migrants binned by reported date. It aggregates individual events into monthly totals, rendering a bar chart with D3’s `histogram` and `scaleTime` APIs, with React and SVG for the interface. The bars are colored teal, and hovering reveals the exact count via a tooltip. Data is sourced from a CSV loaded using D3’s `csv` function.

Apr 7, 2021
Loading thumbnail…

World Map points

A world map displays city points scaled by population, with country boundaries, graticules, and a sphere outline rendered as SVG. Using React and D3 v5, the visualization employs d3.geoNaturalEarth1 for projection, d3.geoPath for drawing land and graticule geometry, and d3.scaleSqrt for radius mapping. City data comes from a CSV of world cities, while country shapes load from World Atlas TopoJSON. Semi-transparent teal circles overlay the map, with land filled light gray and interiors shown as thin strokes.

Apr 7, 2021
Loading thumbnail…

interactive color

This interactive scatterplot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species via dropdown menus. The visualization uses D3 v5 scales and SVG rendering with a React interface, where hovering over the color legend highlights points from the selected species while fading others. Axes are generated with custom React components wrapping D3’s scale functions, and the color scale uses an ordinal mapping to distinguish species.

Mar 27, 2021
Loading thumbnail…

scatter with legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three species. A legend uses color to distinguish species, while dropdown menus let viewers change which attributes appear on the x- and y-axes. Built with React, the visualization uses D3 scales (d3.scaleLinear, d3.scaleOrdinal) to map data to SVG coordinates and colors. The interface includes axis components, a color legend rendered as circles, and tooltips showing formatted values, with data loaded from a CSV file.

Mar 27, 2021
Loading thumbnail…

polished scatter menus

This interactive scatter plot of the Iris dataset lets users dynamically select which flower measurements appear on the x and y axes using React Dropdown menus. The visualization updates the axes and points accordingly, with circles colored by species via a d3.scaleOrdinal scale. Built with React and D3 v5, it renders an SVG chart featuring d3.scaleLinear axes, axis tick components, and tooltips displaying formatted values, loading data from a CSV file.

Mar 20, 2021
Loading thumbnail…

scatter with dropdown

This interactive scatterplot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently choose which attribute to plot on the X and Y axes, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, SVG circles for data points, and `csv` for data loading from a GitHub-hosted dataset. Tooltips display formatted values on hover, while the React `useState` hook manages the selected axis attributes.

Mar 17, 2021
Loading thumbnail…

menus with react

This example shows a single pet-selection dropdown menu built with React. Users choose from six animal options, and the selected value is managed through React’s `useState` hook. The `Dropdown` component renders a `<select>` element, mapping over an options array to create `<option>` tags and firing `onSelectedValueChange` on change. It uses React and ReactDOM from UMD builds, with styling applied via plain CSS for oversized text and hidden page margins.

Mar 17, 2021
Loading thumbnail…

dropdown

This example demonstrates a minimal React application that renders a static "Hello React" message inside a div element. The code uses React 17 and ReactDOM to mount the component into the page’s root container, with a CSS style that removes margins and hides overflow. The page loads React and ReactDOM from unpkg CDN links, and the application logic is bundled in a separate JavaScript file. No data visualization or interactive features are implemented beyond the basic text output.

Mar 17, 2021
Loading thumbnail…

Fork of smiley miana

A grid of eighteen smiley faces, each rendered as SVG, uses randomized parameters to vary eye size, eye offset, mouth width, and mouth radius. Built with React components in D3 v6, the visualization employs `d3.arc` to generate mouth paths and `d3.range` to create the array of faces. Each face receives its own random values per render, resulting in a playful, non-interactive composition of distinct expressions.

Mar 17, 2021
Loading thumbnail…

World Map

A world map displays country boundaries as filled landmasses against a light sphere, with graticules and interior borders drawn in contrasting strokes. The visualization is built with React and D3 v5, using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and render the SVG paths. Country and land geometry comes from the World Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. A muted teal and gray palette gives the map a polished, stylized appearance.

Mar 17, 2021
Loading thumbnail…

worldmap

This example displays a world map using a natural Earth projection, with countries rendered as light green paths against a blue spherical backdrop. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using the topojson feature function. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate the SVG path data, styling the sphere and country shapes through CSS classes.

Mar 17, 2021
Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays daily temperature variations in San Francisco over one week, using a smooth natural-curve line chart rendered as SVG within a React application. The chart pulls its dataset from a CSV file of the Data Canvas Sense Your City collection, loaded via the d3.csv function. Time-series data appears on the x-axis with a time-formatting tick function, while the y-axis maps temperature values using d3.scaleTime and d3.scaleLinear. The line path is generated with the d3.line and d3.curveNatural modules, with axis components built as custom React components that produce tick marks and labels.

Mar 14, 2021
Loading thumbnail…

iris

This visualization shows the relationship between sepal length and sepal width for the Iris dataset, with each flower species represented as a point on a scatterplot. The chart displays a circular mark for each observation, with axes labeled and formatted using d3.scaleLinear and d3.format. The code uses React components to render SVG elements, loading data via d3.csv and computing scales with d3.extent. The visualization is built with D3 v5 and React 16.9, providing a clean, minimalist exploration of the classic Fisher iris dataset.

Mar 14, 2021
Loading thumbnail…

refactored barchart

This example displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as a horizontal bar chart with axes, tick labels, and a title. Refactored into reusable React components, the visualization uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and formats population values with d3.format. SVG renders the bars, while axis components (AxisBottom, AxisLeft) and Marks generate the graphical elements. The tooltipFormat function provides abbreviated population values on hover via native SVG title elements.

Mar 13, 2021
Loading thumbnail…

world pop

This example visualizes world population data from a CSV file, displaying each country as a horizontal bar whose width corresponds to its population. The visualization uses React to manage state and render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping country names to vertical positions and population values to bar widths. Data loads asynchronously via `d3.csv`, and the chart updates dynamically once the dataset is fetched.

Mar 6, 2021
Loading thumbnail…

Rendering data with react

A donut chart displays all CSS named colors, with each color represented as a slice of equal size. The React application loads color data from a CSV file using `d3.csv()`, then uses the `d3.pie()` and `d3.arc()` generators to compute and render SVG paths. React hooks like `useState` and `useEffect` manage the asynchronous data loading, while each path’s fill is set from the `RGB hex value` column in the dataset.

Mar 6, 2021
Loading thumbnail…

Loading and parsing csv data

This example displays the size of a parsed CSV file in kilobytes within a large-format text element. It fetches a remote CSV file containing CSS color names from a GitHub gist, parses it using `d3.csv`, and formats the data back into a CSV string with `d3.csvFormat` to calculate its byte length. The result is rendered as plain text inside an HTML `<pre>` element. The page uses D3 v6 loaded via CDN, with minimal CSS styling for the text display.

Mar 5, 2021
Loading thumbnail…

Mouse follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time to mirror the user's pointer movement. The visualization uses React state management with the `useState` and `useCallback` hooks to track the cursor's client coordinates, which are then passed to the circle's `cx` and `cy` attributes. Rendered via ReactDOM, the SVG element listens for `onMouseMove` events to trigger the position updates, creating a simple interactive demonstration of dynamic component re-rendering within a React-based visualization.

Mar 5, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face drawn with basic SVG shapes: a large yellow circle for the head and two smaller black circles for the eyes. The code uses plain SVG elements (`<circle>`) with explicit `cx`, `cy`, and `r` attributes, all rendered statically at fixed coordinates. The head is outlined with a black stroke, and the eyes are positioned symmetrically around the center. No JavaScript libraries or interactive behaviors are present; the visualization is a static, hand-coded SVG composition.

Mar 4, 2021