Skip to main content
Log in
1

1993-INDALKAR

@1993-INDALKAR·12 public vizzes

Loading thumbnail…

Time

This line chart displays temperature readings over the course of a week, with individual data points marked by circles and connected by a smooth curve. The visualization uses React to render SVG elements and D3 v5 functions such as `scaleLinear`, `extent`, and `line` with a natural curve. Data is loaded from a CSV file. Hovering over a circle reveals a tooltip showing the day and temperature value.

Nov 15, 2021
Loading thumbnail…

Massachussets

This example visualizes Massachusetts school districts as a choropleth map, with each town randomly assigned one of three colors from a categorical scale. The geographic boundaries are rendered using a conic conformal projection through `d3.geoPath`, while React manages the component structure. Data is loaded from a local TopoJSON file containing town boundaries, and the color mapping is applied via `d3.scaleLinear`. The map is displayed as SVG paths with black strokes highlighting district borders.

Nov 13, 2021
Loading thumbnail…

Color Legends

This interactive scatterplot displays measurements from the Iris flower dataset, plotting petal length against sepal width with each species represented by a distinct color. The visualization uses React components with D3 scales, including d3.scaleLinear for axes and d3.scaleOrdinal for color mapping. Hovering over a color legend item dims non-matching data points while highlighting the selected species, demonstrating interactive filtering through React state management and SVG circle elements with tooltips.

Nov 12, 2021
Loading thumbnail…

Color Scatter Plot

This color scatter plot displays the Iris flower dataset, plotting petal length against sepal width with points colored by species. The visualization uses React with D3 v5 scales and SVG rendering. The `scaleLinear` functions map the data dimensions to pixel coordinates, while `scaleOrdinal` assigns distinct colors to each species. Custom `AxisBottom` and `AxisLeft` components generate ticks, and the `Marks` component renders circles with tooltips displaying population values.

Nov 1, 2021
Loading thumbnail…

Menus Scatter Plot

An interactive scatter plot of the Iris flower dataset, showing relationships between sepal and petal measurements. Two dropdown menus let viewers select which attributes map to the x and y axes. The visualization uses React with D3’s `scaleLinear` and `extent` for scaling, and renders SVG circles via the `Marks` component. Data is loaded asynchronously with D3’s `csv` fetching from a GitHub gist, with axes generated by custom `AxisBottom` and `AxisLeft` components.

Nov 1, 2021
Loading thumbnail…

React Menus

This example shows a nearly empty React component that renders a blank `<div>` inside a 960-by-500-pixel viewport. The code imports React and ReactDOM, loads D3 v7 from a CDN, and mounts the app to a root element. It uses `ReactDOM.render` to display the component, but the visualization itself is absent, leaving only a white page with no menus or interactive elements.

Nov 1, 2021
Loading thumbnail…

World Map

This example renders a world map using the geoEqualEarth projection and geoPath to draw countries, graticules, and sphere outlines in SVG. It loads country boundaries from the world-atlas TopoJSON dataset, using topojson.feature and topojson.mesh to extract country polygons and interior borders. The visualization, built with React and D3 v5, fills countries in teal, with light gray graticule lines and a lighter sphere background.

Oct 31, 2021
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between sepal width and sepal length for Iris flowers, with each circle representing a data point and showing its population value as a tooltip. The data loads from a CSV file via the `csv` function in d3.v5, while React manages the component state. The visualization uses `scaleLinear` for both axes, with `extent` and `nice` to set domains, and custom `AxisBottom` and `AxisLeft` components render ticks and labels. The SVG circles use d3 scales and formatters to position and annotate the marks.

Oct 30, 2021
Loading thumbnail…

Reading Data from React and React D3

This example displays a horizontal bar chart of population data for the top 10 countries in 2020, sourced from a CSV file loaded via d3.csv. The visualization uses React components for the axis and marks, with D3 scales (scaleBand and scaleLinear) handling the layout. SVG rendering is driven by React, while D3's format function customizes the x-axis tick labels to abbreviate large numbers. A native SVG tooltip element reveals the exact population value on hover for each bar.

Oct 30, 2021
Loading thumbnail…

vizualizing data with react

This example displays a pie chart of CSS named colors, where each slice represents a color name and is filled with its corresponding RGB hex value. The chart is rendered as an SVG using React with D3.js utilities, specifically `d3.csv` to load the color data from a remote CSV file, `d3.pie` to compute the pie slices, and `d3.arc` to generate the path geometry. React's useState and useEffect manage the data loading asynchronously, and the visualization centers itself within a 960x500 viewport.

Oct 23, 2021
Loading thumbnail…

parsing csv data

This example demonstrates how to parse CSV data from a remote URL and display basic information about the dataset. It shows the file size in kilobytes, the number of rows, and the number of columns. The code uses the D3.js v5 library’s `d3.csv` method to fetch and parse the data, then accesses `data.length` and `data.columns.length` to extract the metrics. The data source is a GitHub gist containing CSS named colors. The results are displayed as plain text in a `<pre>` element using standard DOM manipulation.

Oct 5, 2021
Loading thumbnail…

Smiley Face Part II

The example renders a yellow smiley face composed of SVG circles and a d3.arc path, centered within a React component hierarchy. It shows how reusable React components (FaceContainer, BackgroundCircle, Eyes, Smile) compose a static graphic using fixed numeric props for positioning and sizing. The smile employs d3.arc with inner and outer radii and angular extents, while all elements are drawn in a single SVG group translated to the face’s center. No interactivity or data is involved; the visualization purely demonstrates component-based SVG assembly with D3’s arc generator.

Oct 3, 2021