Eevikettu

@Eevikettu·12 public vizzes

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, using data from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles mark each vehicle, with axes labeled and a title displayed. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the numeric fields onto the SVG canvas. Data is loaded via D3’s `csv` function, and the plot is rendered as an SVG, with large, styled text for readability.

Jan 13, 2023

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, rendering SVG rectangles via the Marks component. Axes are generated with custom AxisBottom and AxisLeft components, while tooltips are provided through SVG title elements. Population values are formatted using d3.format to abbreviate large numbers, and the chart applies a Poppins font with a teal color scheme.

Dec 29, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a single empty SVG element with the text “Fork of HTML Starter” styled at a massive 13em font size. The code creates a second SVG element dynamically using `document.createElement` and appends it to the body, though neither SVG contains any drawn content. It demonstrates the basics of embedding SVG in an HTML page alongside CSS styling and vanilla JavaScript, with no external libraries or data sources involved.

Dec 29, 2022

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A minimalist sunrise-and-sunset scene animates continuously in pure SVG. A radial sky gradient shifts from aliceblue to indigo, while two layered landscape paths alternate their linear gradient stops over a 15-second cycle. The sun, a circle, moves vertically via an `<animate>` element on its `cy` attribute. No JavaScript libraries are used; the visualization relies entirely on native SVG SMIL animations and gradient definitions, with styling handled by a linked stylesheet.

Dec 13, 2022

Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization combines a bubble map of global migrant deaths and disappearances with a brushing-enabled time-series histogram. Users can brush over a date range in the histogram, which filters the data points displayed on the map, highlighting incidents within the selected period. The map uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw country boundaries and graticules, while a square-root scale (`d3.scaleSqrt`) sizes the bubbles based on casualty counts. The histogram uses `d3.histogram` to bin data by month and `d3.brushX` to enable the linked selection. Data comes from the Missing Migrants Project, rendered in SVG within a React component.

Nov 9, 2022

Loading thumbnail…

Fork of Persons of Concern StreamGraph by Origin

This visualization shows the total number of persons of concern grouped by country of origin over time, using a streamgraph with labels positioned inside each stream. Built with D3 v4 and rendered as SVG, it applies `d3.stack` with `stackOffsetWiggle` and `stackOrderInsideOut` to create the flowing layers, while `d3-area-label` places country names. The data comes from UNHCR Population Statistics and excludes countries with low counts. Interpolation between years smooths the paths, and hover effects highlight individual countries.

Oct 28, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatter plot of automobile data from the UCI Machine Learning Repository, displaying miles per gallon against horsepower. Each point is colored by country of origin and sized by vehicle weight, with tooltips revealing car names. The visualization employs the `vl` API to construct the mark and encodings, configures axis styling for readability, and uses `vl.scale` for non-zero-based axes. It renders to SVG using Vega-Lite's default renderer, with data fetched asynchronously from a Gist-hosted CSV.

Oct 27, 2022

Loading thumbnail…

Fork of The Margin Convention Outtake

This example displays a bar chart of the top 10 most populous countries in 2020, using data from the United Nations World Population Prospects 2019. The visualization omits both axes and value labels, resulting in an intentionally minimal and "pathetic" presentation. Built with React and D3 v5, the code uses `d3.csv` to load the data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis, rendering the bars as SVG rectangles.

Oct 26, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes United Nations population data for 2020 as a simple bar chart rendered with SVG. It loads a CSV file using D3’s `csv` utility, then uses React components to map each country to a rectangle, with a band scale (`scaleBand`) positioning rows vertically. The code also imports `arc` and `pie` utilities, though the main rendering path uses plain React elements rather than D3’s shape generators.

Oct 26, 2022

Loading thumbnail…

Fork of Rendering Data with React

This example displays CSS named colors as a vertical stack of horizontal stripes, one row per color, using the color’s hex value as the background. It loads color data from a CSV file via `d3.csv` and renders the rows with React components, with each stripe’s height fixed at 4 pixels and width at 960 pixels. The visualization initially shows a loading message until the data arrives, then maps each row to a styled `div` element. The code relies on React’s `useState` and `useEffect` hooks for state management and data fetching.

Oct 26, 2022

Loading thumbnail…

Loading data with d3 and react

This example demonstrates the asynchronous loading and parsing of a CSV file containing CSS named colors. It displays the file size in kilobytes, the number of data rows, and the number of columns. The implementation uses d3.v5's `d3.csv` method to fetch and parse the remote data, then formats the summary with `d3.csvFormat`. An alternative commented-out approach uses native `fetch`, `async`/`await`, and `d3.csvParse` to achieve the same result, highlighting different methods for handling data in a React-based visualization.

Oct 26, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the population distribution of major religions across countries using a bar chart, with each bar segmented and colored by religion. It leverages the Vega-Lite API (`vl.markBar`, `vl.x().fieldN('country')`) to encode the data, with tooltips showing population values via `vl.tooltip().fieldN('population')`. The chart reads from a CSV file containing religion-by-country statistics, loaded asynchronously via D3’s `csv` function. Rendering is handled through Vega and Vega-Lite’s JavaScript libraries, with custom styling applied from a configuration object for axis colors and font sizes.

Oct 25, 2022