Benjamín Salas Sadler

@pekado·5 public vizzes

Scatter plot Iris Flower with Menu

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions. Dropdown menus using `ReactDropdown` allow users to select which attribute maps to the X and Y axes, dynamically updating the chart. The visualization uses `d3.csv` to load data and `d3.scaleLinear` for axis scaling, rendering SVG circles within a React component. Axis ticks, labels, and marks are generated programmatically, with axis labels and styling using CSS classes for a clean presentation.

Dec 16, 2022

Loading thumbnail…

World map

This example visualizes a world map with landmasses in teal, graticules in gray, and country interiors highlighted with a contrasting stroke. The map is rendered as an SVG using React components. The data is sourced from the world-atlas TopoJSON dataset, and the code utilizes d3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to generate the geographic shapes and grid lines. The `topojson` library's `feature` and `mesh` functions extract the land and interior boundaries from the topology. The visualization also includes a sphere background to frame the map.

Dec 6, 2022

Loading thumbnail…

Line Chart

This line chart visualizes temperature trends over time in San Francisco, using data from a week of hourly measurements. The visualization employs React components for rendering SVG elements, with d3.js utilities like `scaleLinear`, `scaleTime`, and `d3.line` with `curveNatural` to create a smooth path. Axes are built from custom components that generate tick marks and labels using d3's scale methods. The chart includes formatted weekday labels on the x-axis and a rotated y-axis label, with data loaded via d3's `csv` parser.

Dec 5, 2022

Loading thumbnail…

Scatter plot Iris Flower

This scatter plot visualizes the Iris flower dataset, showing the relationship between sepal length and sepal width across individual samples. The example uses React with D3 scales (`d3.scaleLinear`) and rendering via SVG, with axes drawn by custom `AxisBottom` and `AxisLeft` components. The data is loaded asynchronously from a CSV file using `d3.csv`. Each data point is rendered as a circle with a tooltip, and the axes include labels for the measured attributes.

Dec 5, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays the top 10 most populous countries in 2020 as an SVG bar chart, using React components to render each axis and mark while D3 utilities handle data loading and scale construction. The code loads UN population data via `d3.csv`, transforms it with `scaleBand` for categorical y-axes and `scaleLinear` for numeric x-axes, and formats tick labels with `d3.format`. React's `useState` and `useEffect` manage async data fetching, with custom `AxisBottom`, `AxisLeft`, and `Marks` components composing the final chart.

Dec 4, 2022