Sistema Frenos

@sistemafrenos·5 public vizzes

Fork of Coronavirus Linear Y Axis

A line chart tracks cumulative COVID-19 deaths over time using data from the Johns Hopkins Coronavirus Dataset. The visualization uses a linear y-axis scale via `d3.scaleLinear` and an ordinal x-axis via `d3.scaleOrdinal`, with `d3.line` generating the path. React components render SVG axes through `d3.axisBottom` and `d3.axisLeft`. The code includes unused marker-line components, but the primary display shows the death total rising from near zero, with gridlines and tick labels styled via CSS.

Mar 16, 2022

Loading thumbnail…

Fork of Coronavirus Linear Y Axis

This line chart displays cumulative COVID-19 deaths over time, using a linear y-axis to emphasize the raw scale of the outbreak. The visualization aggregates daily death totals from the Johns Hopkins Coronavirus dataset and renders them as a single black path with gridlines and axis labels. The code uses React components with d3.scaleBand and d3.scaleLinear for positioning, d3.line to generate the path, and d3.axisBottom and d3.axisLeft for the axes, all rendered as SVG elements.

Mar 16, 2022

Loading thumbnail…

Fork of Fork of Scatter Plot(test_data)

This scatter plot visualizes the Iris Dataset, showing the relationship between Time and Value for each data point. The visualization uses React with D3 v5, rendering SVG circles positioned by d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. Each circle includes a tooltip via the SVG title element, while axes are generated using custom React components with d3.ticks. The data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file.

Mar 16, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple, stylized face built from layered SVG shapes: a yellow circle for the head, two light-blue eyes with black pupils, and a red arc for the mouth. The rendering is driven by a React component hierarchy, with each facial feature defined as a separate reusable component. The code uses D3’s `arc` generator to create the mouth’s curved path, while all positioning relies on SVG attributes within a centered group. The face is hardcoded at 600 by 500 pixels with no interactive behavior or external data source.

Feb 26, 2022

Loading thumbnail…

Fork of States with Stamen employees

This fork of a U.S. states map highlights, in pink, the states where Stamen employees live as of January 2022. Using D3 v4 and TopoJSON, the map loads US state boundaries from a remote dataset and renders them as SVG paths via `d3.geoPath`. A simple CSS class toggles the fill color based on state IDs, while white borders outline all states. The entire SVG is scaled and translated with an SVG `transform` attribute for layout.

Feb 24, 2022