Marat

@Filin1985·13 public vizzes

Polished Scatter Plot Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that dynamically change the x- and y-axis variables. Built with React and D3 v5, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading, rendering points as SVG circles with axis labels and tooltips displaying formatted values.

Apr 26, 2021

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attributes appear on the x and y axes, dynamically updating the visualization. Built with React and D3 v5, the example uses `scaleLinear` for scaling, `extent` for domain calculation, and SVG circles for data points. The axes are custom React components that render tick marks and labels, while hover tooltips display formatted values via SVG `<title>` elements.

Apr 26, 2021

Loading thumbnail…

React Starter

This React Starter example shows a simple pet-selector interface with a dropdown menu populated by six animal options. It uses React’s `useState` hook to manage the currently selected value and a custom `Dropdown` component that renders an HTML `<select>` element, with `onChange` events updating the state. The app is rendered to a `#root` div via `ReactDOM.render`, and the page loads React and ReactDOM from unpkg CDN links in `index.html`.

Apr 23, 2021

Loading thumbnail…

World Map

This world map shows country boundaries projected with the Natural Earth projection, using a light gray sphere background, teal landmasses, and graticule lines. The visualization loads geographic data from the world-atlas TopoJSON file via d3.json, then converts it to GeoJSON with topojson.feature and topojson.mesh. React renders the SVG elements, while d3.geoPath and d3.geoNaturalEarth1 handle projection and path generation, with d3.geoGraticule drawing the latitude and longitude grid.

Apr 22, 2021

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature over time using data from a CSV file of San Francisco temperatures. The React and D3 v6 implementation uses `scaleTime` and `scaleLinear` with `curveNatural` smoothing to create a flowing line, with circles marking each data point. Axis components generate ticks and labels, while SVG rendering and CSS styling give the chart a clean, modern aesthetic with a blue color scheme and Poppins font.

Apr 14, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear for scaling, d3.line with curveBasis for the smoothed path, and d3.axisBottom and d3.axisLeft for labeled axes. Grid lines are generated through tick sizing, while the data is loaded from a CSV file hosted on vizhub.com. The chart is rendered as an SVG with a maroon line, axis labels, and a title.

Apr 14, 2021

Loading thumbnail…

ScatterPlot

This scatterplot shows the relationship between sepal length and sepal width for the Iris flower dataset, loading CSV data via `d3.csv`. The React component renders an SVG with `d3.scaleLinear` for both axes, using `extent` to set domains. Axes are drawn as reusable components with `scale.ticks()` for tick generation, and each data point appears as a circle with a native SVG `<title>` tooltip. The chart uses the Poppins font and a minimal blue-and-gray color scheme.

Apr 13, 2021

Loading thumbnail…

Fork of Rendering Data

This bar chart displays the population of ten countries in 2020, sourced from a UN Population dataset loaded via `d3.csv`. The visualization uses React components to render SVG elements, with `d3.scaleBand` and `d3.scaleLinear` mapping categories and values. Axis components generate ticks, while `Marks` draws rectangles with tooltips using the `format` API for abbreviated labels.

Apr 13, 2021

Loading thumbnail…

Fork of Fork of Rendering Data

This visualization displays a vertical gradient of CSS colors, with each row representing a color from a dataset sourced from a Gist-hosted CSV file. The application loads the data asynchronously using D3’s `csv` function, then maps each record to a div whose background color is set to the RGB hex value, creating a stacked color spectrum. Built with React, the code manages state via the `useState` and `useEffect` hooks, and renders the divs through ReactDOM’s `render` method. The page displays a loading message until the data arrives, then draws 960-pixel-wide bars, each 4 pixels tall.

Apr 13, 2021

Loading thumbnail…

Rendering Data

The visualization renders a vertical stack of colored horizontal bars, one per entry in a dataset of CSS color names and their hex values. It demonstrates data loading with `d3.csv` from a GitHub gist, followed by React state management via `useState` and `useEffect`. Each row is a `<div>` whose background color is set to the parsed `RGB hex значение` field, with fixed width and height, creating a continuous spectrum. The example shows asynchronous data fetching with a simple loading state and maps the data directly to styled React elements.

Apr 13, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js, displaying summary statistics about the dataset in large text. It fetches a CSV of CSS color names and uses `d3.csv` to parse the data, then reports the file size in kilobytes, the number of rows, and the number of columns. The code also includes a commented-out alternative approach using the Fetch API and `d3.csvParse` for manual text handling. The visualization is minimal, relying solely on a `<pre>` element styled with CSS to present the results.

Apr 12, 2021

Loading thumbnail…

Color_CSS

This example renders a stylized, smiling face composed of SVG circles and an arc-based mouth. It uses React components to assemble the face from separate elements, including a yellow background circle, two eyes, and a mouth path generated with the D3 `arc` API. The face is centered within an SVG canvas, with positions and sizes defined by constants. The visualization demonstrates a modular React approach to building SVG graphics, leveraging D3 for the mouth’s path geometry.

Apr 11, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a simple smiley face composed of SVG shapes, rendered with React and D3. It uses fixed dimensions (960×500 pixels) and centers the face within an SVG container via a translated group. The face includes a yellow circle for the head, two black eye circles, and a mouth generated with the D3 `arc` generator. All geometry is defined by static constants, with no data loading or interaction. The visualization demonstrates component composition, where separate React components handle the background, eyes, and mouth, and the D3 `arc` API creates a curved path for the mouth.

Apr 11, 2021