dankvader1

@dankvader1·10 public vizzes

Untitled

This example demonstrates a minimal web application that fetches resource scheduling data from a remote REST API. The code renders nothing visually, instead logging the API response to the console. It uses the Axios library to perform a GET request to the ServingLobby RSServiceJSON endpoint, retrieving schedule information by resource ID. The project is built with React, but the primary functionality shown is a straightforward JavaScript HTTP call.

Jul 14, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart plots latency measurements over time. The chart uses a natural cubic spline through `curveNatural` from D3 to create a smooth path, with axes rendered using `scaleTime` and `scaleLinear`. Time ticks are formatted with `timeFormat` to display weekday abbreviations, while axis labels are styled with Poppins font. The data loads from a CSV URL via `d3.csv`, and the visualization is built with React components, using SVG for rendering.

Jul 6, 2022

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates axis customization, removing default axis lines and tick marks while styling remaining elements. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs. The chart formats population values with a custom tick formatter that converts large numbers to abbreviated strings, and renders data as SVG rectangles with a steelblue fill.

Jul 5, 2022

Loading thumbnail…

Map with legends

This map visualizes countries colored by their economy category, with a color legend showing the ordinal scale’s domain. Built with d3.v5, it uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render world boundaries from TopoJSON data, while `d3.scaleOrdinal` maps economy values to a spectral color scheme. The legend, implemented via the custom `colorLegend` function, renders white-background ticks with circles and text labels, and the map supports zooming through d3.zoom. Data originates from world-atlas TSV and JSON files.

Jul 4, 2022

Loading thumbnail…

Bar charts

This example displays a horizontal bar chart of country populations, sorted by the data’s original order, with steelblue bars and a formatted x-axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names, with `axisLeft` and `axisBottom` generating the axes. Population values are parsed from a CSV file and multiplied by 1,000, while tick labels are shortened using `format('.3s')`. The SVG rendering includes custom margins, a title, and an axis label styled via external CSS.

Jul 4, 2022

Loading thumbnail…

World Map practice

This example displays a world map rendered with a natural Earth projection, showing countries filled in light green against a blue sphere backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson.feature. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to generate SVG paths, and appends country and sphere elements to the SVG canvas. The code applies styling through CSS classes for fills and strokes, with stroke opacity set to 0.1.

Jul 3, 2022

Loading thumbnail…

Fork of Fork of Fork of Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It shows how D3 axes can be customized, including removing domain lines, adjusting tick formats, and adding axis labels. The visualization uses d3.scaleLinear and d3.scaleBand to map population and country names, with d3.axisBottom and d3.axisLeft for the axes. Data is loaded via d3.csv, and tick labels are formatted using d3.format with abbreviations converted from billions to their original scale.

Jul 3, 2022

Loading thumbnail…

Fork of Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects, with data loaded from a CSV file. It showcases customized D3 v5 axes, using `d3.scaleLinear` for the population scale and `d3.scaleBand` for countries. The code applies tick formatting with `d3.format`, removes axis domains, and uses `d3.axisBottom` and `d3.axisLeft` to render the scales. A title and axis label are added, with styled SVG text and steelblue rectangles for bars.

Jul 3, 2022

Loading thumbnail…

Simley Face Part 1

This example shows a yellow circle with a black outline on a 960×500 SVG canvas, accompanied by two smaller black circles positioned to the left and right of the center. It represents the initial stage of drawing a smiley face, with only the head and eyes visible so far. The code uses React 18.2.0 to render the page structure, while the SVG elements are defined directly in the HTML markup with static attributes for coordinates and styling. No interactive behavior or animation is present in this version.

Jun 27, 2022

Loading thumbnail…

ThirdPartyAPI

This example visualizes historical Bitcoin price data, fetched live from the CoinDesk API. The visualization presents a line chart that users can interact with, powered by the open-source D3.js library and its `d3-selection-multi` extension for enhanced multi-point selection. Data is loaded asynchronously via `d3.json`, then processed and rendered within a React-based project structure. The chart displays the price trends over time, with the underlying HTML page and JavaScript files managing the data preparation and chart rendering.

Jun 27, 2022