Skip to main content
Log in
J

jwadh

@jwadh·14 public vizzes

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with time on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth, maroon path. SVG rendering displays grid lines, tick labels, and axis labels, while the code loads data via D3's `csv` function and styles the chart with CSS for fonts and colors.

Feb 21, 2022
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with time on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth, maroon path. SVG rendering displays grid lines, tick labels, and axis labels, while the code loads data via D3's `csv` function and styles the chart with CSS for fonts and colors.

Feb 21, 2022
Loading thumbnail…

Fork of Fork of Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis to draw smoothed temperature trends, and d3.scaleOrdinal with schemeCategory10 to color each city. A custom colorLegend function renders interactive circles and labels, while d3.nest groups data by city and sorting orders lines by final temperature. SVG rendering and d3.axisBottom/axisLeft provide a complete multi-line comparison.

Feb 21, 2022
Loading thumbnail…

Fork of Fork of Line Chart with Multiple Lines

This line chart shows a week of temperature data in degrees Celsius for multiple cities around the world, using data from Data Canvas - Sense Your City. Each city is represented by a separate smoothed line, with a color legend positioned on the right. The visualization uses d3.scaleTime and d3.scaleLinear for the axes, d3.line with curveBasis for path generation, and d3.nest to group data by city. The SVG rendering includes axis labels, a title, and a custom colorLegend component.

Feb 21, 2022
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data (in degrees Celsius) for cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a distinct colored line, with time on the x-axis and temperature on the y-axis, sorted by each city's final temperature reading. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line, d3.curveBasis, d3.nest, and d3.axisBottom/axisLeft to render the chart and its axes. A custom colorLegend function draws the categorical legend, and the SVG output includes styled grid lines and labels.

Feb 21, 2022
Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, based on 2018 United Nations estimates. The visualization uses d3.scaleLinear for the population axis and d3.scaleBand for country categories, with custom d3.axisLeft and d3.axisBottom ticks. The code formats population labels using d3.format and removes default axis lines for a cleaner look. Data loads from a CSV file, while SVG rendering occurs through d3.select and shape elements, with styling controlled by CSS classes.

Feb 21, 2022
Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, based on 2018 United Nations estimates. The visualization uses d3.scaleLinear for the population axis and d3.scaleBand for country categories, with custom d3.axisLeft and d3.axisBottom ticks. The code formats population labels using d3.format and removes default axis lines for a cleaner look. Data loads from a CSV file, while SVG rendering occurs through d3.select and shape elements, with styling controlled by CSS classes.

Feb 21, 2022
Loading thumbnail…

Fork of Stylized Bar Chart

This fork of a stylized bar chart displays the populations of the top 10 most populous countries as horizontal bars, using a Poppins font and a teal color scheme. Data comes from the UN World Population Prospects 2019, loaded via D3's `csv` function. Built with React and rendered as SVG, the chart uses D3's `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with tooltips powered by SVG `<title>` elements.

Feb 21, 2022
Loading thumbnail…

Making a bar chart

This example demonstrates how to build a bar chart from a CSV file containing population data for ten countries. The chart maps countries to the x-axis using a band scale and populations to the y-axis with a linear scale, rendering each bar as an SVG rectangle. The code imports specific D3 v5 functions—`select`, `csv`, `scaleLinear`, `max`, and `scaleBand`—to parse the data, calculate scales, and append the elements to an SVG canvas.

Feb 21, 2022
Loading thumbnail…

Shapes with SVG and CSS

A face constructed from SVG circles uses React to render two yellow circles with black strokes as eyes and a larger yellow circle as the head, all positioned using JavaScript variables for coordinates and radii. The example demonstrates how to create simple vector shapes with D3.js and React, using inline styling and SVG attributes to control fill colors, stroke widths, and layout within a 960x500 viewport.

Feb 20, 2022
Loading thumbnail…

Fork of HTML Starter

This example renders a centered message reading “Hello HTML!” in large, bold text. It uses plain HTML for structure, CSS for styling the text block with a 13-em font size and center alignment, and JavaScript is referenced as part of the HTML starter template. The code demonstrates basic web page composition without external libraries or data sources.

Feb 20, 2022
Loading thumbnail…

Hello HTML

A single yellow circle with a black outline is centered on a 960 by 500 SVG canvas. The example uses plain HTML, CSS, and JavaScript to demonstrate the minimal structure of a web page, with the circle drawn directly via an SVG `<circle>` element. It sets the body margin to zero and hides overflow, showcasing a basic static rendering approach without any external libraries or data sources.

Feb 15, 2022
Loading thumbnail…

Fork of HTML Starter

This example displays a static, centered text message reading “Hello HTML!”. It uses a plain HTML page with embedded CSS and JavaScript to demonstrate the simplest possible setup for a visualization project. The CSS styles the message with a large font size and center alignment, while the body contains a single div element. The code does not involve any data processing or rendering libraries, serving as a minimal starter template.

Feb 15, 2022
Loading thumbnail…

Fork of Fork of HTML Starter

A simple SVG face rendered with React showcases two black eyes and a yellow circle with a black stroke. The code defines fixed dimensions and positions using JavaScript constants, then constructs the visual elements with React's JSX syntax. D3 is loaded via a CDN, though it is not directly used. React DOM renders the SVG into the page, while CSS removes the body margin for a clean, full-bleed display.

Feb 15, 2022