Nathan Neelis

grouped barchart test 2

This grouped bar chart displays quarterly values for 2019 and 2020, with bars colored steelblue and sized using a linear scale. The visualization loads CSV data from a GitHub gist, converts the numeric fields from millions, and renders rectangular bars via SVG. It uses d3.scaleLinear and d3.scaleBand to map data to positions, with axes created using d3.axisLeft and d3.axisBottom. The chart includes margins and appends all elements to a single SVG group.

Jan 19, 2021

Vacation in corona

A grouped bar chart compares vacation trips within the Netherlands versus abroad across quarterly periods, using green and red bars (via CSS classes) to show 2019 and 2020 values. The visualization loads CSV/JSON data, converts values to millions, and renders with d3.scaleBand and d3.scaleLinear, while d3.axisLeft and d3.axisBottom draw the axes. Data filtering separates domestic and international travel using custom transform functions, and the SVG output is styled with a shared stylesheet.

Jan 19, 2021

Testing grouped barchart

This visualization shows a partially implemented grouped bar chart. It attempts to display population data from a CSV file using D3 v5. The implementation uses `d3.csv` to load data, `d3.scaleBand` for the x-axis, and `d3.scaleLinear` for the y-axis. A second `d3.scaleBand` handles subgroup positioning, and `d3.scaleOrdinal` defines the color palette. The chart is rendered as an SVG using `d3.axisBottom` and `d3.axisLeft`. The code references an external data file, but the actual data loading does not match the expected grouping structure.

Jan 19, 2021

Interactive barChart TRYING NEW TRANSITIONS

This interactive bar chart shows the parking capacity of P+R facilities across cities in the Randstad region of the Netherlands. A checkbox aggregates data for cities with multiple parking areas, updating the chart with smooth transitions. Built with D3 v6, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map city names and capacities, with SVG rectangles animated via `transition()`. Data is fetched from a JSON endpoint and cleaned through custom transformation functions. Axes update dynamically when the filter is toggled, re-rendering bars and tick labels.

Nov 26, 2020

Temperature in San Fransisco Line Chart

A line chart shows tourist counts per city in the Netherlands, displayed with a time-based x-axis and linear y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smoothed maroon path. SVG output includes axis gridlines, labeled axes, a title, and a legend. Data comes from a local CSV file, loaded via `d3.csv`, with values multiplied by 1,000 in the rendering process.

Nov 25, 2020

Temperature in San Fransisco Line Chart

This line chart displays temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The data, loaded from a CSV file, is visualized using D3 v5, with a smoothed line (via `curveBasis`) and removed axis domains for a cleaner look. Axis labels and a title are added, while circles for data points are commented out. The SVG rendering uses `scaleTime` and `scaleLinear` for scales, `axisBottom` and `axisLeft` for ticks, and `line` for the path.

Nov 25, 2020

Scatter plot

This scatter plot displays population counts for six Dutch cities, with country names on the y-axis and population on the x-axis. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for the x-scale, `d3.scalePoint` for the y-scale, and `d3.axisLeft` and `d3.axisBottom` for the axes. The code loads data from a CSV file using `d3.csv` and applies custom number formatting with `d3.format`. Styled circles represent each data point, with axis labels and a title added to the chart.

Nov 25, 2020

Interactive barChart (v12.11.20:00)

This interactive bar chart visualizes the number of P+R parking spaces across Randstad cities, with each bar representing a city’s total capacity. A checkbox aggregates parking data for cities with multiple locations, updating the chart through dynamic transitions. Built with D3 v6, it uses `scaleBand` and `scaleLinear` for axes, employs SVG rectangles with animated height transitions, and loads data from a remote Gist endpoint. The visualization supports smooth updates via enter, update, and exit selections.

Interactive barChart (v11.11_10:00)

This interactive bar chart displays the number of P+R parking spaces in cities across the Randstad region, sourced from a JSON endpoint. Users can toggle a checkbox to aggregate parking capacities for each city, combining data from multiple locations within the same municipality. The visualization is built with D3 v6, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render and update SVG bars, enter/exit selections, and refresh the axes dynamically.

Interactive barChart (v11.11.13:30)

This interactive bar chart shows the number of P+R parking spaces across cities in the Randstad region of the Netherlands. A checkbox toggles between individual parking locations and combined city totals, with bars animating between states using D3 transitions. The visualization uses d3.scaleBand and d3.scaleLinear for axes, with data fetched from a GitHub-hosted JSON file and processed through custom cleaning and transformation functions. SVG rendering includes animated height transitions for entering, updating, and exiting bars.

barchart andersom

This bar chart displays population figures for ten countries, with the y-axis inverted so the highest values appear at the bottom and lower values rise upward. The chart uses a linear scale for population, a band scale for country names, and renders bars as SVG rectangles. D3 v5’s `csv` function loads the data, while `axisLeft` and `axisBottom` add the axes.

Bowl of fruit - general update pattern

Five circles represent fruits in a bowl, transitioning through a sequence of additions and removals using D3's general update pattern. The visualization demonstrates enter, update, and exit selections via `selection.merge` and `transition().duration()`, with apples and lemons distinguished by `d3.scaleOrdinal` color and radius scales. SVG circles animate smoothly as fruits are eaten and replaced, showcasing data joins keyed by unique IDs. The code uses D3 v5 with ES6 modules, rendering animated SVG output.

Interactive barChart (v11.11.12:00)

This interactive bar chart shows the number of P+R parking places for cities in the Randstad region of the Netherlands, sourced from NPR park-and-ride data loaded via a gist URL. A checkbox toggles between showing individual parking facilities and combined totals per city, which updates the visualization. Built with D3 v6 in SVG, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` for the axes and bars, with data cleaning and merging handled through custom functions in a transform module.

Interactive barChart (v11.11_11:10)

This interactive bar chart displays the number of P+R parking places for each city in the Randstad region of the Netherlands. Users can toggle a checkbox to combine parking capacity data for cities with multiple locations, updating the visualization. The chart uses D3 v6 with SVG rendering, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to create and update bars. Data is fetched from a GitHub gist and processed through custom transformation functions that clean, filter, and aggregate the raw dataset.

Interactive barChart (v10.11_19:00)

This interactive bar chart visualizes the number of P+R parking places in Randstad cities, sourced from a JSON endpoint. A checkbox toggle aggregates capacity values for cities with multiple parking areas, merging them on the fly. The chart is rendered with SVG using D3 v6, employing scales, axes, and bar transitions to update the visualization dynamically.

clean code with modules (v10.11_17:00)

A bar chart displays the parking capacity of P+R facilities across Randstad cities, with data fetched from a GitHub gist. The chart communicates total capacity per city, highlighting relative differences in parking availability. The visualization is built with D3 v6, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the plot. The code organizes data cleaning and visual encoding into separate modules, utilizing `fetch` to retrieve and process JSON, then renders the result as an SVG with steel-blue rectangles and rotated city labels.

Exploring RDW data - Basic chart with filtering

This example visualizes parking facility capacities from Dutch RDW open data, displaying each location as a bar on a Cartesian chart. A checkbox filters out facilities with unknown capacity, re-scaling the axes and updating the bar positions dynamically. The chart handles the data’s dirty state, where `null` capacities are excluded upon filtering, and it redraws the x-axis tick labels with a rotation for readability. The implementation uses D3 v6 with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to build the SVG, while local JSON test data or a proxied remote API serves as the data source.

Randstad city vs Capacity - styling

This bar chart visualizes the total park-and-ride capacity for each Randstad city in the Netherlands, sourced from an NPR dataset. The chart shows capacity values on a descending y-axis, with city names rotated vertically along the x-axis. Built with D3 v6, the visualization uses `scaleLinear` and `scaleBand` for positioning, with custom data transformation functions cleaning and aggregating city-specific entries. The SVG render includes styled axes, gridlines, and a steelblue title, demonstrating a clean, margin-based layout.

Exploring RDW data - Basic chart

This example visualizes parking facility capacities from the Dutch RDW dataset, focusing on the first ten facilities and their associated usage types. It renders a static bar chart using SVG, where each bar represents a facility, and the bar height corresponds to its capacity. Facilities with missing capacity data appear as zero-height bars. The visualization is built with D3 v6, employs `d3.scaleBand` and `d3.scaleLinear` for the axes, and uses `d3.axisBottom` and `d3.axisLeft` to draw the chart's axes. The code includes a data preparation pipeline that selects a subset of the remote data, transforms it, and handles missing values, with a toggle for loading local test data.

Randstad city vs Capacity

This bar chart shows the total parking capacity for each city in the Randstad region, with capacities aggregated for cities that appear under multiple names. The visualization uses D3 v6 with SVG rendering, employing `scaleBand` for the x-axis and `scaleLinear` for the y-axis. Data is fetched as JSON from a GitHub gist, then processed through custom functions to filter, clean, and combine city entries before rendering.

Making a Bar Chart - NPR data

This example visualizes the parking capacity of Park & Ride facilities in the Randstad region of the Netherlands, using a horizontal bar chart. Each bar represents a city, with bar length scaled to total capacity. The code loads JSON data from a GitHub gist and processes it through custom transformation functions to filter, clean, and aggregate city entries, combining duplicate city names. The chart is rendered as an SVG using D3 v6, with `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` to create the axes.

Scatter plot - npr data

This scatter plot visualizes the top 10 most populous countries, with each circle representing a nation’s population on a linear scale. The chart uses d3.csv and d3.json to load data from a gist, then applies d3.scaleLinear and d3.scalePoint for axes. The code fetches NPR parking data, extracts capacity and city names, and renders the visualization as an SVG. Axis labels and tick formatting use d3.format with a custom G-to-B replacement.

testing nathan

This example visualizes park-and-ride facility capacities across Dutch cities by binding data from a remote JSON file to an SVG chart. The code fetches NDW open data via `d3.json`, processes the nested specifications and operator fields with custom helper functions, and formats the results for a bar chart. Although the chart’s axes and scales are prepared with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, the main drawing routine is left incomplete, focusing instead on data cleaning and structure. The page uses D3 v6 and renders directly to SVG elements.

Bind data to html with d3

This example visualizes eye color data by binding a JSON dataset to SVG circles, each positioned sequentially along the x-axis and colored according to a validated hex color value. The code loads data with `d3.json`, filters invalid colors using a regex, parses hex values into RGB components, and sorts the data before rendering. It demonstrates basic data joins with `svg.selectAll().data().enter().append()` without using scales, keeping circle positions and radii fixed.

Making a Bar Chart

This example shows a horizontal bar chart ranking the populations of ten countries, from China at the top to Mexico at the bottom. The visualization uses D3 v6 with the `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to position bars and axes within an SVG. Population values are loaded from a local CSV file and scaled by 1,000. The chart renders with steel-blue bars and labeled text, with margins applied to the SVG’s fixed dimensions.

Tweaking the Bar Chart

A horizontal bar chart displays the populations of the ten most populous countries, with values in thousands and bars sorted from largest to smallest. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map data to positions, while `axisLeft` and `axisBottom` generate the axes. Axis lines are removed via selection, and tick labels are formatted with `format('.3s')` to abbreviate numbers, replacing “G” with “B” for billions. Population data comes from a CSV file, and the visualization renders as SVG.

Bowl of fruit - general update pattern (v2)

A bowl of fruit demonstrates the general update pattern, showing how a D3 visualization reacts to changing data over time. Apples are rendered as dark red circles of radius 50, while lemons are yellow circles of radius 30, positioned within a rounded-rectangle bowl. The code uses `d3.select`, `d3.range`, and `d3.scaleOrdinal` from D3 v5, with SVG output. Through `selection.enter`, `.merge`, and `.exit` methods, the example sequentially removes apples, replaces one with a lemon, and filters another, updating the visualization accordingly.

World population area chart

This area chart visualizes world population growth over time, using a smooth, filled curve to emphasize the accelerating trend. The chart includes labeled axes for time and population, with a maroon area and a steel-blue title. Built with D3.js v5, it uses `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG. Population values are formatted in billions, and data comes from a CSV file loaded from VizHub.

Temperature in San Fransisco area Chart

This area chart displays temperatures in San Francisco over a week, with time on the x-axis and temperature on the y-axis, using a smoothed curve and labeled axes. The visualization is rendered as an SVG using D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis` for smoothing. Data is loaded from a CSV file via `d3.csv`, with timestamps parsed as dates and temperatures as numbers.

Temperature in San Fransisco

This example displays a week of temperature readings in San Francisco as a scatter plot, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 to load CSV data and render SVG circles, with axes that include gridlines and clear labels. It employs `scaleTime` and `scaleLinear` for scaling, `axisBottom` and `axisLeft` for ticks, and `extent` to set the domain from the data. The title and axis labels are styled via CSS, and the plot is rendered within an SVG of fixed dimensions.

Cars Scatter plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars. The D3 v5 code loads an auto-mpg dataset from a CSV file and maps the numerical attributes to positions on linear scales. The visualization renders as an SVG, with lime green, semi-transparent circles representing each car, and includes labeled axes and a title. The implementation leverages D3's `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` functions to build the chart.

Nov 5, 2020