kestefon

@kestefon·6 public vizzes

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. It demonstrates how to customize D3 axes, with styled tick labels, grid lines, and axis labels. Built with D3 v5, the visualization uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` for the axes. The SVG rendering includes a title and custom fonts, with data drawn as steelblue rectangles.

Nov 24, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a yellow smiley face from SVG primitives, including circles for the eyes and an arc path for the mouth. The most notable behavior is an animated eyebrow movement, achieved by chaining `transition().duration(2000)` calls to shift the eyebrow group’s `transform` attribute up and back down. The code demonstrates fundamental DOM manipulation via `select` and `append`, and uses the `arc` generator to define the mouth’s path.

Nov 23, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and positioned using inline attributes and CSS classes. The code uses raw SVG elements within an HTML document, applying transformations via the `transform` attribute and custom styling through an external stylesheet. A `g` element with the class `lines` overrides default stroke settings, while the CSS file defines properties like stroke width and color for both `line` and `path` elements. The visualization showcases basic vector graphics rendering without any JavaScript or external libraries.

Nov 23, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a simple text-reporting application. It filters a hardcoded collection of car data to show only vehicles manufactured before 2010, formats each entry into a readable string, and displays the resulting report on a webpage. The visualization is built using ES6 modules, with the data parsed from a JSON string in `cars.js` and the report generation logic in `generateReport.js`. The page's styling relies on CSS, and the final output is rendered as plain text in an HTML `<pre>` element.

Nov 23, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates VizHub’s ability to render a simple text message using D3.js and ES6 modules. It displays the phrase “Hello VizHub!” in large, centered, light-blue Ubuntu font against a dark navy background. The code imports the `select` function from D3 v5 and uses it to set the text content of a `div` element. A separate `myMessage.js` module exports the message string, showcasing modular JavaScript organization within the visualization.

Nov 23, 2019

Loading thumbnail…

Cars scatter plot

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses d3.scaleLinear to map the data to x and y axes, d3.axisBottom and d3.axisLeft to render the axes with gridlines, and SVG circles to represent each car. The title, axis labels, and tick styling are configured via CSS classes. Data is loaded asynchronously with d3.csv and parsed before being passed to the render function.

Nov 23, 2019