C

Cyc-Evelyn

@Cyc-Evelyn·20 public vizzes

Loading thumbnail…

(^^)

A force-directed network diagram displays the relationships among characters in the novel *Les Misérables*. Nodes represent individual characters, colored by their community group, while links indicate co-appearance, with line thickness proportional to interaction strength. Nodes can be dragged interactively, causing the simulation to adjust the layout. The visualization uses `d3.forceSimulation` for physics, `d3.drag` for node manipulation, and `d3.schemePaired` for categorical coloring, rendering in SVG within a React framework. Data is loaded from a JSON file hosted on GitHub.

Loading thumbnail…

force_node_simple

This example shows a simple force-directed network graph rendered as SVG, displaying labeled circular nodes and weighted links. It loads node and link data from a JSON file and uses the d3.layout.force API from d3.v2 to simulate physics with configurable gravity, distance, and charge. Each link’s stroke width reflects its weight value, and nodes are draggable via d3.force.drag. A tick handler updates line coordinates and node transforms continuously.

Loading thumbnail…

Colorlegend+Interactive

This interactive scatter plot visualizes the Iris dataset, displaying sepal width against petal length. Each point is colored by species, with a legend that highlights matching data points on hover and dims others. The React-based visualization uses D3 scales for positioning, while a custom ColorLegend component manages the interactive filtering through mouse events.

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays survey data on happiness and organizational membership across multiple countries. Gray background lines provide context, while steel-blue foreground lines represent individual countries. Users can drag axes to reorder dimensions and brush along axes to filter the displayed countries. The implementation uses D3 v3 with `d3.svg.axis`, `d3.svg.line`, `d3.behavior.drag`, and `d3.svg.brush`, rendering the interactive chart as SVG with animated transitions during drag operations.

Loading thumbnail…

Parellel coordinates plot

This parallel coordinates plot displays the Iris dataset, with each row represented as a polyline crossing multiple vertical axes for sepal length, sepal width, petal length, and petal width. The code uses d3.csv to fetch data, d3.scaleLinear for per-dimension Y scales, and d3.scalePoint for axis positioning. Paths are drawn with d3.line, while d3.axisLeft renders each axis with a text label. The SVG rendering applies a uniform teal stroke with 0.5 opacity to reveal density patterns across dimensions.

Loading thumbnail…

05_01_Visualization Refactoring, Largest Cities population in US 2020

This visualization displays the top ten largest U.S. cities by population in 2020 as a horizontal bar chart, with city names on the y-axis and population counts on the x-axis. The chart uses React to render SVG elements and D3 utilities including `scaleBand`, `scaleLinear`, and `max` to position the bars and axes. Data is loaded from a CSV file using D3’s `csv` function and filtered to the top ten entries. The chart highlights the categorical city names against the quantitative population values, making the ranking and relative sizes immediately apparent.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, with axes drawn manually using React components. The code loads the UN Population dataset via `d3.csv`, then uses `scaleBand` and `scaleLinear` from D3 to position bars and ticks, while React state and `useEffect` manage data loading. SVG elements like `<rect>` and `<line>` render the bars and axis ticks, with text labels positioned via D3 scales, all inside a React component tree rendered to the DOM.

Loading thumbnail…

Render Data with React & D3

This example demonstrates how React and D3 can work together to render a dataset of CSS named colors as a circular pie chart. The visualization shows each color as a wedge, filled with its corresponding RGB hex value. The code uses React hooks (`useState` and `useEffect`) to load the CSV data from a GitHub gist via `d3.csv`, while `d3.arc` calculates the SVG path geometry for each slice. The rendering is driven by React state, with SVG `<path>` elements generated directly in the component's JSX.

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The plot maps vehicle weight to the x-axis and horsepower to the y-axis, with point size representing miles per gallon and color encoding weight. The visualization loads data via `d3.csv` and uses the `vl.markCircle` and `vl.encode` API to define the marks and channels. Vega-Lite and Vega are registered through the `vl.register` function, and interactivity is added with `vega-tooltip`.

Loading thumbnail…

Loading Data with React and D3: Organized

This example demonstrates a React and D3.js application that loads and summarizes a CSV dataset of fatal police shootings in the US from 2015 to 2020, sourced from the Washington Post. The interface displays a text summary showing the data size in kilobytes, row count, and column count. The application uses React’s `useState` and `useEffect` hooks to manage the data-loading lifecycle, and D3’s `csv` function to fetch and parse the remote data. The code is organized into separate JavaScript files, with the `message` function formatting the output, and renders results using ReactDOM.

Loading thumbnail…

mouse_follower

A yellow circle follows the mouse cursor across a blank SVG canvas, updating its position in real time as the user moves the pointer. The visualization uses React state with the `useState` and `useCallback` hooks to track mouse coordinates, and ReactDOM renders the circle via SVG. D3 v6’s `arc` function is imported but unused; the core interaction relies on the SVG `onMouseMove` event handler. The fixed canvas is 960 by 500 pixels, with the circle’s radius set to 30.

Loading thumbnail…

Smiley Face +react(ES6)

A grid of randomly generated smiley faces demonstrates component reuse with React and D3. Each face is composed of separate React components for the background circle, eyes, and mouth, assembled within an SVG container. The code uses `d3.arc` to draw the mouth path and `d3.range` to generate 18 faces, each with randomized stroke width, eye position, eye radius, and mouth dimensions. The SVG is rendered via React's declarative JSX syntax, with props passing values from the parent `App` component to the reusable `Face` component.

Loading thumbnail…

face_html

A yellow smiley face rendered with SVG, centered on a 960×500 canvas. It shows a yellow circle for the head, two black eye circles, and a mouth drawn as an arc, all created with React and D3 v6. The code uses D3's `arc` generator to define the mouth path, and React constructs the SVG elements with attributes like `cx`, `cy`, `r`, and `stroke-width`. The face is positioned using a `translate` transform based on the canvas center.

Loading thumbnail…

Polished Scatter Plot+Menus

A polished interactive scatter plot of the Iris dataset lets users explore relationships between sepal and petal measurements. Two dropdown menus, built with react-dropdown, control which attribute appears on the X and Y axes, dynamically updating the axis labels, scales, and point positions. The visualization uses React with hooks for state management and D3.js (d3.scaleLinear, d3.extent) to map data to SVG circle marks, with tooltips showing values. Data loads via d3.csv from a GitHub gist, and custom React components render the axes and dropdowns.

Loading thumbnail…

Scatter Plot+color+legend

This chart visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. A color legend maps the three species to distinct colors, with the legend placed to the right of the plot. The visualization is built with React and D3 v5, using `scaleLinear` for axes and `scaleOrdinal` for species colors. SVG circles represent each data point, and the color legend is generated by the `ColorLegend` component with configurable tick spacing. Axis tick labels are formatted using D3's `format` API.

Loading thumbnail…

Scatter Plot+Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that independently control the X and Y axes. The visualization uses React state management to dynamically update D3 scales and SVG circles when selections change, with axis labels updating to reflect the chosen attributes. The code leverages D3's scaleLinear and extent functions for data mapping, while React hooks manage the component's interactive state transitions.

Loading thumbnail…

shapes with SVG

A simple SVG scene displays a red circle and a green square, alongside a blue circle and rectangle grouped inside a `<g>` element with a translation applied. The example demonstrates basic SVG shape creation and grouping using native SVG elements like `circle`, `rect`, and `g`, with fill colors set via attributes. The SVG is embedded directly in the HTML with a viewport of 960 by 500 pixels. A linked stylesheet defines page-level margins and overflow behavior, while an unused `.heighlighted` class is also present. The code uses no JavaScript libraries, relying solely on static SVG markup.

Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-style face built with SVG shapes, including two eyes, rectangular eyebrows, and a smiling mouth. The eyebrows continuously move upward and downward through a two-stage chained animation cycle. The face is constructed in D3 v5 using `d3.select` and `d3.arc`, with shape attributes set directly. A React starter is available, but the primary implementation uses plain D3 with SVG transitions to animate the eyebrow group’s translate transform.

Loading thumbnail…

scatter chart.js

This scatter chart displays the popular vote counts for political parties and alliances in a Singapore election, with each party represented as a circle along a categorical y-axis. The x-axis uses a linear scale to show vote totals, while the y-axis uses d3.scalePoint to space parties evenly. The visualization is built with D3 v6, loading data from a CSV file and rendering SVG elements using d3.axisLeft and d3.axisBottom for the axes, with circles styled in steelblue via CSS.

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” centered on the page. It demonstrates the basic setup for integrating React with a visualization gallery, using a root `<div>` element and the `ReactDOM.render` method to mount a functional `App` component. The code imports `React` and `ReactDOM`, defines the component inline, and applies a large font size via CSS. It relies on production builds of React 16.13.1 loaded from unpkg, with the component logic contained in a separate `index.js` file bundled into `bundle.js`.