S

Sophia Cofone

@sophiacofone·27 public vizzes

Loading thumbnail…

wine_bar_scatter_menu

This interactive bar chart visualizes wine quality scores across two wine types, with a dropdown menu to switch between red and white wines and another to select which chemical attribute (such as alcohol, pH, or sulphates) is plotted as the bar height. The bars are sorted by quality and animate smoothly when the selections change. The visualization uses D3 v5 with SVG rendering, including `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and transitions on the bar rectangles. Data comes from the embedded CSV file containing wine physicochemical properties.

Loading thumbnail…

wine_bar_chart_menu_2data

This interactive bar chart visualizes the quality ratings of red and white wines, showing how various chemical attributes like acidity, alcohol, and pH compare across quality scores. A dropdown menu, built with the `dropdown_menu` module, lets users switch between white and red wine datasets and select which chemical attribute to display on the y-axis. The chart, rendered as SVG using D3 v5, animates bar transitions with `transition().duration(1000)` when selections change, sorting bars by quality and updating axes, labels, and the title dynamically. Data originates from a CSV file of wine properties.

Loading thumbnail…

wine_scatterplot_menus

This interactive scatterplot explores chemical properties of red and white wines, allowing users to compare any two numeric variables from the dataset through dropdown menus. The visualization filters wines by type and renders maroon circles for red wines or golden circles for white wines. It uses D3 v5 with SVG and animated transitions, where circles expand from the plot center to their positions over one second. The code employs `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` for data loading.

Loading thumbnail…

wine_histogram

This interactive histogram displays the distribution of wine quality ratings, with a dropdown menu allowing viewers to switch between different chemical attributes. The chart animates bar transitions when the selected variable changes. Built with D3 version 7, it uses `d3.histogram()`, `scaleLinear`, and `axisBottom` to render the SVG visualization. The data comes from a semicolon-delimited CSV file containing wine properties, and the code includes a custom `dropdownMenu` module for user interaction.

Loading thumbnail…

wine_scatterplot

A scatterplot shows wine quality ratings along the x-axis against alcohol content on the y-axis, with each wine represented as a semi-transparent golden circle. The visualization uses D3 v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the data, which is loaded from a semicolon-delimited CSV file. The source data contains wine attributes like fixed acidity, pH, and sulphates, though only quality and alcohol are plotted. The SVG rendering includes gridlines and labeled axes, with circles sized at a fixed radius of 10.

Loading thumbnail…

Barchart

This bar chart displays the population of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 to load the data from a CSV and render the chart as SVG. It employs `scaleLinear` for the y-axis, `scaleBand` for the categorical x-axis, and `axisBottom` and `axisLeft` for the axes, with a custom tick formatter converting values to billions. The bars are styled steelblue via CSS.

Loading thumbnail…

Bar Chart D3

This bar chart displays the populations of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. The visualization demonstrates customized axes, employing d3.scaleLinear for the population values and d3.scaleBand for country categories, with d3.axisBottom and d3.axisLeft for tick marks. Rectangles render the bars in SVG, with population numbers formatted using d3.format and scaled to thousands. The chart also removes axis domains and tick lines, and appends custom labels for the title and x-axis.

Loading thumbnail…

Scatterplot D3

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. The code uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` for tick marks. Circles represent individual car models, with red semi-transparent fills. The visualization includes labeled axes and a title, generated through D3’s selection and data-join methods, with data parsed and converted to numeric values before rendering.

Loading thumbnail…

Linechart

This line chart visualizes weekly temperature measurements from the Data Canvas Sense Your City Dataset, plotting timestamps along the x-axis and temperature values along the y-axis. The SVG rendering uses React components, with d3.scaleTime and d3.scaleLinear mapping data to coordinates, and d3.line with curveNatural producing a smooth path through the points. Axes are rendered via custom React components using d3 ticks, while the Marks component applies a teal stroke to the line. Data is loaded asynchronously from a provided CSV URL using d3.csv.

Loading thumbnail…

Barchart v3 w/ React & D3

This bar chart displays the populations of ten countries from the 2019 UN Population dataset, using horizontal bars on a linear scale. The visualization is built with React components for rendering SVG elements and D3 v5 for data loading and scales. D3’s `scaleBand` positions the categorical country labels, `scaleLinear` maps population values to bar widths, and `format` converts tick labels into abbreviated units like “B” for billions. Axes are rendered as separate React components, with styling handled through CSS classes.

Loading thumbnail…

Barchart v3 w/ React & D3

This bar chart displays the top ten countries by 2020 population using a horizontal layout. Built with React and D3 v5, the visualization uses SVG for rendering and scales from `d3.scaleBand` and `d3.scaleLinear` to position bars and axes. Data is loaded asynchronously from a CSV file via `d3.csv` in a custom `useData` hook. Custom React components handle the axes and marks, with the y-axis showing country names and the x-axis representing population values.

Loading thumbnail…

Barchart v2 w/ React & D3

This example shows a horizontal bar chart of the top ten countries by projected 2020 population, with labeled axes and gridlines drawn as SVG elements. It uses React hooks (useState, useEffect) to fetch and transform CSV data from a GitHub gist, then leverages d3.scaleBand and d3.scaleLinear for positioning and scaling. The chart renders entirely through React’s declarative JSX, while d3 provides the data parsing (csv) and scale/domain calculations. Loading state is shown with a large “Loading…” text until data arrives.

Loading thumbnail…

Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of pie slices, with each slice colored by its corresponding RGB hex value. It loads the dataset from a CSV URL using D3’s `csv` utility, then passes the parsed data to React state. React renders the SVG paths, while D3’s `pie` and `arc` generators compute the slice angles and geometry. The code combines React’s `useState` and `useEffect` hooks with D3 utilities, and falls back to a loading message until the data arrives.

Loading thumbnail…

Scatterplot v5 w/ React (menus, color, interactivity (hover & fade)

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that change the x and y axes. Hovering over a species in the color legend fades out points from other species, highlighting the selected category. Built with React and D3 v5, the SVG visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.csv for data loading, with custom React components for axes, marks, and interactive filtering.

Loading thumbnail…

Scatterplot v4 w/ React (menus, color)

This interactive scatterplot visualizes the Iris dataset through a React interface that builds an SVG chart using D3 v5 scales. Users control the X and Y axes via dropdown menus, with axis labels updating automatically based on selection. A color legend maps the three flower species to distinct circle colors, while tooltips reveal values on hover. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and the `extent` function to generate proportional positioning and categorical color mapping.

Loading thumbnail…

Scatterplot w/ React

A scatter plot displays the Iris Dataset, mapping sepal length on the x-axis and sepal width on the y-axis, with each flower as a circle. React components render SVG axes and marks, while d3.scaleLinear and d3.extent compute the scales and domains from CSV data loaded via d3.csv. The code defines reusable AxisBottom, AxisLeft, and Marks components, using tooltips via SVG <title> elements.

Loading thumbnail…

Bar Chart v1 w/ React & D3

This visualization displays a bar chart of the top 10 most populous countries in 2020, using data from the UN Population dataset. Bars extend horizontally from the left, with each bar's length proportional to the country's population, and countries labeled along the vertical axis. The example integrates React 16.9.0 for the user interface and declarative rendering, while D3 v5.11.0 utilities (`csv`, `scaleBand`, `scaleLinear`, `max`) fetch the CSV data and compute the scales. Both libraries—React for component structure and D3 for data processing—output an SVG graphic.

Loading thumbnail…

Scatterplot V2 w/ menus

This interactive scatterplot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. The chart renders as an SVG using React, with axes generated through custom components and scales from d3-scale. Dropdown menus are implemented with ReactDropdown and d3.csv loads the data. Axis labels update automatically to reflect selected attributes, and each data point includes a native SVG tooltip showing its x-value.

Loading thumbnail…

Smiley Face Part II

This example shows a red line segment positioned at the center of the viewport, with an additional red line appended to an SVG via D3’s selection and `attr` methods. The React component renders an SVG with a `line` element, while a separate D3 `select` chain creates a second line with fixed coordinates. The code uses React 16.9, D3 v5’s `select`, and inline SVG attributes, with window dimensions determining the centering transform.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 setup by rendering the text “Hello D3 version 7” on an otherwise empty page. The code uses `select` from the D3 module to set the body’s text content. It also includes a color legend built with `d3.scale.quantize`, the `d3.legend.color` plugin, and a color scale ranging from 0 to 0.15, rendered on an SVG group. The legend uses `colorbrewer.YlGn[9]` for its color range, along with custom shape padding, width, height, and label offset.

Loading thumbnail…

React Listeners

This example displays a large, centered “Hello React!” message using React. The code defines a simple App component that renders a div with the message, and ReactDOM.render mounts it to the root element. It uses the React and ReactDOM production UMD builds from unpkg, along with a bundle.js file, to demonstrate a minimal React setup without additional libraries or data sources.

Loading thumbnail…

Working with Time

This example visualizes temperature readings from the San Francisco Data Canvas Sense Your City dataset as a scatter plot over time. The horizontal axis encodes time, formatted with the `timeFormat` function to show weekdays, while the vertical axis maps temperature values using a `scaleLinear` scale. Rendered as SVG circles, each data point includes a tooltip with its timestamp. The React-based implementation uses D3’s `scaleTime` and `extent` utilities to compute the domain, with custom `AxisBottom`, `AxisLeft`, and `Marks` components for drawing the chart.

Loading thumbnail…

6.19.22 smiley face pt1

This example displays a grid of five smiley faces, each rendered as a yellow circle with black stroke, two eyes, and a curved mouth. Built with React and D3 v5, the faces are generated by mapping over an array from `d3.range`. The `Face` component composes smaller components for the face container, background circle, eyes, and mouth. Random eye radius values are assigned per face using `Math.random()`, while the mouth shape derives from D3’s `arc` generator. All elements are drawn as SVG within a React-rendered `<g>` transform.

Loading thumbnail…

render data with React and d3

A full-circle pie chart displays all 148 CSS named colors by loading data from a GitHub gist via `d3.csv`. React manages the data state and renders each color as an SVG path using `d3.pie` to compute angles and `d3.arc` to generate the path geometry. The visualization shows every color as a single slice, filled with its corresponding hex value, demonstrating a minimal integration of React’s declarative component model with d3’s data utilities and SVG rendering.

Loading thumbnail…

Loading data with React and d3

This example demonstrates how to load and summarize external data within a React application using d3 utilities. A small React component uses the `useState` hook to manage data and the `useEffect` hook to trigger a d3 `csv` request, fetching a CSS named colors dataset from a GitHub gist. While the data loads, the app displays a "Loading..." message, then renders a plain-text summary computed by a custom `message` function, which formats the raw CSV via `d3.csvFormat` to report the file size in kilobytes, the total row count, and the number of columns.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data by fetching a remote file from GitHub Gist and displaying its basic characteristics—file size in kilobytes, row count, and column count—as large text in the browser. It uses d3.csv to asynchronously fetch and parse the data, then formats the result with d3.csvFormat to calculate size. Alternative approaches using fetch, async/await, and d3.csvParse are commented out for comparison. The code relies on D3 v7 and a minimal HTML structure with a pre element for output.

Loading thumbnail…

Mouse Follower

This example displays a single black circle that follows the mouse cursor across an SVG canvas. The circle’s position updates live based on the cursor’s coordinates, which are tracked through React state. The code uses React’s `useState` and `useCallback` hooks, an SVG `<circle>` element, and D3.js version 5 for the underlying library. The rendering relies on ReactDOM to mount the component, with no additional data sources or animations beyond the direct mouse-following interaction.