danish-nix

Untitled

This dashboard presents a business-engineering tracker, showing a sortable table of project items with status, criticality, and document readiness. The data comes from a PostgreSQL database via JDBC within a JavaServer Pages (JSP) file. The web interface is styled with CSS, and uses JavaScript functions for search, sorting, and delete confirmations. Navigation and table layout are built with standard HTML elements. The page also retrieves status counts and a total item count from the database to display summary information.

Dec 28, 2021

Beeswarm Chart

This beeswarm chart visualizes global suicide statistics, with each circle representing a country positioned along a horizontal axis based on either total deaths or per-capita deaths. Users can toggle between linear and logarithmic scales, filter continents via checkboxes, and hover over points to view tooltips with detailed values. The visualization uses D3 v5's `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to arrange the circles, and loads data from a CSV file. Color encoding distinguishes continents, with animated transitions between different measurement views.

Jul 25, 2021

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which data columns map to the X and Y axes via two dropdown menus, built with a reusable `dropdownMenu` function. The plot, rendered as SVG with D3 v5, uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Each circle animates into position using a `transition().duration(2000).delay()` sequence, with axis labels updating dynamically upon menu selection.

Jul 10, 2021

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository. Users can dynamically select which data columns to map to the X and Y axes using dropdown menus. The visualization employs D3.js v5 with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to render axes and circles, with points appearing in an animated transition. The dropdown menus are constructed using a custom `dropdownMenu` function that binds `select` and `option` elements to column names. Data is loaded via `csv()` and parsed into numeric values for plotting.

Jul 10, 2021

Fork of scatter plot maenu

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, letting users compare any two numeric car attributes by selecting columns from dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` to animate circles from the chart center to their positions over two seconds. Data is loaded from session storage, and the `dropdownMenu.js` module handles menu interactions, while `scatterPlot.js` manages the SVG rendering with animated circle transitions.

Jul 9, 2021

Fork of Hello VizHub

This example displays a table of usernames fetched from a local `accounts.json` file, while also attempting to update SVG text elements with the same data. The code uses D3 v5’s `json` method to load the data and the `select` API to target the SVG, although the text rendering is incomplete because the SVG selection targets elements that do not exist in the markup. Usernames are inserted into an HTML table via string concatenation and `innerHTML`. The visualization relies on D3’s data-joining capabilities but does not fully demonstrate them.

Jul 8, 2021

Importing

This example demonstrates an interactive data import and sampling interface built with D3 v5 and React. It allows users to upload Excel or CSV files, parses the data using the read-excel-file library, and displays a dropdown menu for selecting a column to group by. It incorporates a scatter plot with animated circle transitions, implemented using D3 scales, axes, and transition delays. The visualization uses data from the auto-mpg.csv dataset and renders with SVG.

Jun 20, 2021

Importing

This example presents an image slider interface for a data import feature. A full-screen banner cycles through four background images with corresponding text panels, navigated by arrow controls. The slider logic uses plain JavaScript DOM manipulation, tracking image and text indices via `getElementsByTagName` and `classList`. The page also includes the D3 v5 library and the SheetJS (xlsx) library, loading them via external script tags, suggesting integration for data file handling within the static HTML structure styled by CSS.

Jun 7, 2021

Fork of Blank Canvas

This visualization shows a hierarchical tree of world countries organized by continent and region, displaying each country’s name as text connected by branching paths. The layout uses d3.tree and d3.hierarchy to process the nested JSON data, while d3.linkHorizontal generates the curved connector paths. All elements are rendered as SVG paths and text nodes, with the tree oriented left-to-right across the full viewport. The code explicitly sets the SVG dimensions from the document body and loads data asynchronously via d3.json.

May 16, 2021

Fork of Let's make a map with D3.js!

This example shows a world map with countries rendered as light green shapes against a blue sphere, using geographic data from the World Atlas TopoJSON file. The code loads the topojson data via `d3.json`, converts it to GeoJSON with `topojson.feature`, and projects it onto an SVG using `d3.geoMercator` and `d3.geoPath`. Though country borders are styled in CSS, the map is still static; the JavaScript only logs the parsed features to the console.

May 15, 2021

Fork of Map

This interactive scatter plot demonstrates dynamic data binding with D3 v5, visualizing a bowl of fruit that changes over time—apples disappear, and one transforms into a lemon. The visualization uses D3’s selection joins (`selection.data`, `enter`, `merge`, `exit`) to update SVG circles and text elements, with `scaleOrdinal` mapping fruit types to colors and radii. Animated transitions occur via `setTimeout`, and clicking a fruit logs its ID. The data is synthetic, generated locally with `range` and object literals.

May 15, 2021

Fork of Click select

This interactive scatter plot visualizes cars from the UCI Auto MPG dataset, displayed as a horizontal row of fruit shapes that dynamically update over time. Built with D3 v5, the code uses scales from `d3.scaleOrdinal` to map fruit types to circle radii and colors, while SVG elements are managed through data joins and enter/merge/exit selections. Clicking a circle logs its ID to the console and triggers a render callback, demonstrating event handling alongside animated state changes that add, remove, and transform fruit items.

May 15, 2021

Fork of Fork of Fork of Fork of Cars area

This area chart visualizes temperature in San Francisco over time, using a maroon filled path with rounded curves to emphasize the trend. The visualization loads CSV data from a VizHub dataset, parsing timestamps and numeric temperatures before rendering with D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` APIs. It includes custom axes with tick marks, rotated axis labels, and a title, all drawn as SVG elements. The data source is the Auto MPG dataset from UCI, though the code actually plots temperature data instead.

Fork of Fork of Fork of Carsline

This visualization displays temperature data from San Francisco over time, drawing a smooth line through the points using D3’s line generator with curveBasis. The SVG render includes labeled axes, gridlines from axis tick marks, and a title. The code imports specific D3 v5 functions like scaleTime, scaleLinear, axisLeft, and axisBottom, and loads the dataset from a CSV file via d3.csv. The scatter plot’s underlying data comes from the UCI Machine Learning Repository’s Auto MPG dataset, though the visual focuses on timestamp versus temperature.

Fork of Fork of Cars Scatter Plot

This scatter plot visualizes temperature over time for San Francisco, using data from a CSV file loaded via `d3.csv`. The chart displays a line path generated with `d3.line` and `curveBasis`, along with axes created by `d3.axisBottom` and `d3.axisLeft`. Scales are set using `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The visualization is rendered as an SVG, with styling applied through CSS classes for titles, labels, and grid lines.

Fork of Cars Scatter Plot

A scatter plot displays temperature readings over time from the San Francisco data set, with each point representing a timestamp and its corresponding temperature. The visualization uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, rendering circles in SVG with a fixed radius and semi-transparent steelblue fill. Axis labels and a title are added using d3.axisBottom and d3.axisLeft, with grid lines generated through tick sizing. The code loads the CSV data via d3.csv, parses the temperature and timestamp fields, and appends the plot elements dynamically.

Temp in san francis scatter plot

This scatter plot visualizes temperature measurements in San Francisco over time, with each circle representing a data point from a CSV file loaded via `d3.csv`. The x-axis shows timestamps while the y-axis maps temperature values, with both axes scaled using `d3.scaleLinear` and rendered through `d3.axisBottom` and `d3.axisLeft`. The SVG chart includes labeled axes, a title, and steelblue circles, with data parsing converting timestamps to `Date` objects and temperatures to numbers during preprocessing.

May 12, 2021

Cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each point representing a vehicle. The visualization uses D3 v6’s scaleLinear, extent, axisBottom, axisLeft, and format APIs to construct axes and position circles. Data is loaded from a CSV file via the csv function. The SVG rendering includes red semi-transparent circles, axis labels, and a title, with tick marks and grid lines styled through CSS.

ScatterPlot

A scatter plot displays the populations of the top 10 most populous countries, with each circle’s position on the x-axis corresponding to its population value and on the y-axis to its country name. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisLeft and d3.axisBottom with tick formatting to render axes. The visualization is built with D3 v6, rendered as SVG, and styled with a steelblue fill for the circles.

Customize axes

A horizontal bar chart displays the world’s ten most populous countries, with population values formatted in abbreviated units (e.g., “1.42B”) and gridlines extending across the plot. The code loads CSV data with d3.csv, scales population linearly with d3.scaleLinear and countries as bands via d3.scaleBand, then draws axes using d3.axisLeft and d3.axisBottom while stripping axis domains and tick lines. Custom tick formatting with d3.format replaces “G” with “B” for billions, and margins position the title and axis label.

Lets make a bar chart

This bar chart displays population figures for the ten most populous countries, using horizontal bars sorted by country name along the y-axis. The visualization loads data from a CSV file, multiplies each population value by 1000, and renders SVG rectangles using d3.scaleLinear for the x-axis and d3.scaleBand for the categorical y-axis. It relies on d3.csv, d3.max, d3.axisLeft, and d3.axisBottom to generate the chart within an SVG canvas.