Skip to main content
Log in
A

Adriana Rodriguez Sanabria

@agrodriguezs·14 public vizzes

Loading thumbnail…

Fork of D3 and React Hooks

A React hook-based pie chart example demonstrates how to render D3-generated SVG arcs with state-managed data updates. Using `useState` and `useEffect`, the app generates random numeric data with `d3.range` and `Math.random`, then passes it to a `PieSvg` component that computes arc paths via `d3.pie()` and `d3.arc()`. A button click triggers `setData` to regenerate values, while a separate `ColorLegend` component renders interactive colored circles with hover effects that fade non-hovered ticks using opacity. The visualization shows D3-created SVG elements managed entirely by React’s render cycle.

Nov 23, 2021
Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as an SVG scatter plot, mapping petal length against sepal width and coloring each point by species. A color legend appears on the right, identifying the three iris species with distinct hues. Built with React and D3 v5, the code uses `scaleLinear` for both axes, `scaleOrdinal` for color mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`) to render ticks, circles, and legend items. Data loads asynchronously via D3's `csv` parser, which also converts numeric fields.

Oct 27, 2021
Loading thumbnail…

Syllized Bar Chart

This example displays the top 10 most populous countries as horizontal bars using React and D3 v5. The chart renders SVG rectangles with data from the United Nations World Population Prospects 2019, showing each country’s population in 2020. The y-axis uses `scaleBand` for country labels, while the x-axis employs `scaleLinear` with tick formatting that abbreviates values using `d3.format` (e.g., converting G to B). Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) structure the visualization, with hover tooltips provided through SVG `<title>` elements.

Oct 24, 2021
Loading thumbnail…

Line Chart - Variant

This line chart visualizes the decay of a genetic variant's frequency over time, with time in days on the x-axis and S(t/x) on the y-axis. The chart renders a single polyline with circular markers, using D3 scales (scaleLinear) and the line() generator with curveLinear in a React SVG component. The data comes from a hardcoded variant object containing genomic information, while the visual styling uses Poppins font and teal-colored strokes. Axis components are custom-built with D3 tick generation.

Oct 24, 2021
Loading thumbnail…

Variant Chart -

This visualization displays temperature data over time as a line chart, with multiple overlaid series representing different genetic variants from a JSON dataset. Each variant’s temperature curve is drawn using a natural curve interpolation, with small circles marking individual data points that reveal timestamps on hover. The chart uses React for component structure and D3 v5 scales (`scaleTime`, `scaleLinear`) and axes for rendering the time-based x-axis and temperature y-axis. The temperature data comes from a CSV of weekly San Francisco temperatures, while variant information is loaded from a local JSON file.

Oct 20, 2021
Loading thumbnail…

Fork of Mouse Follower

This example shows a red circle that follows the mouse cursor inside an SVG canvas. The circle’s position is updated to the cursor’s client coordinates, with an initial position at the canvas center. The code uses React’s `useState` and `useCallback` hooks to manage and update the mouse position state, and ReactDOM renders the SVG element, which also includes a fixed red diagonal line, into the page. The SVG `onMouseMove` event handler triggers the position update.

Oct 20, 2021
Loading thumbnail…

Practice Line Chart with Gen Data

This visualization displays multiple genomic variant trajectories over time, where each line represents a different genetic mutation and its expression value across temporal sampling points. The chart overlays several variants simultaneously, with each highlighted by circles at data points and a smooth curve connecting them via d3’s `curveNatural`. The code uses React with D3 v5 scales (`scaleLinear`) and axis components to render an SVG. Temperature data from a CSV provides the time series base layer, while genomic data from a separate JSON file supplies the variant-specific measurements.

Oct 17, 2021
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart shows one week of temperature readings in Celsius for cities worldwide, using data from Data Canvas - Sense Your City. Each city appears as a smoothed, semi-transparent line with a corresponding color legend. The visualization employs d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, d3.nest, and d3.axisBottom/axisLeft to render SVG paths and axes, with a custom colorLegend module.

Oct 17, 2021
Loading thumbnail…

Input Range with react

This example demonstrates a React component that combines a range slider and a dropdown menu to control a numeric value. It shows how React state manages the selected value, which is displayed as text. The code uses React's `useState` hook to store the input value and passes it back to the `RangeInput` component via props. The `RangeInput` component renders an HTML `<input type="range">` element, while the `Dropdown` component renders a `<select>` element, both triggering state updates through `onSelectedValueChange`. ReactDOM renders the main `App` component to the root element.

Oct 17, 2021
Loading thumbnail…

Scatter Plot with Menu and Colors

An interactive scatter plot of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the X and Y axes via React dropdown menus. The visualization uses D3’s `scaleLinear` for axes and `scaleOrdinal` for categorical species colors, with React rendering SVG circles for each data point. Tooltips show formatted axis values on hover, and axis labels update based on the selected attributes. Data is loaded asynchronously with D3’s `csv` and parsed into numeric values.

Oct 16, 2021
Loading thumbnail…

World Map

This example visualizes world country boundaries and landmasses using a natural Earth projection, rendered as SVG paths. It displays graticules and interior borders alongside a styled sphere, with land and water distinguished by teal and blue fills. The visualization uses React with D3 v5, specifically `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic projections. Data comes from the World Atlas TopoJSON, processed via `topojson.feature` and `topojson.mesh` to extract land polygons and country boundaries.

Oct 16, 2021
Loading thumbnail…

Fork of Working with Time in LIne Chart

This line chart visualizes temperature readings over a week for San Francisco, using a smooth natural curve to connect daily data points. The chart displays time on the x-axis and temperature on the y-axis, with hover tooltips showing the day of the week for each point. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveNatural` for the path, and renders as SVG. Data comes from a CSV file loaded via `d3.csv`, with axis labels and tick marks styled through CSS.

Oct 15, 2021
Loading thumbnail…

Syllized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, showing the relationship between sepal length and sepal width. Each circle represents a flower sample, with hover tooltips displaying the x-axis value. Built with React and D3 v5, the visualization uses d3.scaleLinear for both axes and d3.extent to compute domains, while d3.csv loads the data. The SVG rendering includes custom axis components that generate tick marks and labels, with a touch of styling applied through the Poppins font and semi-transparent teal circles.

Oct 14, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays individual cars as points in a scatter plot, mapping engine displacement on the x-axis against horsepower on the y-axis. The data comes from a CSV file, auto-mpg.csv, loaded via d3.csv. Built using the Vega-Lite API, the chart registers Vega, Vega-Lite, and Vega-Tooltip in index.js, then renders points with low opacity to reveal density. The visualization loads external scripts for Vega, Vega-Lite, the API wrapper, tooltip, and D3, and applies a custom config for axis styling and font sizes.

Oct 12, 2021