M

Matias Conde

@matiasconde·20 public vizzes

Loading thumbnail…

Fork of Fork of Missing Migrants Scatter Plot Log Scale

This interactive scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migrant incident. The x-axis maps the reported date on a time scale, while the y-axis uses a logarithmic scale for the total number of dead and missing, allowing for comparison across a wide range of magnitudes. Built with React and D3 v5, the visualization renders as an SVG using `scaleTime` and `scaleLog` for axes, with hover tooltips providing exact dates. The data is loaded from a CSV via D3’s `csv` function.

Loading thumbnail…

Histogram + map + brushing

This example combines a bubble map with a date histogram, using brushing to filter the map by time range. The map displays the total dead and missing migrants by location, with circle sizes scaled via d3.scaleSqrt. The histogram bins reported dates into months using d3.bin and sums values per bin. A d3.brushX selection updates the map’s filtered data. The visualization uses React for state management, d3.geoNaturalEarth1 and d3.geoPath for the geographic projection, and renders all elements as SVG.

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart visualizes the distribution of religious affiliations across countries, with each bar segment colored by religion and sized by population. The visualization is built using Vega-Lite API, React, and D3, with data loaded from a CSV file and rendered as SVG. The chart implements interactivity through a Vega tooltip, which displays population values on hover, while a custom configuration adjusts axis styling and text colors to improve readability.

Loading thumbnail…

NEW MAP

This map visualizes the distribution of world cities by population, using circle size to represent each city's population value. The visualization employs D3's geoNaturalEarth1 projection and geoPath to render landmasses, a graticule, and the sphere, with geoGraticule generating the grid lines. Cities are positioned using the projection, and their radii are scaled using d3.scaleSqrt, ranging up to 15 pixels. The React-based application loads geographic data from the world-atlas package and city data from a CSV file containing population figures.

Loading thumbnail…

World Map

This example visualizes global population distribution by rendering a world map with cities represented as scaled circles. The map displays land masses, graticules, and country borders, while city markers use a square-root scale to encode population size. The visualization is built with React and D3 v5, using `geoNaturalEarth1` projection via `d3.geoPath` and topojson data from the world-atlas package. Population data comes from a CSV of world cities, with React hooks managing asynchronous data loading.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot Log Scale

A scatter plot of the Missing Migrants Dataset shows individual migration events over time, with each circle representing a single event’s reported date on the x-axis and total dead or missing on a logarithmic y-scale. The visualization uses React to render SVG circles and axes, leveraging D3 v5’s `scaleTime`, `scaleLog`, `csv`, and `extent` APIs for data loading, scaling, and tick generation, with native SVG `<circle>` elements and `<title>` tooltips for interactivity.

Loading thumbnail…

Fork of Missing migrants on a Map + histogram + brushing

This interactive visualization combines a bubble map and a time-series histogram to explore missing migrant incidents. The map uses a natural Earth projection with circles scaled by the square root of the total dead and missing count, while the histogram aggregates monthly totals. Users can brush over the histogram to filter the map’s displayed data. Built with React and D3 v5, it leverages `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `bin` to process CSV data from the Missing Migrants Project.

Loading thumbnail…

Missing migrants on a Map

This visualization maps the global distribution of missing migrants, with each semi-transparent circle scaled proportionally to the reported number of dead and missing individuals per incident. The map uses a natural Earth projection rendered via `d3.geoNaturalEarth1` and `d3.geoPath`, with landmasses, graticules, and country interiors drawn from TopoJSON data. Circle radii are determined by a `d3.scaleSqrt` function applied to the 'Total Dead and Missing' field from a subset of the Missing Migrants dataset. React manages the asynchronous loading of both the world atlas and CSV data, while SVG renders all visual elements.

Loading thumbnail…

Histogram

This visualization is a histogram representing the total number of dead and missing migrants over time, using data from the Data Canvas Sense Your City Dataset. The chart displays time on the x-axis and the cumulative count on the y-axis. The code uses D3 v5’s `histogram` binning function to aggregate data into monthly bins, `scaleTime` for the temporal axis, and `scaleLinear` for the count axis. React components render the SVG axes and marks, with tooltips showing the total per bin.

Loading thumbnail…

Scatter Plot with menues

A scatter plot of the Iris dataset lets users choose which measurements to plot on the X and Y axes via two React dropdown menus. A color legend for species doubles as a filter, fading points not belonging to the hovered category. The visualization uses D3 scales (scaleLinear, scaleOrdinal) and SVG rendering in React, with axes and points built from reusable components.

Loading thumbnail…

Fork of Stylized Scatter Plot

A fork of the stylized scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width with colored circles for each flower. The React-based visualization uses d3.scaleLinear for positioning, d3.scaleOrdinal for species coloring, and d3.csv for data loading. SVG rendering handles the axes, marks, and labels, while the code includes custom AxisBottom and AxisLeft components and a Marks component with tooltips.

Loading thumbnail…

React starter

This example demonstrates a React-based user interface for selecting a pet from a dropdown menu, with a state-controlled selected value displayed as initial text. It uses React hooks (`useState`) and a reusable `Dropdown` component that renders an HTML `<select>` element, mapping over an array of pet options. The code relies on ReactDOM to render the app into the DOM, and includes a simple label tied to the select via the `for` attribute. The styling is handled through inline CSS in the HTML file, keeping the example focused on component composition and state management without external visualization libraries.

Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a cartoon face out of basic SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth—all drawn with D3 selections. The layout is computed from the SVG dimensions and centered with a transform. It demonstrates importing `select` and `arc` from the d3 module and uses chained `transition().duration(2000)` calls to animate the eyebrows moving up and down. The page loads D3 v7 from UNPKG and renders to a static SVG element.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a bubble chart of religious populations by country, where each bubble’s size encodes the population value and its color distinguishes countries. The chart is built with Vega-Lite’s API (via `vega-lite-api`), using `markCircle` and encodings for x-axis country, y-axis religion, and quantitative size. Data is loaded asynchronously from a CSV using `d3.csv`, and the rendered SVG includes an interactive tooltip handler from `vega-tooltip`. The layout auto-fits the window dimensions.

Loading thumbnail…

Hello HTML

A grid of thirty smiling faces, each rendered as a yellow circle with eyes and an arc-shaped mouth, demonstrates composable React components. The faces are generated from an array using `d3.range` and given randomized properties like stroke width, eye offset, and mouth radius. The visualization uses React components to structure SVG elements, with the mouth path calculated using `d3.arc`. Each face is independently styled, creating a playful pattern while highlighting how React and D3 can work together for declarative SVG rendering.

Loading thumbnail…

Fork of Bar chart

This horizontal bar chart displays the populations of 20 countries in 2020, using United Nations population data. The chart is built with React and D3 v7, where each country’s population is represented by an orange horizontal bar, sorted from largest to smallest. The visualization uses D3’s `scaleBand` and `scaleLinear` to map categorical and numerical data, with SVG `rect` elements for bars and custom axis components. Populations are shown in billions using D3’s `format` function, and tooltips display precise values via SVG `<title>` elements.

Loading thumbnail…

Line Chart

A line chart displays hourly temperature readings over one week in San Francisco, with a smooth curved path connecting data points and circular markers that reveal exact timestamps on hover. The visualization is built with React functional components, using d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the path, and D3’s CSV loader to fetch the data. SVG renders the chart, with styled axis labels and ticks.

Loading thumbnail…

Fork of Temperature in San Francisco Scatter Plot

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. Data comes from the Data Canvas - Sense Your City project and is rendered as an SVG using d3.v5. The code uses `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, with circle elements colored steelblue via CSS. Axis labels, tick marks, and a title are styled with sans-serif fonts, while grid lines extend across the plot area.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in the browser using D3 v7. It fetches a remote CSS named colors dataset and displays the row count, column count, and file size in kilobytes within a large text element. The code uses the `d3.csv` promise-based API to directly parse the data and `d3.csvFormat` to measure formatted output. A commented alternative shows `d3.csvParse` with a manual `fetch` request. The visualization is minimal, focusing only on parsed data statistics rather than chart rendering.

Loading thumbnail…

Fork of Smiley Face Part II

A responsive smiley face drawn with React and SVG fills the browser window. The face’s yellow circle, two eyes, and mouth are positioned relative to the viewport’s center using computed dimensions. React 16.9 renders the SVG elements via `ReactDOM.render`, with hardcoded offsets for facial features rather than interactive data.