slipperyd

@slipperyd·10 public vizzes

Cars Scatter Plot

This scatter plot visualizes the population of the top 10 most populous countries in 2018, with each circle’s horizontal position scaled linearly by population and vertical position determined by a point scale for country names. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for positioning, and d3.axisBottom and d3.axisLeft with tick size adjustments to create gridlines. Circle elements are appended to an SVG, styled with steelblue fill, and axis labels use d3.format for compact number notation.

Feb 26, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries in 2018. Each circle is positioned along the x-axis by population and along the y-axis by country name. The chart uses d3.scaleLinear for the population axis and d3.scalePoint for the categorical country axis, with axes rendered via d3.axisLeft and d3.axisBottom. SVG circles, styled with a steelblue fill, are appended through D3's selection API. The data is loaded from a CSV file using d3.csv, with population values multiplied by 1000 to reflect actual counts.

Feb 26, 2020

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top ten most populous countries in 2018, with China and India leading by a significant margin. The visualization uses D3 v5 to load CSV data and render SVG elements, employing `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for the axes. Custom tick formatting converts large numbers into abbreviated units (e.g., "B" for billions), while removed domain lines and styled gridlines highlight the data values.

Feb 21, 2020

Loading thumbnail…

My Bar Chart

This bar chart displays the total population of the top 10 most populous countries in 2018, with countries on the y-axis and population on the x-axis. Using D3 v5, it loads data from a CSV via `d3.csv` and renders SVG rectangles. The chart employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for tick labels. Population values are multiplied by 1,000 before scaling.

Feb 21, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the total population of the top 10 most populous countries in 2018, sourced from a CSV file. It uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with SVG rect elements rendered inside a grouped container. Axes are drawn via d3.axisLeft and d3.axisBottom, and the data is loaded asynchronously with d3.csv.

Feb 21, 2020

Loading thumbnail…

My Face

A simple cartoon face rendered with D3 v5 SVG shapes, featuring a yellow circle head, eyes, eyebrows, pupils, and a mouth with teeth. The eyebrows animate vertically using chained `transition().duration()` calls, moving up and then returning. The code uses D3's `select`, `arc`, and `attr` helpers to construct the geometric elements, with fixed pixel coordinates for facial features. React starter code accompanies the visualization, though the rendering itself relies solely on plain SVG and D3 transitions.

Feb 11, 2020

Loading thumbnail…

Let's Make a Face with D3,js!

This example uses D3.js version 5 to build an animated face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, and a custom arc path renders the mouth. The eyebrows, drawn as rectangles, perform a repeated vertical transition to simulate a winking or expressive motion. The code leverages D3’s `select`, `arc`, and chained `transition().duration()` methods, while React and a bundled `bundle.js` handle the application structure. All coordinates and sizes are derived from the SVG’s width and height attributes.

Feb 8, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling in a React starter. It shows circles and rectangles positioned and scaled within an SVG canvas, with fills applied via presentation attributes and external stylesheets. A group of line and path elements uses a CSS class to set stroke properties, including a round line join. The code relies on raw SVG elements and CSS selectors rather than a plotting library, with the styling cascade visible from global rules to class-specific overrides.

Feb 4, 2020

Loading thumbnail…

HTML Cars Report

This example displays a static, unstyled list of three used cars with prices, highlighting the 2012 Nissan Leaf in red. The page is built with plain HTML elements—an `<h1>` heading, an unordered list, and CSS classes—rather than a JavaScript framework. The `styles.css` file sets a large monospace font and applies the `.highlighted` class to emphasize one item, while the `index.html` document links the stylesheet. It uses no rendering APIs or data bindings, serving purely as a markup-and-CSS report.

Feb 1, 2020

Loading thumbnail…

Cars Report

A dashboard displays car listings filtered by price, showing only vehicles under $2,000 formatted as “year make model: price” in a large text element. The page initially shows “Loading...” while the `getCars` function returns a hardcoded JSON array of five cars after a simulated two-second delay. The `generatereport` filter and `formatVehicle` map functions process the data using native JavaScript promises and array methods, with the result written to the DOM via `getElementById` and `textContent`.

Feb 1, 2020