MikePowar

@MikePowar·5 public vizzes

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities around the world, sourced from Data Canvas - Sense Your City. Each line represents a city’s temperature over time, distinguished by color, with a legend to identify cities. The chart uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.nest to group data by city. Axes are rendered with d3.axisBottom and d3.axisLeft. A custom colorLegend function creates the SVG legend.

Mar 20, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and custom `axisBottom` and `axisLeft` ticks. Population values are formatted with abbreviations (e.g., "1.42B"), and the chart includes axis labels and a title, with gridlines created via tick sizing and styled steelblue bars.

Jan 28, 2020

Loading thumbnail…

d3 ;)

This example uses D3 version 5 and React to render a simple smiley face in SVG. It draws a yellow circle for the head, two black circles for eyes, and a path for the mouth, all positioned with hard-coded coordinates based on the SVG’s width and height. The code imports `select` and `arc` from D3, appends SVG elements via chained `.attr()` calls, and uses inline styling. No external data or interactive behavior is present.

Jan 10, 2020

Loading thumbnail…

Cuttin Shapes feat. SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS and inline attributes. It uses React as the framework and renders purely with SVG elements, showing how geometric primitives combine with transform groups to create layered compositions. The code exercises SVG presentation attributes like `fill`, `stroke`, and `stroke-width`, while CSS classes such as `.lines` apply additional styling, including stroke linejoin. The page is minimal, loading a separate stylesheet and setting a fixed viewport for the visualization.

Jan 9, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple, static HTML report listing three cars with their model years, names, and prices. The page uses a plain HTML unordered list within a basic document structure, styled by an external CSS file. The CSS sets a large monospace font for the entire page and applies a red color to the highlighted list item, which is marked with a `highlighted` class. The report itself is a raw, non-interactive data display without any JavaScript or visualization library.

Jan 9, 2020