Chira Cezara Victoria

@VictoriaC1·22 public vizzes

Points on a Map

This example displays a world map with dots marking cities, sized proportionally to population via a square-root scale. The map uses a Natural Earth projection and includes graticules and country borders. The visualization is built with React and D3 v5, leveraging `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic rendering, while city data comes from the Data Canvas Sense Your City dataset. Circles are positioned using the projection and styled with opacity.

Oct 10, 2021

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width for three iris species. Hovering over legend items highlights the corresponding species while fading others, enabling quick comparisons. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and SVG circles for marks. The legend responds to `onMouseEnter` and `onMouseOut` events, revealing all data points at full opacity when no species is selected.

Oct 10, 2021

Loading thumbnail…

Making a Color Legend

A scatter plot of the Iris Dataset displays petal length against sepal width, with each point colored by species. A separate color legend identifies the three species using colored circles. Built with React and D3 v5, the visualization uses `scaleOrdinal` for the color mapping and `scaleLinear` for the axes. The SVG output includes custom axis components and a `ColorLegend` component that generates the legend ticks from the color scale's domain.

Oct 10, 2021

Loading thumbnail…

ScatterPlot with COLORS

A scatter plot of the Iris dataset visualizes petal length against sepal width, with each of the three flower species represented by a distinct color via a d3.scaleOrdinal color scale. Built with React and D3 v5, the visualization renders SVG circles with axes generated by reusable AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV using d3.csv. The y-axis is not densely ticked, while the x-axis uses an SI format tick formatter that replaces 'G' with 'B'.

Oct 10, 2021

Loading thumbnail…

Polished ScatterPlot with Menus

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numerical attributes map to the x- and y-axes via dropdown menus. The SVG rendering uses React components and D3 scales to position circles, with axis labels updating dynamically based on selections. Data loading relies on D3’s `csv` parser, while tooltips display formatted values on hover. The interface includes custom-styled dropdowns from the `react-dropdown` library and polished axes with tick formatting.

Oct 10, 2021

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis. Two dropdown menus control the x and y variables, with the axes and circle marks updating dynamically. Built with React and D3 v5, it uses `scaleLinear` for coordinate mapping, `extent` to compute domains, and SVG elements for rendering, with axis components and dropdown selections managed through React state.

Oct 10, 2021

Loading thumbnail…

Menus with React

This example demonstrates interactive dropdown menus built with React, allowing users to select a pet from a predefined list of six options. The selection updates a state variable and is logged to the console. The code defines a reusable `Dropdown` component that renders an HTML `<select>` element, uses React `useState` for state management, and pairs with ReactDOM to render the app. The interface uses large font styling for the label and menu, with options styled at a smaller size.

Oct 10, 2021

Loading thumbnail…

Smiley Face

A colorful smiley face with a yellow circular head, black outline, two eyes, and a curved mouth renders across the full browser window. The React app generates six identical faces, each slightly different due to a random eye radius. Using D3 v7’s `arc` API, the Mouth component creates a semi-circular path, while SVG circles draw the head and eyes within a FaceContainer that centers all elements via a translated `<g>` group. The visualization relies on React’s `ReactDOM.render` and D3’s `range` utility to manage the array of faces.

Oct 10, 2021

Loading thumbnail…

World Map

A world map visualization renders landmasses in teal, a light gray sphere, and graticules, with coastlines highlighted via interiors. Using D3’s geoNaturalEarth1 projection and geoPath, the SVG displays Natural Earth data from the world-atlas package. Built with React, the map loads TopoJSON, converts it to GeoJSON features via topojson’s feature function, and draws graticules and interiors with mesh, highlighting boundaries between countries.

Oct 4, 2021

Loading thumbnail…

Line Chart

This line chart visualizes weekly temperature variations in San Francisco, plotting time on the x-axis against temperature on the y-axis. The React-based code uses d3.scaleTime and d3.scaleLinear to map data from a CSV file to SVG coordinates. Curved marks are rendered with d3.line, while circle elements provide hover tooltips displaying the weekday of each data point.

Oct 4, 2021

Loading thumbnail…

ScatterPlot

This scatterplot shows the relationship between petal length and sepal width in the Iris dataset, with each flower represented by a semi-transparent circle. The visualization uses React to render SVG elements, with D3 v5 scales (scaleLinear) mapping data values to pixel coordinates. Axis components generate ticks and labels, while CSS styling applies colorful custom fonts to axes and axis titles. The data is loaded asynchronously from a CSV file using D3’s csv function, and hover tooltips reveal exact values via SVG title elements.

Oct 2, 2021

Loading thumbnail…

CSS Colors Pie

A pie chart displays every CSS named color as a wedge of equal size, revealing the spectrum of color names from reds to blues. The visualization loads color data from a CSV file via `d3.csv` and uses React’s `useState` and `useEffect` hooks to fetch and store the data. D3’s `pie()` generator and `arc()` path generator create the circular segments, which are rendered as SVG paths filled with the corresponding hex value. React renders the SVG elements, while two versions of D3 are loaded, with the newer one providing the pie-layout utilities.

Oct 2, 2021

Loading thumbnail…

Stylized Bar chart

This stylized bar chart displays the top 10 countries by projected 2020 population, using horizontal bars whose lengths encode the population values. The visualization pairs a D3.js v5 linear scale for the x-axis with a band scale for categorical country labels, while React renders each bar as an SVG rectangle. The design features custom fonts (Pacifico and Open Sans Condensed) and a distinct color palette for axis ticks and marks. Data originates from a CSV file of UN Population 2019 estimates, loaded via D3's `csv` function, and includes tooltips formatted in billions using `d3.format`.

Oct 2, 2021

Loading thumbnail…

Refactored Bar Chart

A horizontal bar chart displays populations for the top ten countries from the UN Population 2019 dataset, loaded via d3.csv. The React app uses d3.scaleBand for categorical y-axes and d3.scaleLinear for quantitative x-axes, rendering SVG rectangles through custom AxisBottom, AxisLeft, and Marks components. React hooks manage asynchronous data fetching, while D3 v5 and v7 are both loaded in the HTML.

Oct 2, 2021

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, drawn as SVG elements within a React component. It uses D3’s `scaleBand` and `scaleLinear` to map country names and population values to pixel coordinates, and generates axis ticks via `xScale.ticks()`. The data is loaded asynchronously from a CSV URL using D3’s `csv` function with a row-parsing callback, then stored in React state. The chart renders rectangles for each bar, with manually positioned text labels for both axes, demonstrating integration of D3 scales and React’s state management.

Oct 2, 2021

Loading thumbnail…

The margin convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 10 countries by 2020 UN population estimates, loaded via `d3.csv`. The visualization shows bars scaled by population using `scaleLinear` for the x-axis and `scaleBand` for categorical country labels on the y-axis. The chart is built with React, using hooks like `useState` and `useEffect` to fetch and store data, and rendered as SVG with a `<g>` element translated by the margin object (top, right, bottom, left) to position the plotting area correctly within the 960×500 canvas.

Oct 2, 2021

Loading thumbnail…

Pathetic Bar Chart

This example displays a horizontal bar chart of the top ten countries by 2020 population from a UN dataset. The bars are rendered as SVG rectangles without labels or axes, appearing intentionally minimal. The code loads data with `d3.csv`, scales it using `scaleBand` and `scaleLinear`, and renders the chart through React components. The visualization relies on React’s `useState` and `useEffect` hooks to asynchronously fetch and update the data, with D3 version 5 handling the scaling logic.

Oct 2, 2021

Loading thumbnail…

Rendering Data with React

This example uses React to render a dataset of CSS named colors, displaying each color as a thin horizontal strip. The visualization loads color data from a CSV file using the `csv` function from D3.js, then maps each data entry to a React `<div>` element whose background color is set to the color’s RGB hex value. The strips are stacked vertically to form a complete color palette, demonstrating a simple integration of D3 data loading with React’s component-based rendering into SVG-like divs.

Oct 2, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset of CSS named colors using React and D3. The app fetches the data via D3’s `csv` function within a React `useEffect` hook, then displays a text message indicating the number of columns, rows, and file size in kilobytes. The rendering is a simple SVG-based React component that shows the loading state until the data arrives, relying on the `d3.csvFormat` method to calculate the data size.

Oct 2, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon and horsepower for various car models, with points colored by origin and sized by weight, based on the auto-mpg dataset. It is built using the Vega-Lite API (vl) with d3 for data loading, and uses vega-tooltip for interactive hover details. The view renders as SVG with a fixed point size and opacity of 0.6, and axes suppress zero scaling. The code registers Vega and Vega-Lite, applies a custom config for styling (removing axis domains, adjusting tick colors, and setting font sizes), and fits the chart to the window dimensions.

Oct 2, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a remote CSV file using D3 v7. The page displays a single message summarizing the dataset’s dimensions: the number of columns, the approximate file size in kilobytes, and the number of rows. It uses `d3.csv` to fetch and asynchronously parse the CSV, then `d3.csvFormat` to calculate the data’s byte length. The data comes from a GitHub-hosted CSS Colors CSV file, and the summary is rendered into a `<pre>` element.

Oct 2, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time with each pointer movement. The visualization uses React hooks (`useState` and `useCallback`) to manage mouse coordinates and trigger re-renders, while React’s synthetic `onMouseMove` event captures the cursor’s clientX and clientY values. Rendered as an SVG circle, the example demonstrates a simple interactive pattern leveraging D3’s presence only for the script tag, with React handling all state and rendering logic.

Sep 30, 2021