Skip to main content
Log in
N

nicolekevans

@nicolekevans·21 public vizzes

Loading thumbnail…

Untitled

This interactive visualization uses D3.js v7 to display World Cup team statistics from a CSV file as circles arranged in a row, with team names labeled beneath each circle. A control panel presents buttons for different data attributes such as wins, losses, points, and goals, and clicking a button uses `d3.scaleLinear` to map that attribute’s value to the circle radius via `.attr("r", ...)`. The circles initially render at a fixed size, then resize dynamically based on the selected metric, with CSS classes styling active and inactive states.

Dec 15, 2022
Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Dec 5, 2022
Loading thumbnail…

Most Basic Line chart

This example presents a basic line chart displaying a time series from a two-column CSV dataset. A single steelblue line traces the relationship between date and value over time. The chart is built using the D3.js library (v6), which handles CSV loading, date parsing, and the construction of a time-scaled X axis and linear Y axis. The line path is generated via `d3.line()` and rendered as an SVG element within a fixed 500x500 canvas.

Dec 5, 2022
Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Dec 5, 2022
Loading thumbnail…

Department of Water Resources - Working

This dashboard visualizes water resource data across five linked charts, showing quarterly projections, historical revenues, oil production metrics, and federal funding sources from 1997 to 2023. The visualization uses D3.js with a custom module architecture, implementing `scaleBand`, `scaleLinear`, and `scalePoint` for axes, along with `transition` for smooth animated updates. SVG rendering displays line charts with multiple y-axes for annual fiscal data and grouped bar charts for federal funding categories, while data loading uses D3's `csv` function to parse fiscal year and monthly datasets.

Dec 2, 2022
Loading thumbnail…

Fork of Fork of HydrographV2.3 Tooltips/Brush Working with dots and line

Five small multiples show government budget revenue and projections across several multi-year periods. Two line charts plot actual versus projected revenue, two three-axis line charts compare fiscal year metrics, and one grouped bar chart displays funding categories. All render as SVG with D3 v7 transitions, using scales like `scaleLinear`, `scalePoint`, and `scaleBand`, with axes customized via `axisRight` and `axisBottom`. Data comes from CSV files loaded with `d3.csv`.

Dec 1, 2022
Loading thumbnail…

data

This visualization compares trends in border patrol encounters, oil prices, and federal funding over time using a multi-line chart. It plots multiple series from CSV data, including total encounters, crude oil prices, and projected costs, using React to render the SVG elements. The chart distinguishes between historical data and projected values, with the COVID-19 pandemic period visibly impacting encounter numbers. The code relies on React’s component structure to generate the visualization, with data loaded from local CSV files.

Dec 1, 2022
Loading thumbnail…

Fork of Fork of HydrographV2.3 Tooltips/Brush Working with dots and line

This interactive dashboard displays a multi-chart hydrograph visualization tracking federal funding, revenue, and crude oil production data through a combination of line charts and grouped bar charts. The visualization uses React with D3.js (v7) to render SVG elements with animated transitions, showing both actual and projected values across time series data. Notable features include multi-axis line charts displaying three different metrics simultaneously, bar charts comparing historical revenue against projections, and tooltip and brush functionality for interactive data exploration. The implementation leverages D3's scaleLinear, scalePoint, scaleBand, and transition APIs to coordinate the animated rendering across five coordinated chart panels.

Dec 1, 2022
Loading thumbnail…

Fork of Reusable D3 Scatterplot w/o menu

This example displays the classic Iris dataset as an animated scatterplot, mapping petal width to both axes. It leverages D3 v7 (imported via ES modules) to build a reusable `scatterPlot` component, with circles that fade in and grow on load via `transition` and `attr`. SVG is used for rendering, and the visualization is built within a React context, sourcing data from a remote CSV file.

Nov 29, 2022
Loading thumbnail…

Fork of HTML Starter

This visualization displays a time series of total fixed costs (tfc) over time from a CSV dataset, plotted as a single steelblue line. The code uses D3 v6 to load data via `d3.csv`, map dates on a categorical x-axis with `d3.scalePoint`, and map the tfc values on a linear y-axis with `d3.scaleLinear`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, and the line path is drawn with `d3.line`. The SVG chart is embedded in a React-compatible HTML page with custom margins and dimensions.

Nov 23, 2022
Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between quantitative measurements (bomp, perbarrel, tfc, wc) and the categorical Date. Users switch axes via dropdown menus built with the `menu` component, triggering animated transitions of circles using D3's `transition()` and `scaleLinear`/`scalePoint` scales. The SVG rendering employs the `selectAll().join()` pattern for efficient updates, with axes re-rendered via `axisLeft` and `axisBottom`.

Nov 23, 2022
Loading thumbnail…

Fork of HTML Starter -- zoom works-

This interactive line chart displays hydroelectric data over time, with values fluctuating around 1692. The visualization uses a brush mechanism to enable zooming into specific date ranges, dynamically updating the x-axis scale. Built with D3.js v6, the chart renders an SVG path and allows users to select a time window by dragging across the plot area, with axes and scales computed from the CSV data.

Nov 21, 2022
Loading thumbnail…

D3 Tests

This example demonstrates a minimal D3 setup by rendering the text “Hello D3 version 7” in the center of the page. It shows how to load D3 v7 from a CDN and use the `select` function to target the body element. The code calls `select('body').text(...)` to replace the page content, with styling via a large font size and centered alignment. It serves as a basic test for verifying that D3 is correctly installed and functioning.

Nov 18, 2022
Loading thumbnail…

Fork of Trend line with legend

This example shows two synchronized line charts of water level measurements over time, with a brushable overview chart below that filters the main chart’s visible date range. The main chart displays orange and blue series for two wells, alongside a dashed gray regression trendline computed via least squares and a text label with its equation. A color legend identifies the series. The charts use D3 v5’s `scaleTime`, `scaleLinear`, `line`, `brushX`, and `nest` to render SVG paths, while brushing calls `setBrushCoords` to update the trendline and domain.

Nov 18, 2022
Loading thumbnail…

Reusable D3 Scatterplot

This example shows an animated scatterplot of the Iris dataset, with circles positioned by petal width on both axes. Built as a reusable D3 component, it renders SVG circles with a staggered transition on update, growing from radius zero on initial entry. The plot uses `scaleLinear` and `scalePoint` for positioning, with `axisLeft` and `axisBottom` for axes. The code loads CSV data via `d3.csv`, applies numeric parsing, and configures margins and radius through a chainable API, with styles setting circle opacity and tick font sizes.

Nov 18, 2022
Loading thumbnail…

D3 Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. Built with D3 v7 and React, the visualization uses SVG circles and linear scales to map data values to screen coordinates, with axes generated by d3.axisLeft and d3.axisBottom. The code loads CSV data asynchronously via d3.csv, parses numeric fields, and renders points with a steelblue fill. Axis tick labels are styled with a large Courier New font, and the chart fills the browser window dynamically.

Nov 16, 2022
Loading thumbnail…

Javascript Arrays

This example animates a dynamic set of circles whose positions oscillate vertically based on a sine wave, creating a flowing wave-like pattern across the screen. It demonstrates D3’s data join pattern using `selectAll`, `data`, `enter`, `merge`, and `exit` to add and remove circles as the dataset size changes over time with `range` and `Math.sin`. The visualization uses D3 v7 in a React-less HTML setup, rendering to SVG on a full-window canvas, with `setInterval` driving the animation at 60 frames per second.

Nov 15, 2022
Loading thumbnail…

Sol Lewitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using the D3 library. It generates a grid of horizontal and vertical rectangles overlaid with SVG masks containing geometric symbols. The masks, populated with shapes from D3's `symbols` and `symbol` functions, create the intersecting patterns. The code uses D3's `select`, `range`, and `join` APIs to build the SVG structure and apply the masks.

Nov 15, 2022
Loading thumbnail…

Sol Lewitt Reproduction

This visualization reproduces a Sol LeWitt-inspired drawing using nested SVG masks to create a circular window onto a grid of horizontal and vertical stripes. A white circle masked over black reveals colored horizontal bars, while a second inverted mask on a white background exposes vertical bars in the surrounding area. The code builds the SVG dynamically with `document.createElementNS`, configuring two `<mask>` elements and generating 100 rectangular stripes in each direction. The colors alternate through the default black fill, producing a stark geometric pattern that fills the browser viewport.

Nov 14, 2022
Loading thumbnail…

SVG Fundamentals

A demonstration of SVG fundamentals displays basic shapes on a 960-by-500 canvas: a yellow rectangle with a navy stroke, circles in red, green, and blue at varying radii, and a diagonal navy line. The example uses native SVG elements—`rect`, `circle`, and `line`—directly in HTML, with no JavaScript libraries. Styling is applied via SVG attributes like `fill`, `stroke`, and `stroke-width`, showing how static vector graphics are constructed without external data or rendering frameworks.

Nov 9, 2022
Loading thumbnail…

svgFundamentals

This example demonstrates a minimal HTML page that introduces fundamental web technologies, displaying the text "Hello HTML!" in a large, centered font. It uses plain CSS for styling and JavaScript as a supporting language, though no functional scripts are executed. The rendering approach is straightforward DOM manipulation, with the `.message` class controlling the font size and text alignment. The code relies on native HTML and CSS APIs, with no external libraries or data sources included, making it a starting point for understanding basic web page structure before integrating frameworks like React.

Nov 9, 2022